代码中已有2023年的数据在这个代码基础上再增加20212022年1-12月的入场和出场数据并使用一些假数据在一个图例中有三个柱形图使每一年柱形图分开上下并排给出js代码thisdefinecar function o2loadechartUrl function 基于准备好的dom初始化echarts实例 var myCar = echartsinitdocu
this.define("car", function () { o2.load(echartUrl, function () { // 基于准备好的dom,初始化echarts实例 var myCar = echarts.init(document.getElementById('car')); 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,
},
grid: {
left: '0',
top: '30',
right: '15',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'category',
data: ['2021年1月', '2021年2月', '2021年3月', '2021年4月', '2021年5月', '2021年6月', '2021年7月', '2022年1月', '2022年2月', '2022年3月', '2022年4月', '2022年5月', '2022年6月', '2022年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: [6609, 7502, 7948, 6589, 7403, 7086, 4547, 5000, 6000, 7000, 8000, 9000, 10000, 11000]
},
{
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: [6541, 7430, 7860, 6426, 6998, 6970, 4357, 4500, 5500, 6500, 7500, 8500, 9500, 10500]
},
{
name: '2023年入场车流量',
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: [6609, 7502, 7948, 6589, 7403, 7086, 4547]
},
{
name: '2023年出场车流量',
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: [6541, 7430, 7860, 6426, 6998, 6970, 4357]
},
]
};
myCar.setOption(options);
window.addEventListener("resize", function () {
car.resize();
});
}.bind(this));
}
原文地址: https://cveoy.top/t/topic/iiYd 著作权归作者所有。请勿转载和采集!