ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示


1、出现问题原因

一个饼图,右上方两个按钮分别为今天和本月,分别调用不同接口控制,点击则调用不同接口同时饼图绑定数据源刷新;出现此问题原因点击今日按钮有一个饼图区域形没有数据不显示,对应数据值比例都没显示,点击本月按钮时此饼图区域有数据,再次切回今日按钮时刚才没显示的饼图区域显示提示信息且值为0

2、解决办法

echarts每次初始化绘图都会创建实例

img

在初始化前,移除echarts.init 创建的实例echartsInstance

img

具体代码如下:

1
2
3
4
5
document.getElementById('chart的Id').removeAttribute('_echarts_instance_') // 解决饼图无数据信息(占比为0)首次加载不出来,或者切换页面后,需要强刷新才能出来的问题

// 在初始化之前

this._initPieChart(pieData)

如上,问题解决。

3、参考文档

echarts重新加载数据没有绘出图

echarts绘制图表,切换页面后返回,无刷新数据图表不显示问题

4、附录

1、还有的同学饼图数值为0时标签应该显示如下图的但是未显示

img

这可能与饼图的所占区域布局有关遮住了label的显示,可调整series的radius或center属性适当调整即可,关于radius和center属性详解见下图

img

2、还有的同学就是不想让为0的数据显示,可以参考以下文章

解决echarts饼图不显示数据为0的数据

以上就是ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示的介绍,做此记录,如有帮助,欢迎点赞关注收藏!


评论
  目录