在这个代码基础上再增加20212022年1-12月的入场和出场数据并使用一些假数据使可以切换每一年的数据图例给出代码thisdefinecar function o2loadechartUrl function 基于准备好的dom初始化echarts实例 var myCar = echartsinitdocumentgetElementByIdcar;
在这个代码基础上,可以通过增加年份和月份的数据来实现每一年的数据图例切换。具体代码如下:
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 著作权归作者所有。请勿转载和采集!