Echarts堆叠柱状图圆角设置

背景

工作中有需要使用Echarts堆叠柱状图，并给单根柱条头部及底部的颜色设置圆角，常规的设置会生效于同一类颜色，无法达到效果，故设计一个简单的算法，给需要的颜色添加圆角。以下内容已横向柱状图为例。

分析

• 给柱子设置圆角的方法，是给series设置itemStyle-barborderRadius，但是series指的是同一类颜色，会导致不同坐标的柱子无法根据自己具体的内容给不同的顶部(或底部)颜色设置圆角。
• 考虑采用两次循环的方法，对不同坐标的数据及所含子项的颜色进行遍历，给每一个坐标下的每一个颜色单独判断赋值。

代码

// 遍历所有轴数据(此处需保证series中每项都有完整的子项，即使值为0)
for(let i in series[0].data) {
  // 遍历单根柱子
  for(let item of series) {
    if(item.data[i].value !== 0]) {
      // 找到第一个不为零的值，为该项添加样式
      item.data[i].itemStyle = {barborderRadius: [5, 0, 0, 5]};
      break;
    }
  }
  // 反向遍历，为另一头添加圆角
  for(let j = series.length - 1; j >= 0; j--) {
    if(series[j].data[i].value !== 0]) {
      // 当该项已经有一半为圆角，则设置为全圆角(即该坐标下仅一种颜色)
      series[j].data[i].itemStyle = series[j].data[i].itemStyle ? {barborderRadius: [5, 5, 5, 5]} : {barborderRadius: [5, 0, 0, 5]};
      break;
    }
  }
}

参考资料

【CSDN】

原文地址

【个人博客】