首页 > 技术文章 > 使用echarts插件做图表常见的几个问题(四)—— 柱状图中以虚线展示重合的柱子

juicy-initial 2019-09-20 10:30 原文

场景:柱状图实现重合并且以虚线展示

措施:代码如下

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]
    }]
};

 

推荐阅读