Echart堆叠柱状图：色块之间添加白色间距效果设置

最新推荐文章于 2024-03-14 10:36:02 发布

HaanLen

最新推荐文章于 2024-03-14 10:36:02 发布

阅读量2.4k

点赞数 1

分类专栏： Echart 文章标签： echarts JavaScript

本文链接：https://blog.csdn.net/weixin_40119412/article/details/125416596

版权

Echart 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

柱状图色块之间是没有间隙。
在这里插入图片描述

堆叠柱状图色块之间设置白色间隙，主要设置item的边框颜色borderColor以及宽度borderWidth
在这里插入图片描述

在这里插入图片描述

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