Echarts柱状图设置柱间距不生效

今天不要写bug

已于 2023-05-04 17:04:09 修改

阅读量1.1w

点赞数 12

分类专栏： vue echarts 文章标签： echarts 前端 vue.js 经验分享

于 2022-07-19 10:39:49 首次发布

本文链接：https://blog.csdn.net/weixin_52443895/article/details/125866820

版权

vue 同时被 2 个专栏收录

26 篇文章 2 订阅

订阅专栏

echarts

9 篇文章 0 订阅

订阅专栏

在使用Echarts绘制进度条样式的柱状图时，遇到柱子之间间距设置不生效的问题。错误配置为只设置了grid的left、right、bottom属性，未设置top属性。解决方案是确保grid的top、left、right、bottom属性全部设置，以实现barGap的正确显示。若依然无效，可能代码其他部分存在问题，建议在Echarts官网调试无误后再应用到项目中。

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

由于要做进度条样式的柱状图，如图所示，
在这里插入图片描述

所以想做点柱子之间的间距，于是设置barGap代码配置如下（这里是错误示范）：

series: [{
          name: '',
          type: 'bar',
          data: this.downLoadChartsData.seriesData,
          barWidth: 8, // 柱图宽度
          barGap: 36, // 柱图之间的间距
       }]

到这里很多人还说不生效，看下边这一句，是重点！！！！！

但是发现不生效，官网配置肯定是没问题的，最后发现是我的grid没有top，只有left，bottom，right，需要把这几个全设置，才生效。

!!正确示范:---------------------------------------------------------------------------------------------------------

series: [{
    name: '',
    type: 'bar',
    data: this.seriesData,
    barWidth: 8, // 柱图宽度
    barGap: 36, // 柱图之间的间距
 }],
 // 注意grid这里上下左右全部都要设置齐全
grid: {
     containLabel: true,
      top:30,
      left: 10,
      right: 10,
      bottom: 8
  },