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

效果展示

需求

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

实现

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",
          },
}]