Echarts柱状图宽度/边框设置问题

文章目录效果展示需求实现效果展示需求柱条加边框设置柱条最大最小宽度实现borderWidthborderWidth：设置边框宽度borderColor：设置边框颜色在itemStyle中设置barMaxWidthbarWidth：设置柱条宽度，可以设置number(20表示20px)，也可以设置百分比，表示占这个类目的宽度比例barMaxWidth：最大柱条宽度barMinWidth：最小柱条宽度

蒲公英想养花

20360人浏览 · 2021-09-06 11:45:23

蒲公英想养花 · 2021-09-06 11:45:23 发布

文章目录

效果展示
需求
实现

效果展示

在这里插入图片描述

需求

柱条加边框
设置柱条最大最小宽度

实现

borderWidth

borderWidth：设置边框宽度
borderColor：设置边框颜色
在itemStyle中设置

barMaxWidth

barWidth：设置柱条宽度，可以设置number(20表示20px)，也可以设置百分比，表示占这个类目的宽度比例
barMaxWidth：最大柱条宽度
barMinWidth：最小柱条宽度

注意！！！当有多个柱条时，即series有多个对象，barWidth仅需在最后一个柱条里面设置，而barMaxWidth和barMinWidth却需要在每一个里面都分别设置才会生效。

series: [{
          name: '1',
          data: [100, 150, 230, 224, 218],
          type: 'bar',
          barMaxWidth: 20, // 每一个都要设置
          barMinWidth: 5, // 每一个都要设置
          itemStyle: {
              color: 'rgba(100, 219, 155, 0.12)',
              borderWidth: 1,
              borderColor: "#64DB9B",
          },
}, {
          name: '2',
          data: [100, 150, 230, 224, 218],
          type: 'bar',
          barWidth: '15%', // 仅在最后一个里面设置
          barMaxWidth: 20, // 每一个都要设置
          barMinWidth: 5, // 每一个都要设置
          itemStyle: {
              color: '#64DB9B',
              borderWidth: 1,
              borderColor: "#64DB9B",
          },
}]