echarts柱状图电池样式

option = {
xAxis: {
type: 'category',
data: ['老石旦', '公乌素', '黄白茨', '五虎山', '利民', '路天'],
axisLabel: {
textStyle: {
color: '#AEC3DC',
fontSize: '14px'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#8FABBF',
fontSize: '16px'
}
},
splitLine: {
lineStyle: {
type: 'solid',
color: ['rgba(255,255,255,0.1)']
},
show: true
}
},
grid: {
left: '40px', // 左侧内边距
right: 0, // 右侧内边距
bottom: '30px', // 底部内边距
top: '30px'
},
series: [
{
type: 'bar',
barWidth: 20,
itemStyle: {
color: '#1FC6FF',
normal: {
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
}
},
data: [120, 200, 150, 80, 70, 110],
z: 10,
zlevel: 0
},
{
// 分隔
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#ffffff'
}
},
symbolRepeat: 'fixed',
symbolMargin: 6,
symbol: 'rect',
symbolClip: true,
symbolSize: [20, 2],
symbolPosition: 'start',
symbolOffset: [0, -1],
data: [120, 200, 150, 80, 70, 110],
width: 25,
z: 0,
zlevel: 1
}
]
};

完成效果：