在这个代码基础上再增加20212022年1-12月的入场和出场数据并使用一些假数据使可以自动动态切换每一年的数据图例再增加202120222023年份的图例点击年份可以停住画面和跳转相应年份的数据柱状图给出js代码thisdefinecar function o2loadechartUrl function 基于准备好的dom初始化echarts实例 var m

this.define("car", function () { o2.load(echartUrl, function () { // 基于准备好的dom，初始化echarts实例 var myCar = echarts.init(document.getElementById('car'));

    var years = ['2020', '2021', '2022', '2023'];
    var data = [
        {
            year: '2020',
            in: [6609, 7502, 7948, 6589, 7403, 7086, 4547],
            out: [6541, 7430, 7860, 6426, 6998, 6970, 4357]
        },
        {
            year: '2021',
            in: [7000, 8000, 8500, 7200, 7900, 7600, 4900],
            out: [6900, 7900, 8300, 7100, 7800, 7800, 4800]
        },
        {
            year: '2022',
            in: [7200, 8200, 8700, 7400, 8100, 7800, 5100],
            out: [7100, 8100, 8500, 7300, 8000, 8000, 5000]
        },
        {
            year: '2023',
            in: [7500, 8500, 9000, 7700, 8400, 8100, 5400],
            out: [7400, 8400, 8800, 7600, 8300, 8300, 5300]
        }
    ];

    var currentYearIndex = 0;

    function updateChart(yearIndex) {
        var yearData = data[yearIndex];
        var options = {
            title: {
                text: "车流量统计",
                left: 'right',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' },
            },
            legend: {
                x: 'center',
                y: '0',
                icon: 'circle',
                itemGap: 8,
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: 16
                },
                itemWidth: 10,
                itemHeight: 10,
                data: ['入场车流量', '出场车流量', years[yearIndex]]
            },
            grid: {
                left: '0',
                top: '30',
                right: '15',
                bottom: '0',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                axisLine: { show: false },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 14
                    }
                },
            },
            yAxis: {
                type: 'value',
                splitNumber: 4,
                axisLine: { show: false },
                axisTick: { show: false },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.05)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255,255,255,.6)',
                        fontSize: 14
                    },
                },
            },
            series: [
                {
                    name: '入场车流量',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8bd46e'
                            }, {
                                offset: 1,
                                color: '#03b48e'
                            }]),
                            barBorderRadius: 11,
                        }
                    },
                    data: yearData.in
                },
                {
                    name: '出场车流量',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3893e5'
                            }, {
                                offset: 1,
                                color: '#248ff7'
                            }]),
                            barBorderRadius: 11,
                        }
                    },
                    data: yearData.out
                }
            ]
        };
        myCar.setOption(options);
    }

    updateChart(currentYearIndex);

    myCar.on('legendselectchanged', function (params) {
        var selected = params.selected;
        var selectedYear = Object.keys(selected)[0];
        currentYearIndex = years.indexOf(selectedYear);
        updateChart(currentYearIndex);
    });

    window.addEventListener("resize", function () {
        myCar.resize();
    });
}.bind(this));

}