77ECharts：品牌车运营情况

最新推荐文章于 2019-06-03 13:58:00 发布

weixin_30361753

最新推荐文章于 2019-06-03 13:58:00 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10967070.html

版权

```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<div id="carBrandChartAvgRun" style="width:1000px;height:500px;"></div>
<script type="text/javascript">
    var myCarBrandAvgRunChart = echarts.init(document.getElementById('carBrandChartAvgRun'));
    var optionCarBrandAvgRun = {
        title: {
            text: "各品牌车辆运营平均情况",
            top: "top",
            left: "40%"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            x: 'center',
            y: 'bottom',
            data: ['里程（公里）', '时间（小时）']
        },
        calculable: true,
        grid: {
            left: '3%',
            right: '4%',
            top: '7%',
            bottom: "15%",
            containLabel: true
        },
        xAxis: [{
            axisLabel: {
                show: true,
                rotate: -45,
                textStyle: {
                    fontFamily: "微软雅黑",
                    fontSize: 12
                }
            },
            type: 'category',
            name: '品牌',
            data: ["雷萨起重机", "雷萨泵送", "欧辉", "奥铃", "欧马可", "时代", "欧曼"]
        }],
        yAxis: [{
            type: 'value',
            name: '里程（公里）'
        }, {
            type: 'value',
            name: '时间(小时)'
        }],
        series: [
            {
                name: '里程（公里）',/*和图例legend关联*/
                type: 'bar',
                yAxisIndex: 0,/*坐标系左侧y轴*/
                data: [69, 1152, 668, 1414, 2437, 1675, 3154],
                itemStyle: {
                    normal: {
                        color: "green"
                    }
                },
                markPoint: {
                    data: [{yAxis: 69, xAxis: "雷萨起重机"},
                        {yAxis: 1152, xAxis: "雷萨泵送"},
                        {yAxis: 668, xAxis: "欧辉"},
                        {yAxis: 1414, xAxis: "奥铃"},
                        {yAxis: 2437, xAxis: "欧马可"},
                        {yAxis: 1675, xAxis: "时代"},
                        {yAxis: 3154, xAxis: "欧曼"}
                    ]
                }/*,
             markLine: {
             data: [{yAxis: 69},
             {yAxis: 1152},
             {yAxis: 668},
             {yAxis: 1414},
             {yAxis: 2437},
             {yAxis: 1675},
             {yAxis: 3154}
             ]
             }*/
            },
            {
                name: '时间（小时）',/*和图例legend关联*/
                type: 'line',
                yAxisIndex: 1,/*坐标系右侧y轴*/
                data: [131, 41, 111, 51, 71, 171, 71],
                label: {
                    normal: {
                        color: "black",
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: "blue"
                    }
                },
                lineStyle: {
                    normal: {
                        color: "yellow"
                    }
                },
                markPoint: {
                    data: [{yAxis: 131, xAxis: "雷萨起重机"},
                        {yAxis: 41, xAxis: "雷萨泵送"},
                        {yAxis: 111, xAxis: "欧辉"},
                        {yAxis: 51, xAxis: "奥铃"},
                        {yAxis: 71, xAxis: "欧马可"},
                        {yAxis: 171, xAxis: "时代"},
                        {yAxis: 71, xAxis: "欧曼"}
                    ]
                }/*,
             markLine: {
             data: [{yAxis: 131},
             {yAxis: 41},
             {yAxis: 111},
             {yAxis: 51},
             {yAxis: 71},
             {yAxis: 171},
             {yAxis: 71}
             ]
             }*/
            }
        ]
    };
    myCarBrandAvgRunChart.setOption(optionCarBrandAvgRun);
</script>
</body>
</html>
```