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

最新推荐文章于 2024-06-06 11:39:14 发布
最新推荐文章于 2024-06-06 11:39:14 发布
阅读量3w 收藏 5
点赞数 2
分类专栏： java 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoliwei2010/article/details/78452295
版权

最近项目中频繁用到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);




原参考网址------

levy-snail
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
出错原因和解决方案：echarts Error:`setOption` should not be called during main process
yuiyake的博客
07-04 8505
原因与解决：echarts Error:`setOption` should not be called during main process
echarts 在IE浏览器不展示 报错不支持prepend方法 setOption should not be called during main process
Taurus_666
02-11 892
问题 报错问题如下图，图表均不显示 同时还有不支持prepend方法，不支持resize等问题，找了网上各种方法均不凑效，其中包括setOption之前先clear（本身也有使用该方法）,设置延迟 setTimeout等均无果。 目前的项目采用vue脚手架，echarts版本为5.0.0； 解决办法 把echarts版本升级为5.2.2版本以上问题都没了哈哈，具体是从哪个版本开始修复的有待尝试；不知道你们是不是酱紫 仅此记录一下自己的问题 ...
Echarts基础学习 4-折线图实战（工作任务）
最新发布
qkdgz的博客
06-06 723
Echarts学习，折线图，实战
ECharts: Uncaught Error: `setOption` should not be called during main process
热门推荐
第一段代码的博客
11-03 2万+
最近做Echarts数据图形渲染，图形数据量比较大，渲染后，点击查询图形再次渲染，可能数据量大，重新渲染时，出现Uncaught Error: `setOption` should not be called during main process 这个错误，代码肯定是没有问题的，因为第一遍默认加载的时候是正常显示，只是重新渲染的时候出现了问题。 这个报错，是为了限制 setOption 调用时机，意思是如果 setOption 或者 dispatchAction 的流程没有走完，中途再调用一次 set
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 2880
ECharts线性回归导致`setOption` should not be called during main process报错的解决方案
如何解决在ie下，Echarts多次使用setOption更改数据时，数据错乱问题
weixin_34248705的博客
02-28 942
一、问题描述 根据用户的操作，通过Ajax请求，获取某段时间内的某数据趋势折线图数据。用户切换数据项或更改时间段时，ie中渲染的折线图包含了上一次获取的数据，导致数据错乱，如下图所示： 二、代码 数据项1setOption代码： myChart3.setOption({ tooltip: { trigger: 'axis', ...
echarts.setOption()报错
WanRanCongWu的博客
01-27 5669
报错场景： 将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
批处理经典入门教程
03-27
### 批处理经典入门教程知识点解析 #### 一、批处理基本概念 - **定义**：批处理是一种基于DOS命令的脚本语言，通过一系列命令的有序组合实现特定任务的自动化执行。其核心在于利用DOS环境下的命令行工具进行编程。...
echart实例echart实例
02-09
然后，通过`echarts.init()`方法初始化ECharts实例，再调用`setOption()`方法设置图表的配置项，即可展示图表。 2. **配置项详解** - `title`: 标题组件，可以设置标题文本、字体大小、位置等。 - `legend`: 图例...
echart:学习echart.js中的一些心得
04-04
然后，你需要准备一个用于展示图表的DOM元素，并初始化ECharts实例，例如`var myChart = echarts.init(document.getElementById('main'));`。 2. **数据与配置**：ECharts的数据是通过`series`属性传递的，每个系列...
android echart
12-14
6. **更新图表**：通过调用`setOption`方法更新图表，如果需要动态更新数据或配置，可以多次调用此方法。 7. **交互功能**：ECharts支持丰富的交互功能，如点击事件监听、图表缩放等，可以通过`setOnChartListener`...
echart 3D环形图 动画效果
12-18
在这个“echart 3D环形图 动画效果”的主题中，我们将探讨如何使用ECharts来创建具有3D视觉冲击力和动态效果的环形图。 3D环形图是一种特殊的饼图变体，通过三维视角展示数据的比例关系，使数据更具有立体感和层次...
Echarts:使用技巧记录
第一段代码的博客
03-22 770
本文 专门记录Echarts使用过程常用技巧 (Tips:可能对于我是技巧,记录下,下次可以直接使用) 1.图形随窗口大小自适应 图形自适应可以解决浏览器窗口变换大小或电脑分辨率不高导致的变形遮掩等问题,其实方法也挺简单,就是在setOption后,在加一个方法就行,代码如下: myChartAB.setOption(option); myChartAB.resize();//resize就是自动调整size的方法 上面的resize方法管用,但是有些时候会实效,其实不是这个方法实效,而是E.
echarts setoption 不生效
阿臻
03-25 4210
第一次是两个图例(班级,个人), 但是后来我只传一个系列(个人), 结果还是展示两个图例, 需要设置 notMerge 是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件 chart.setOption(option, { notMerge: ..., lazyUpdate: ..., silent: ... }); 以上基本就可以更新了.
【项目总结】玛嘉环境物联网平台（大三学生独立完成的真实企业外包项目）网脉通用物联网平台网脉铁塔监测系统
drnrrwfs的博客
02-23 611
文章目录 前言 一、概述 1.背景 2.三者的关系 二、设计中遇到的问题与思考 背景 1.如何确定需求？ 2.如何接手这个设计堪忧的项目？ 3.如何进行数据建模？ ①物联网情境下如何存储数据？ ②如何根据自身需求在TDengine上进行数据建模？ ③如何抽象出物联网设备的通用模型？ ④如何进行数据库表设计？ 4.如何与设备通讯？ ①设备如何与系统连接 ②如何判断设备状态 ③如何解析完全不一致的设备数据 ④如何做到反向控制 5.如何设计物联网领域的通用解决方案 ①设备服务 ②
mPushAgent.register should be called
chenhuakang的博客
07-06 5616
运行Demo没有问题，集成到自己的项目中就出现问题官方的Demo写的不规范，看官方的解决很难快速定位问题最终发现是因为AndroidManifest.xml 配置未全部修改以下的使用${applicationId}配置即可<provider android:name="com.umeng.message.provider.MessageProvider" android:au...
log.js:61 [ECharts] `setOption` should not be called during main process. 帮我解决这个问题
07-12
这个错误通常发生在使用 ECharts 库时，当你在主进程中调用 `setOption` 方法时会触发该错误。要解决这个问题，你需要将 `setOption` 方法的调用放在适当的位置，确保在正确的上下文中调用。 通常情况下，你应该在渲染完成后，在 Vue 的 `mounted` 生命周期钩子中调用 `setOption` 方法。这样可以确保 ECharts 实例已经被正确初始化并且可以操作。 以下是一个示例： ```javascript <template> <div ref="chartContainer" style="width: 400px; height: 400px;"></div> </template> <script> import echarts from 'echarts' export default { mounted() { this.initChart() }, methods: { initChart() { // 创建 ECharts 实例 const chart = echarts.init(this.$refs.chartContainer) // 设置图表配置项 const option = { // ... } // 使用 setOption 方法设置图表配置项 chart.setOption(option) } } } </script> ``` 在上述示例中，我们在 `mounted` 生命周期钩子中调用了 `initChart` 方法，该方法初始化了 ECharts 实例并设置了图表的配置项。确保你的代码与此示例相似，并将 `setOption` 方法的调用放在正确的位置。 如果你仍然遇到问题，请提供更多相关的代码和错误信息，以便我能够更具体地帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值