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;

希望能看的明白!

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
echarts,可以通过设置柱子的itemStyle属性来实现堆叠柱状图柱子的圆角效果。有几种不同的写法可以实现这个效果。 第一种写法是在每个系列的数据项设置itemStyle属性,根据条件判断是否给柱子添加圆角效果。具体的代码如下所示: ``` series.push({ name: legs[i], type: 'bar', stack: 'x', data: tempNum, itemStyle: { barBorderRadius: [4, 4, 0, 0] } }); ``` 以上代码会给每个系列的每个数据块都添加圆角效果。 第二种写法是直接给整个系列设置itemStyle属性,这样会应用到该系列的每一个数据块身上。具体的代码如下所示: ``` series: { name: '分数', type: 'bar', data: [], itemStyle: { barBorderRadius: [4, 4, 0, 0] } } ``` 另外,如果要实现上面的数据为0时,相邻下面的柱子处理为圆角的效果,可以使用下面的解决方法: ``` { name: 'Bing', type: 'bar', stack: 'Search Engine', emphasis: { focus: 'series' }, data: [ { value: 50, label: {}, itemStyle: { // 判断红色的第一个数据是否为0,如果不为0,则设置为barBorderRadius: [0, 0, 0, 0;如果为0,则设置为barBorderRadius: [12, 12, 0, 0] barBorderRadius: [12, 12, 0, 0] } }, { value: 50, label: {}, itemStyle: { barBorderRadius: [0, 0, 0, 0] } } ] } ``` 以上就是关于echarts堆叠柱状图柱子的圆角效果的几种写法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [echarts 堆叠柱状图 顶部圆角效果](https://blog.csdn.net/m0_48571414/article/details/126305173)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [echarts 堆叠柱状图 顶端圆角](https://blog.csdn.net/kangmingyaner/article/details/122086892)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值