在这个代码基础上,可以通过增加年份和月份的数据来实现每一年的数据图例切换。具体代码如下:

this.define("car", function () {
    o2.load(echartUrl, function () {
        // 基于准备好的dom,初始化echarts实例
        var myCar = echarts.init(document.getElementById('car'));
        var data2020 = {
            year: 2020,
            months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            entryData: [6609, 7502, 7948, 6589, 7403, 7086, 4547],
            exitData: [6541, 7430, 7860, 6426, 6998, 6970, 4357]
        };
        var data2021 = {
            year: 2021,
            months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            entryData: [7000, 8000, 8500, 7200, 7800, 7600, 4900, 6000, 8500, 9000, 9200, 8800],
            exitData: [6900, 7800, 8300, 7000, 7600, 7400, 4800, 5900, 8400, 8800, 9100, 8700]
        };
        var data2022 = {
            year: 2022,
            months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            entryData: [7200, 8200, 8700, 7400, 8000, 7800, 5100, 6200, 8700, 9200, 9400, 9000],
            exitData: [7100, 8000, 8500, 7200, 7800, 7600, 5000, 6100, 8600, 9000, 9300, 8900]
        };

        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: ['入场车流量', '出场车流量']
            },
            grid: {
                left: '0',
                top: '30',
                right: '15',
                bottom: '0',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: data2020.months,
                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: data2020.entryData
            },
            {
                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: data2020.exitData
            }]
        };

        myCar.setOption(options);

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

        var yearSelector = document.getElementById('year-selector');
        yearSelector.addEventListener('change', function () {
            var selectedYear = parseInt(yearSelector.value);
            if (selectedYear === 2020) {
                options.xAxis.data = data2020.months;
                options.series[0].data = data2020.entryData;
                options.series[1].data = data2020.exitData;
            } else if (selectedYear === 2021) {
                options.xAxis.data = data2021.months;
                options.series[0].data = data2021.entryData;
                options.series[1].data = data2021.exitData;
            } else if (selectedYear === 2022) {
                options.xAxis.data = data2022.months;
                options.series[0].data = data2022.entryData;
                options.series[1].data = data2022.exitData;
            }
            myCar.setOption(options);
        });
    }.bind(this));
});

通过添加一个年份选择器,根据选择的年份动态更新图表的数据。在HTML中添加一个年份选择器,如下所示:

<select id="year-selector">
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
</select>

然后在脚本中添加事件监听,根据选择的年份更新数据,最后调用myCar.setOption(options)方法更新图表


原文地址: https://www.cveoy.top/t/topic/iiUg 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录