Echarts 图表动态切换年份数据:使用 JavaScript 实现自动循环和点击暂停
this.define("car", function () {o2.load(echartUrl, function () {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));
原文地址: https://www.cveoy.top/t/topic/p04A 著作权归作者所有。请勿转载和采集!