使用echarts
绘制柱状图,如何实现下图这种,不同系列所代表的柱体之间的部分重叠的效果呢?
如图,x轴上每个data,对应着4种数据(3柱形、1折线图),其中3个柱体之间存在着部分重叠的视觉效果。
barGap
属性
关键在于配置项series
下的barGap
属性。看一看echarts
官方提供的配置项手册中的解释:
不同系列的柱间距离,为百分比(如 ‘30%’,表示柱子宽度的 30%)。
如果想要两个系列的柱子重叠,可以设置 barGap 为 ‘-100%’。这在用柱子做背景的时候有用。
建议’-45%’
建议大家设置为’-45%’,博主亲测较为美观哈。
上代码:
series: [
{
name: 'aaa',
type: 'bar',
// ★★★ 关键代码 ★★★
barGap: '-45%',
barWidth: 15,
label: {
},
data: [
]
},
{
...
}
]