[ECharts] `setOption` should not be called during main process.(echarts报错,跟数据延迟获取无关)

问题描述:当接口返回数据data为空时,echarts图表渲染报错:[ECharts] `setOption` should not be called during main process. (且图表一片空白,坐标轴也不显示)

如下图:(筛选条件为“天”的时候,接口数据返回 空数组,“月”的时候接口有数据返回

 

问题分析:本人是在做 “散点图-多项式回归(使用统计插件)” 的实例时遇到的这个问题。(参考了echarts官网示例,如下图)

当data有数据时,echarts图表正常渲染;

当data无数据时,如上述报错;

当data无数据时,如上述报错,切换查询条件,data有数据时,也如上述报错;

当data无数据时,去掉回归曲线后不报错,也有坐标轴;

所以, 从这几种情况可以得出:echarts报错是由于回归曲线初始化时无数据造成的!!!

 

注释:其实,期间本人尝试了百度搜索的其他文章中描述的两种解决方案,如下:

  • 第一种方案:用 echartsInstanc.clear() 清空画布。
  • 第一种方案:在 echartsInstanc.setOptiion(opt) 外面套一个setTimeout 延时初始化。

 怎么说呢,有时可能这两种方案确实能解决一些获取异步数据之后的图表渲染问题,但有时也不能解决吧,关键是看什么原因造成的问题!

像本人上述遇到的问题,究其原因就是回归曲线一开始数据为空造成的。

 

解决方案:既然一开始数据为空,会导致含“多项式回归曲线”的图表渲染有问题,那么就不要让其数据为空咯!(让它有数据且渲染不出来,而且不报错的方案),如下处理:

这样子,造一条属性值都为 null 的数据 即可满足需求:当数据 data 为空时,只显示坐标轴,切换查询条件后,data有数据时,就能正常展示散点+多项式回归曲线了。

如下图:

(筛选条件为“天”的时候,接口数据返回 空数组,“月”的时候接口有数据返回)

 

当然,有好奇心的同学可以去研究一下回归曲线的源代码,看看是否有更好的方案解决这个问题,本人就不多做研究了  ^-^

 

回归曲线可参考网址:https://github.com/ecomfe/echarts-stat/blob/master/README.zh-CN.md

 

 

 

posted @ 2022-08-03 22:07  一只两支三指  阅读(8303)  评论(0编辑  收藏  举报