echarts 数据堆叠柱状图情况下设置圆角问题

时间:2024-04-05 15:25:36

前言

众所周知,echarts是前端最受欢迎的一个可视化图标库,几乎满足了前端构建图表的大部分需求,但是使用框架最大的问题可能就是框架的可扩展性,自定义性。不过主流框架也都很好的解决了这些问题,现在就echarts的柱状图数据堆叠怎么给最上面的数据设置圆角进行说明

属性说明

  1. 首先我们来看下正常情况下设置圆角:
    echarts 数据堆叠柱状图情况下设置圆角问题
    这是官方示例,代码如下:
    echarts 数据堆叠柱状图情况下设置圆角问题
    看下效果:
    echarts 数据堆叠柱状图情况下设置圆角问题
  2. 属性stack
    官方说明:
    echarts 数据堆叠柱状图情况下设置圆角问题
    示例代码:
    echarts 数据堆叠柱状图情况下设置圆角问题
    效果:
    echarts 数据堆叠柱状图情况下设置圆角问题

问题与解决

现在像上面的柱状图堆叠情况下需要设置圆角,因为不能保证哪个数据是最后出现在柱状图中的,所以不能固定给 series-baritemStyle 设置圆角,这是我们注意到官方文档有这么一条:
echarts 数据堆叠柱状图情况下设置圆角问题
对的,我们可以对数据进行个性化设置,我们只需要进行判断即可:我们从数组的最后一项,也就是最后一天往前依次去判断,如果当前项数据为0,则给当前项设置个性化参数 itemStyle ,如果不为0,则继续往前,直到第一项为止。

  • 好了我们看下示例代码:
    echarts 数据堆叠柱状图情况下设置圆角问题
    最终获得的数据即为个性化设置后的,我们使用即可:
    echarts 数据堆叠柱状图情况下设置圆角问题

结语

学习与使用echarts必须得学会去看它的配置项文档,有针对性的去查找跟本身问题相关的属性说明,一般都会得到问题的答案,希望这篇文章能够帮到你,有问题欢迎讨论与指正