image.png

image.png

<div id="container" style="width: 100%; height: 100%;"></div>

let chartLineMuti = echarts.init(document.getElementById('container'));

// let vehicleNumberArray = new Array();
let countArray = new Array();
let maxSpeedArray = new Array();

chartLineMuti.clear();

$.each(chartData,function(index,value){
    // vehicleNumberArray.push(value.vehicleNumber);
    countArray.push(value.count);
    maxSpeedArray.push(value.maxSpeed);
});
let vehicleNumberArray = ["车辆1","车辆2","车辆3","车辆4","车辆5","车辆6","车辆7","车辆8","车辆9","车辆10","车辆11"];

// 指定图表的配置项和数据
let option = {
    title: {
        text:'车辆超速月统计',
        top:'10px',
        left:'center',
        textStyle:{
            fontSize: 15,
            align:'center',
            color:'blue'
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    legend: {
        right: '20%',
        top:'10px',
        data:['超速次数','最大速度']
    },
    xAxis: [
        {
            type: 'category',
            data: vehicleNumberArray,
            axisLabel: {
                interval:0,
                rotate:40
            },
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    notMerge:true,
    yAxis:  [
        {
            type: 'value',
            name: '超速次数',
            axisLabel: {
                formatter: function(value, index){
                    if (Number.isInteger(value)){
                        return parseInt(value);
                    }
                }
            }

        },
        {
            type: 'value',
            name: '最大速度(千米/时)',
            axisLabel: {
                formatter: '{value}'
            }

        }
    ],
    series: [
        {
            name:'超速次数',
            type:'bar',
            barWidth : 15,
            itemStyle:{
                normal:{
                    color:'#5bc0de'
                }
            },
            data:countArray
        },
        {
            name:'最大速度',
            type:'line',
            itemStyle:{
                normal:{
                    color:'#1E90FF'
                }
            },
            yAxisIndex: 1,
            data:maxSpeedArray
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
chartLineMuti.setOption(option);