javascript - echarts柱状图堆叠时，如何设置不同类目之前的间隙？

问题描述

问 题

目前用的是echarts 3, 配置项里设置了stack，但是默认是 没有间隙的。如何做到柱状图堆叠时，不同类目之间设置白色的间隙？有做过的童鞋吗？

解决方案

设置itemStyle.normal.borderColor和背景色一样就可以了，然后设置itemStyle.normal.borderWidth的宽度，就可以了 具体代码如下：

option = {
    legend: {
        data:['a', 'b', 'c']
    },
    tooltip: {
        trigger: 'axis',
        show: true
    },
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {},
    series: [{
        type: 'bar',
        name:'a',
        stack: 'sum',
        itemStyle: {
            normal: {
                borderColor:'#fff',
                borderWidth: 2,
                barBorderRadius:[0, 0, 5, 5]
            }
        },
        data:[220, 182, 191, 234, 290, 330, 310]
    },{
        type: 'bar',
        name:'b',
        stack: 'sum',
        itemStyle: {
            normal: {
                borderColor:'#fff',
                borderWidth: 2
            }
        },
        data:[220, 182, 191, 234, 290, 330, 310]
    },{
        type: 'bar',
        name:'c',
        stack: 'sum',
        itemStyle: {
            normal: {
                borderColor:'#fff',
                borderWidth: 2,
                barBorderRadius: [5, 5, 0, 0]
            }
        },
        data:[220, 182, 191, 234, 290, 330, 310]
    }]
};

这篇关于javascript - echarts柱状图堆叠时，如何设置不同类目之前的间隙？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！