配置项如下
option = {
backgroundColor: '#00265f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['城网B', '城网C', '农网C','农网D'],
align: 'right',
right: 10,
textStyle: {
color: "#fff"
},
itemWidth: 10,
itemHeight: 10,
itemGap: 35
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['0-20',
'20-40',
'40-60',
'60-80',
'>80'
],
axisLine: {
show: true,
lineStyle: {
color: "#063374",
width: 1,
type: "solid"
}
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#00c7ff",
}
},
}],
yAxis: [{
type: 'value',
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
},
},
splitLine: {
lineStyle: {
color: "#063374",
}
}
}],
series: [{
name: '城网B',
type: 'bar',
data: [60, 284, 233, 219, 37],
barWidth: 10, //柱子宽度
barGap: 1, //柱子之间间距
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#008cff'
}, {
offset: 1,
color: '#005193'
}]),
opacity: 1,
}
}
}, {
name: '城网C',
type: 'bar',
data: [112, 315, 416, 374, 281],
barWidth: 10,
barGap: 1,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00da9c'
}, {
offset: 1,
color: '#007a55'
}]),
opacity: 1,
}
}
}, {
name: '农网C',
type: 'bar',
data: [230, 550, 411, 289, 77],
barWidth: 10,
barGap: 1,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#c4e300'
}, {
offset: 1,
color: '#728400'
}]),
opacity: 1,
}
}
},
{
name: '农网D',
type: 'bar',
data: [2481, 2997, 2573, 941, 285],
barWidth: 10,
barGap: 1,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00c0e9'
}, {
offset: 1,
color: '#3b73cf'
}]),
opacity: 1,
}
}
}]
};