echarts 堆叠柱状图 顶端圆角

echarts 堆叠柱状图被很多项目广泛的使用。需求是 堆叠柱状图 顶端圆角,下面是实现过程。

 安装或引入echarts,正常的使用方法可以看官方文档,直接上代码:

option = {
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Google',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [120, 8, 101, 134, 290, 230, 220],
    },
    {
      name: 'Bing',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [60, 72, 71, 74, 190, 130, 110]
    },
    {
      name: 'Others',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [62, 82, 91, 84, 109, 110, 120],
      itemStyle: {
        barBorderRadius: [12, 12, 0, 0],
      }
    }
  ]
};

代码效果:黄色other   绿色Bing  蓝色Google

 目前顶端都是圆角的,但是如果黄色other数据为0的话,就会出现问题 ,可以代码中修改other数据为data: [62, 82, 91, 0, 109, 0, 120],就是出现下图问题:

 那么需要处理的是 不管是谁,只要谁在上面,就变为圆角的。(也就是 上面的数据为0,那相邻的下面的处理为圆角)
解决方法  (只是按照现在的一种方式实现,还有其他方法可以解决)

{
      name: 'Bing',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [ { //遍历数据 看红色的第一个数据 如果不为0,则barBorderRadius: [0, 0, 0, 0];为0则barBorderRadius: [12, 12, 0, 0],
          value: 50, 
          label: {},
          itemStyle: {
            barBorderRadius: [12, 12, 0, 0],
          }
        },{
          value: 50,
          label: {},
          itemStyle: {
            barBorderRadius: [0, 0, 0, 0],
          }
        }]
    },

效果
data的数据可以设置成 参数 比如

//otherData 是逻辑处理出来的结果,逻辑代码这里就不说了,大概就是 根据堆叠颜色一次判断是否为0,再给出对应的barBorderRadius
othrtData =  [{
          value: 50,
          label: {},
          itemStyle: {
            barBorderRadius: [12, 12, 0, 0],
          }
        },{
          value: 50,
          label: {},
          itemStyle: {
            barBorderRadius: [0, 0, 0, 0],
          }
        }];
data = othrtData;

希望能看的明白!