使用echarts插件做图表常见的几个问题(四)—— 柱状图中以虚线展示重合的柱子
场景:柱状图实现重合并且以虚线展示
措施:代码如下
barGap表示不同系列的柱间距离,默认为30%
表示柱子宽度的 30%
option = { xAxis: { data: ['a', 'b', 'c', 'd'], axisTick: {show: false} }, yAxis: { splitLine: {show: false} }, animationDurationUpdate: 1200, series: [{ type: 'bar', itemStyle: { normal: { color: 'transparent', barBorderColor: 'tomato', barBorderWidth:2, barBorderRadius:0, borderType:"dotted" } }, silent: true, barWidth: 40, barGap: '-100%', // 柱子重叠 data: [60, 60, 60, 60] }, { type: 'bar', barWidth: 40, z: 10, data: [45, 60, 13, 25] }] };