echarts电池图,最外层是柱状图,只有边框,第二层是柱状图,只有背景色,第三层是电池,2层柱状图之间有一点间距,电池图和第二层柱状图等宽,请出代码
时间: 2023-08-10 12:26:20 浏览: 75
以下是使用 ECharts 实现的电池图代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['电池1', '电池2', '电池3', '电池4', '电池5', '电池6'],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
series: [{
name: '边框',
type: 'bar',
data: [100, 100, 100, 100, 100, 100],
barWidth: 20,
barGap: '-100%',
itemStyle: {
normal: {
color: 'none',
borderColor: '#ccc',
borderWidth: 2,
barBorderRadius: 50,
}
},
z: 1
}, {
name: '背景色',
type: 'bar',
data: [100, 100, 100, 100, 100, 100],
barWidth: 20,
barGap: '-100%',
itemStyle: {
normal: {
color: '#f0f0f0',
barBorderRadius: 50,
}
},
z: 0
}, {
name: '电池',
type: 'pictorialBar',
symbol: 'path://M150 0 L140 0 L140 10 L110 10 L110 90 L140 90 L140 100 L150 100 L150 0 M110 20 L100 20 L100 80 L110 80 L110 20',
symbolSize: ['100%', 20],
symbolOffset: [0, 40],
data: [80, 60, 40, 20, 70, 90],
z: 2
}]
};
```
该代码中的 `barGap` 参数指定了两个柱状图之间的间距,即 `'-100%'`,表示两个柱状图完全重叠。同时,第一个柱状图的颜色为透明,只有边框,第二个柱状图的颜色为灰色,只有背景色,第三个序列使用了 `pictorialBar` 类型来绘制电池图形。通过 `symbolOffset` 参数来控制电池图形的位置,使其与第二个柱状图等宽。
阅读全文