echarts 堆叠柱状图 顶部圆角效果

图表样式需求：

除了最顶端的堆叠块有圆角效果，其余堆叠块保持平角

---

实现思路：

遍历每根柱条的数据，找到第一块值不为0的元素，为它设置itemStyle：{borderRadius：[4,4,0,0]}属性，其中borderRadius的值代表（左上，右上，右下，左下）区域的圆角大小，可根据项目需求修改

写法一：直接给series设置该属性，会应用到该系列的每一个数据块身上，即堆叠的每一层数据都有圆角效果

series: {
            name: '分数',
            type: 'bar',
            data: [],
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0]
            }
},

 

写法二： 将itemStyle属性添加到指定data数据中的指定数值里，这样就可以根据需求添加圆角效果啦~ 如下代码就能够实现指定值为20的元素拥有圆角效果.

data: [ 
       { 
          value: 20, 
          itemStyle: {
            barBorderRadius: [4, 4, 0, 0],
          }
       },{
          value: 10,
          itemStyle: {
            barBorderRadius: [0, 0, 0, 0],
          }
       },
       {
          value: 20,
          itemStyle: {
            barBorderRadius: [4, 4, 0, 0],
           }
       }
]

---

实现顶部圆角效果：

先遍历单个series的data，得到柱条总数；内层循环整个series，从上至下遍历单个series的data数据，不为0则为它设置itemStyle：{borderRadius：[4,4,0,0]}属性，并结束本柱条所有系列的遍历。

// series一次性获取填入数据
series.push({
   name: legs[i],
   type: 'bar',
   stack: 'x',
   data: tempNum
});



// 设置柱条顶层圆角
for (let i in series[0].data) { // 遍历所有的x轴数据(总数为n),为单根柱条提供data下标（0 ~ n-1）
    for (let item of series) {  //遍历单根柱条
        // console.log(item.name)
        // console.log(item.data[i].value)
        if (item.data[i].value != 0) { // 找到第一个不为0的值，为该项添加itemStyle
            item.data[i]['itemStyle'] = { barBorderRadius: [4, 4, 0, 0] };
            break;  //退出该柱条的循环
        }
    }
    // console.log('------')
}