当前位置:网站首页>Echart stack histogram: add white spacing effect setting between color blocks

Echart stack histogram: add white spacing effect setting between color blocks

2022-06-26 13:18:00 HaanLen

There is no gap between the color blocks of the histogram .
 Insert picture description here

Set white gap between color blocks of stacked histogram , Main setup item The border color of borderColor And the width borderWidth
 Insert picture description here

 Insert picture description here

option = {
    
  legend: {
    },
  grid: {
    
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    
    type: 'value'
  },
  yAxis: {
    
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
    
      name: 'Direct',
      type: 'bar',
      stack: 'total',
      label: {
    
        show: true
      },
      data: [
        {
    
          value: 320,
          itemStyle: {
    
            borderColor: '#fff',
            borderWidth: 2
          }
        },
        302,
        301,
        334,
        390,
        330,
        320
      ]
    },
    {
    
      name: 'Mail Ad',
      type: 'bar',
      stack: 'total',
      label: {
    
        show: true
      },
      data: [
        {
    
          value: 120,
          itemStyle: {
    
            borderColor: '#fff',
            borderWidth: 2
          }
        },
        132,
        101,
        134,
        90,
        230,
        210
      ]
    },
    {
    
      name: 'Affiliate Ad',
      type: 'bar',
      stack: 'total',
      label: {
    
        show: true
      },
      data: [
        {
    
          value: 220,
          itemStyle: {
    
            borderColor: '#fff',
            borderWidth: 2
          }
        },
        182,
        191,
        234,
        290,
        330,
        310
      ]
    }
  ]
};

原网站

版权声明
本文为[HaanLen]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/177/202206261203043446.html