Echart报错 Error setOption should not be called during main process

最新推荐文章于 2025-07-11 10:20:42 发布

原创最新推荐文章于 2025-07-11 10:20:42 发布 · 3.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

java 专栏收录该内容

8 篇文章

订阅专栏

本文分享了一位后台开发人员在使用Echart时遇到的问题及其解决方案。主要讲述了在调用SetOption()方法时出现错误，并提供了通过设置延时来解决这一问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中频繁用到echart，作为一个后台开发人员，经过一段时间各种问题的虐心，如今也能心平气和的在谷歌中调试页面。

其中遇到Echart在最后SetOption()方法的时候，报错如下：

 echarts.js:3066 Uncaught Error: `setOption` should not be called during main process

最终查了stackOver，咨询了强大的Q群之后，才明白echart有时候渲染数据的时候，因为数据的先后顺序导致出现的这种问题，加一个小小的延时即可以解决，解决办法如下：

代码中如下：

setTimeout(trvlInAnalysis.trvlInMigrateShow.setOption(migrateOption), 500);

原参考网址------

 https://github.com/ecomfe/echarts/issues/5093

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

levy-snail

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Echart】echart 入门

德仔

04-22

2433

echart 入门什么是EchartEcharts支持的图表？echarts和chart对比echarts的优点：echarts的缺点：chart.js优点：一. 基本概念二. echart的基本概念什么是Echart Echarts–商业级数据图表商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对

出错原因和解决方案：echarts Error:`setOption` should not be called during main process

yuiyake的博客

07-04

1万+

原因与解决：echarts Error:`setOption` should not be called during main process

参与评论您还未登录，请先登录后发表或查看评论

ECharts: Uncaught Error: `setOption` should not be called during main process

最新发布

weixin_30356433的博客

07-11

329

ECharts，发音为 /ˈiːtʃɑːrts/，是百度团队开发的一个开源的纯 Javascript 图表库，能够在多种设备上实现高质量的交互式数据可视化。它提供了丰富的图表类型和精美的视觉效果，同时拥有灵活的配置项和易用的API，使得用户可以轻松地利用ECharts创建各种美观的数据图表。ECharts支持多种基础图表类型，如折线图、柱状图、饼图等，也支持诸如地图、热力图、散点图等复杂图表。它提供了大量配置项和事件系统来响应用户操作，支持数据的动态更新和交互式浏览。

echarts报错`setOption` should not be called during main process

weixin_43815091的博客

03-03

1万+

echarts报错setOption should not be called during main process 问题描述父组件传值给wordcloud组件渲染echarts，报错：setOption should not be called during main process. 从网上看了好多，有人说是重复渲染，要在setOption前clear一下，但是我用了这个方法无效 wordChart.clear(); wordChart.setOption(); 原因是在渲染的时候，父组件的数据还

ECharts关于 `setOption` should not be called during main process报错的解决方案

ccxbt的博客

01-09

3542

ECharts线性回归导致`setOption` should not be called during main process报错的解决方案

echarts 在IE浏览器不展示报错不支持prepend方法 setOption should not be called during main process

Taurus_666

02-11

1015

问题报错问题如下图，图表均不显示同时还有不支持prepend方法，不支持resize等问题，找了网上各种方法均不凑效，其中包括setOption之前先clear（本身也有使用该方法）,设置延迟 setTimeout等均无果。目前的项目采用vue脚手架，echarts版本为5.0.0；解决办法把echarts版本升级为5.2.2版本以上问题都没了哈哈，具体是从哪个版本开始修复的有待尝试；不知道你们是不是酱紫仅此记录一下自己的问题 ...

ECharts 使用时控制台报错 `resize` should not be called during main process

sigmarising的博客

01-31

4974

ECharts 使用时控制台报错 `resize` should not be called during main process 的一种解决办法

v-chart报错series.type should be specified的解决方法

macx_1371873xxxx的博客

08-15

670

所有功能都实现了，却发现F12的时候控制台报错series.type should be specified，很烦！查询了网上的一篇博客，据此为思路，进行排错处理；思路是这样的一个思路，大家按这个思路去解决，具体配置哪项，见招拆招，活学活用。1、添加 :after-set-option="afterSetOption"配置。2、method方法添加对应方法。

echart:学习echart.js中的一些心得

04-04

然后，你需要准备一个用于展示图表的DOM元素，并初始化ECharts实例，例如`var myChart = echarts.init(document.getElementById('main'));`。 2. **数据与配置**：ECharts的数据是通过`series`属性传递的，每个系列...

