echarts - 如何在echarts中的条之间添加更多空间

Question

有什么方法可以在条之间添加更多空间。我不知道如何使类别之间的空间更大。我尝试了组填充，但它不起作用，请有人帮助我。

这是一天的进度表，我希望条形之间有更多的空间。

代码：

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {           
            type: 'shadow'        
        }
    },
    legend: {
       
    },
     
    grid: {
        left: '3%',
        right: '4%',
        bottom: '1%',
        containLabel: true,
        height: '90%'
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['9-10', '10-11', '11-12', '12-1', '1-2', '2-3', '3-4','4-5','5-6','6-7','7-8']
    },
    series: [
        {
            name: 'Active',
            color: 'green',
            type: 'bar',
            stack: 'total',
            groupPadding: 2,
            label: {
                show: true,
                position: 'insideRight'
                
            },
            data: [20, 30, 15, 25, 10,15, 30, 30, 5, 20,10]
        },
        {
            name: 'Inactive',
            type: 'bar',
            stack: 'total',
            color: 'red',
            groupPadding: 2,
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [10, 20, 30, 10, 25,10, 20, 25, 15, 30,5]
        },
        {
            name: 'Active',
            color: 'green',
            type: 'bar',
            stack: 'total',
            groupPadding: 2,
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [30, 10, 15, 25, 25,35, 10, 5, 40, 10,45]
        },
        
        
        
    ]
  
};

标签： echarts

Answer 1

您可以barCategoryGap根据文档使用。

  var myChart = echarts.init(document.getElementById('main'));

  // Unsert your code below
  option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {           
            type: 'shadow'        
        }
    },
    legend: {
       
    },
     
    grid: {
        left: '3%',
        right: '4%',
        bottom: '1%',
        containLabel: true,
        height: '90%'
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['9-10', '10-11', '11-12', '12-1', '1-2', '2-3', '3-4','4-5','5-6','6-7','7-8']
    },
    series: [
        {
            name: 'Active',
            color: 'green',
            type: 'bar',
            barCategoryGap: '50%',
            stack: 'total',
            groupPadding: 2,
            label: {
                show: true,
                position: 'insideRight'
                
            },
            data: [20, 30, 15, 25, 10,15, 30, 30, 5, 20,10]
        },
        {
            name: 'Inactive',
            type: 'bar',
            stack: 'total',
            barCategoryGap: '50%',
            color: 'red',
            groupPadding: 2,
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [10, 20, 30, 10, 25,10, 20, 25, 15, 30,5]
        },
        {
            name: 'Active',
            color: 'green',
            type: 'bar',
            barCategoryGap: '50%',
            stack: 'total',
            groupPadding: 2,
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [30, 10, 15, 25, 25,35, 10, 5, 40, 10,45]
        },
        
        
        
    ]
  
};

  // Unsert your code above
  myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>