echarts设置柱形图柱间距离

红烧咸咸鱼

于 2024-03-14 10:36:02 发布

阅读量1.8k

点赞数 6

分类专栏： echarts JavaScript 文章标签： echarts 前端 javascript echarts柱形图柱形图设置间距柱形图设置间距为0

本文链接：https://blog.csdn.net/weixin_44180579/article/details/136700871

版权

JavaScript 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

echarts

14 篇文章 0 订阅

订阅专栏

文章介绍了在ECharts图表中，barGap用于控制不同系列柱形图的间距，而barCategoryGap则针对同一系列内部的柱子。两者在设置上的差异有助于理解和调整柱状图的视觉呈现。

摘要由CSDN通过智能技术生成

不同系柱形图柱间距离（barGap）

{
      type: 'bar',
      itemStyle: {
        normal: {
          color: '#ddd'
        }
      },
      silent: true,
      barWidth: 40,
      barGap: '10%',  //设置负值 不同系的柱形图会实现重叠效果
      data: [60, 60, 60, 60]
},

同系柱形图柱间距离（barCategoryGap）

{
      type: 'bar',
      itemStyle: {
        normal: {
          color: '#ddd'
        }
      },
      silent: true,
      //barWidth: 40,   // 注意设置了barCategoryGap 就不能设置barWidth，不然设置的间距会不生效！！！
      barCategoryGap: '0%',  //设置为 0%，同系柱形图的间距也会是0
      data: [60, 60, 60, 60]
},