前言
众所周知,echarts是前端最受欢迎的一个可视化图标库,几乎满足了前端构建图表的大部分需求,但是使用框架最大的问题可能就是框架的可扩展性,自定义性。不过主流框架也都很好的解决了这些问题,现在就echarts的柱状图数据堆叠怎么给最上面的数据设置圆角进行说明
属性说明
-
首先我们来看下正常情况下设置圆角:
这是官方示例,代码如下:
看下效果:
-
属性stack
官方说明:
示例代码:
效果:
问题与解决
现在像上面的柱状图堆叠情况下需要设置圆角,因为不能保证哪个数据是最后出现在柱状图中的,所以不能固定给 series-bar
的 itemStyle
设置圆角,这是我们注意到官方文档有这么一条:
对的,我们可以对数据进行个性化设置,我们只需要进行判断即可:我们从数组的最后一项,也就是最后一天往前依次去判断,如果当前项数据为0,则给当前项设置个性化参数 itemStyle
,如果不为0,则继续往前,直到第一项为止。
- 好了我们看下示例代码:
最终获得的数据即为个性化设置后的,我们使用即可:
结语
学习与使用echarts必须得学会去看它的配置项文档,有针对性的去查找跟本身问题相关的属性说明,一般都会得到问题的答案,希望这篇文章能够帮到你,有问题欢迎讨论与指正