文章目录

效果展示

需求

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

实现

<mark>borderWidth</mark>

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

<mark>barMaxWidth</mark>

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