实现效果:
话不多说,直接上代码
option = {
title: { // 标题数据
text: '货运通道 14天访客信息统计',
textStyle: {
fontWeight: 400,
fontSize: '16px'
}
},
legend: {
icon: 'rect',
top: '30px',
right: 0,
itemHeight: 4,
itemWidth: 32,
textStyle: { // 图列内容样式
color: '#808080', // 字体颜色
fontSize: '16px'
}
},
tooltip: { // 提示框
trigger: 'item',
position: "top",
extraCssText: 'padding: 2px 10px 0;',
formatter: function (params) {
return `<div>${params.data}</div>`
}
},
xAxis: { // 横轴数据
type: 'category',
axisTick: {
show: false
},
axisLabel: {
textStyle: {
show: true,
color: "#B3B3B3",
fontSize: '14',
},
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: { // 纵轴数据
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
axisLabel: {
textStyle: {
show: true,
color: "#B3B3B3",
fontSize: '14',
},
},
},
series: [ // 图表数据
{
name: '车辆',
type: 'bar',
legendHoverLink: true,
itemStyle: {
color: '#2D8CF0',
barBorderRadius: [4, 4, 0, 0]
},
barWidth: 30,
barCategoryGap: '20%',
data: [80,90,120,60,98,50,88]
},
{
name: '人数',
type: 'bar',
legendHoverLink: true,
itemStyle: {
color: '#7A71E8',
barBorderRadius: [4, 4, 0, 0]
},
barWidth: 30,
barCategoryGap: '20%',
data: [92,102,78,34,89,102,36]
},
]
};