在这个代码基础上,增加2021和2022年的入场和出场数据,并使用一些假数据,使得可以自动动态切换每一年的数据图例,点击年份可以停住画面。以下是修改后的JavaScript代码:

this.define("car", function () {
    o2.load(echartUrl, function () {
        // 基于准备好的dom,初始化echarts实例
        var myCar = echarts.init(document.getElementById('car'));
        
        var data2021 = {
            in: [7000, 8000, 8500, 7200, 8000, 7500, 5000, 7000, 8000, 8500, 7200, 8000],
            out: [6900, 7900, 8300, 7100, 7900, 7400, 4800, 6900, 7900, 8300, 7100, 7900]
        };
        
        var data2022 = {
            in: [7200, 8100, 8600, 7300, 8100, 7600, 5200, 7200, 8100, 8600, 7300, 8100],
            out: [7000, 8000, 8500, 7200, 8000, 7500, 5000, 7000, 8000, 8500, 7200, 8000]
        };
        
        var years = ['2020', '2021', '2022'];
        var currentYearIndex = 0;
        
        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: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                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.in,
                animation: false
            },
            {
                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.out,
                animation: false
            }]
        };
        
        myCar.setOption(options);
        
        var intervalId;
        
        function switchYear() {
            currentYearIndex++;
            if (currentYearIndex >= years.length) {
                currentYearIndex = 0;
            }
            
            var currentYear = years[currentYearIndex];
            var data;
            
            if (currentYear === '2021') {
                data = data2021;
            } else if (currentYear === '2022') {
                data = data2022;
            } else {
                data = data2020;
            }
            
            myCar.setOption({
                series: [
                    { data: data.in },
                    { data: data.out }
                ]
            });
        }
        
        myCar.on('click', function() {
            if (intervalId) {
                clearInterval(intervalId);
                intervalId = null;
            } else {
                intervalId = setInterval(switchYear, 1000);
            }
        });
        
        window.addEventListener("resize", function () {
            myCar.resize();
        });
    }.bind(this));
});

在这个代码中,我添加了2021和2022年的入场和出场数据,并使用了一些假数据。通过点击图表,可以开始或停止自动切换每一年的数据

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

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

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