[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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)