微信小程序种myChart.setOption报错空值null问题解决

weixin_43265020的博客

05-13

3619

微信小程序种myChart.setOption报错空值null问题解决 1.在initChart中使用SetOption初始渲染option 初始渲染时加载option中的初始数据这里一般不会出现报错问题，毕竟初始渲染之于option中的series有关 2.进行数据（地图）重绘微信小程序它不支持同步操作！而那些微信官方提供的Demo都是写死的数据。实际上呢？都是从网上加载数据过来的，所以这个时候需要一个同步操作，也就是需要从网上加载完数据之后再次渲染（重绘）Echarts图表。Echarts默认是

Vue引入echarts报错Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“

weixin_36106791的博客

07-15

2978

问题出现场景今天在vue中引入echarts时，运行报错 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null】 ## 问题排查在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： var myChart = echarts.init(this.$refs.map)

This method should not be called on the main thread as it may lead to UI unresponsiveness.

huwan.cn的博客

10-09

1万+

This method should not be called on the main thread as it may lead to UI unresponsiveness.

echarts.setOption()报错

WanRanCongWu的博客

01-27

6041

报错场景：将echarts.setOption({ backgroundColor: "#02AFDB", tooltip: {}, ...等内容 }) 提取封装到js文件中会报一下错： 1.vue.esm.js?efeb:628 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'get' of undefined" 2.Uncaught Error: `resize` should not be ca

Echarts:使用技巧记录

第一段代码的博客

03-22

913

本文专门记录Echarts使用过程常用技巧 (Tips:可能对于我是技巧,记录下,下次可以直接使用) 1.图形随窗口大小自适应图形自适应可以解决浏览器窗口变换大小或电脑分辨率不高导致的变形遮掩等问题,其实方法也挺简单,就是在setOption后,在加一个方法就行,代码如下: myChartAB.setOption(option); myChartAB.resize();//resize就是自动调整size的方法上面的resize方法管用,但是有些时候会实效,其实不是这个方法实效,而是E.

「今日莫名其妙bug」echarts 添加endLabel属性报错

songth1ef的博客

05-14

544

调用this.myChart.setOption(this.option)方法。然后我再npm install echarts@5.1.2。那我settimeout 1000ms 结果还是找不到。那我看我的echarts 版本是 5.1.2 啊。echarts添加endLabel属性之后。npm 看了最新版本是5.5.0。找不到setOption。再跑项目发现bug没了。报错没了，图也正常显示了。

echarts setoption 不生效

阿臻

03-25

4725

第一次是两个图例(班级,个人), 但是后来我只传一个系列(个人), 结果还是展示两个图例, 需要设置 notMerge 是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则，详见组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件 chart.setOption(option, { notMerge: ..., lazyUpdate: ..., silent: ... }); 以上基本就可以更新了.

useECharts.ts:76 [ECharts] `setOption` should not be called during main process.

11-27

这个错误信息来自于 ECharts，是一个用于数据可视化的大屏图表库。当你在浏览器环境下运行时，`useECharts.ts:76` 表示在主线程（main process）中调用了 `setOption` 方法，这通常是不允许的，因为 ECharts 的 `setOption` 功能主要设计为在初始化图表后用来更新图表的数据或配置。在 Node.js 或者在非浏览器环境（如 Electron 应用程序）中，`setOption` 可能被禁止，因为 ECharts 需要 DOM 渲染环境来显示图表，而在这些场合，DOM 已经加载完成，所以不应该再动态地修改图表选项。解决这个问题通常有两种方式： 1. **确保在渲染环境中调用**：如果你确实需要在非浏览器环境中使用 ECharts，你应该先在页面上创建图表实例，然后将数据传递给该实例，而不是直接设置选项。 ```typescript import echarts from 'echarts'; const chart = echarts.init(document.getElementById('chartId')); let option; if (isInBrowser) { // 在浏览器中创建并设置option option = {/* ... */}; chart.setOption(option); } else { // 在其他环境中，比如Node，直接传入option option = {/* ... */}; } ``` 2. **一次性设置完整选项**：如果你的应用在启动时已经确定了所有图表的配置，可以在初始化时一次性设置好选项。 ```typescript const option = {/* ... */}; // 初始化完整的图表选项 if (isInBrowser) { chart.setOption(option); } ``` 记住，在 ECharts 的官方文档中查找特定版本的指南，了解何时以及如何正确地使用 `setOption`。