Echarts在线免费图表

 
            let xdata =  ["山东高速股份", "临沂发展公司", "烟台发展公司", "济南发展公司", "湖北发展公司", "泰安发展公司", "滨州发展公司", "聊城发展公司", "东营发展公司", "青岛发展公司", "潍坊发展公司", "济宁发展公司", "德州发展公司", "日照发展公司", "淄博发展公司", "威海发展公司", "菏泽发展公司", "枣庄发展公司", "四川发展公司", "云南发展公司", "齐鲁高速股份"]
let seriesData = [2589.94,655.571,509.497,368.293,310.176,304.134,255.588,236.161,233.834,229.476,223,189.969,164.771,164.634,152.303,133.163,104.589,86.739,306.342,255.804,240.81]
option = {
    "tooltip": {
        "confine": true,
        "show": true,
        "trigger": "axis",
        "axisPointer": {
            "type": "line",
            "crossStyle": {
                "color": "#999"
            }
        },
        "backgroundColor": "rgba(4,46,85,0.8)",
        "borderColor": "#008dfd",
        "textStyle": {
            "color": "#fff",
            "fontFamily": "Arial",
            "fontSize": 12
        },
        "lineStyle": {
            "color": "#b3b9b7"
        }
    },
    "grid": {
        "top": "30",
        "left": "3%",
        "right": "3%",
        "bottom": "10%",
        "containLabel": true
    },
    "legend": {
        "data": [],
        "textStyle": {
            "color": "#6e7079",
            "fontSize": 12
        },
        "itemGap": 5,
        "itemWidth": 10,
        "itemHeight": 5
    },
    "xAxis": [{
        "type": "category",
        "IsStaggered": "",
        "data": xdata,
        "axisPointer": {
            "type": "shadow"
        },
        "axisLabel": {
            "formatter": "{value}",
            "color": "#6e7079",
            "fontSize": 12,
            "fontFamily": "Arial",
            "margin": 7,
            "interval": "auto",
            "rotate": 0
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#e0e6f1"
            }
        },
        "axisTick": {
            "show": false
        }
    }],
    "dataZoom": [{
        "brushStyle": {},
        "show": true,
        "handleSize": "0%",
        "top": "92%",
        "start": 0,
        "end": 20,
        "showDataShadow": false,
        "height": 10
    }],
    "yAxis": [{
        "show": true,
        "type": "value",
        "name": "公里",
        "nameTextStyle": {
            "color": "#6e7079",
            "fontSize": 12,
            "padding": [0, 0, 0, 0]
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": "#e0e6f1",
                "type": "dashed",
                "width": 1
            }
        },
        "axisLabel": {
            "formatter": "{value}",
            "color": "#6e7079",
            "fontSize": 12,
            "fontFamily": "Arial",
            "margin": 7
        },
        "minInterval": 0,
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "rgba(73,217,254,0.02)"
            }
        }
    },
    {
        "show": false,
        "type": "value",
        "name": "",
        "minInterval": 0,
        "axisLabel": {
            "formatter": "{value}",
            "color": "#ffffff",
            "fontSize": 12,
            "fontFamily": "Arial",
            "margin": 7
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": "rgba(23,225,177,0.12)",
                "width": 1
            }
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#49D9FE"
            }
        }
    }],
    "series": [{
        "name": "里程",
        "type": "bar",
        "stack": "total_0",
        "data": seriesData,
        "yAxisIndex": 0,
        "label": {
            "show": false,
            "position": "top",
            "color": "#6e7079",
            "fontSize": 10
        },
        "barWidth": 15,
        "itemStyle": {
            "normal": {
                "barBorderRadius": [18, 18, 0, 0],
                "shadowOffsetY": 0,
                "shadowColor": "#51a4f7",
                "color": {
                    "colorStops": [{
                        "offset": 1,
                        "color": "#51a4f7"
                    },
                    {
                        "offset": 0,
                        "color": "#51a4f7"
                    }],
                    "x": 0,
                    "y": 1,
                    "x2": 0,
                    "y2": 0,
                    "type": "linear",
                    "global": false
                }
            }
        }
    }]
}