echart减少柱子之间间距

513 阅读1分钟

柱状图有时会遇到要压缩柱子与柱子之间,在有限的区域显示更多的内容

修改之前:

image.png

第一种方法, 直接修改其高度

将高度缩小为原先的一半后,

image.png

但是有时候找不到设置高度的地方,或者不能修改echart高度, 则可以修改grid

在option子集可以设置属性

 grid: {
      top: "3%",
      left: "3%",
      right: "3%",
      bottom: "3%",
      containLabel: true,
    },

top,left,right, bottom很好理解就是距离上左右下

containLabel的作用是当containLabel配置为true时,标签文字将被自动包含在图形边界之内,以便保证标签文字不会超出图形的范围

原图grid如果不加containLabel,效果如下

image.png

回到原题,若想减小柱子之间距离可以调大bottom值

比如设置bottom: "60%",

效果变成

image.png