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

[Eddy-CY]

One-line summary [问题简述]

用socket.io接收数据并更新option，setoption刷新，有时候会出现错误：echarts.js:3066 Uncaught Error: setOption should not be called during main process。

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: "version": "3.2.3",
• Browser version [浏览器类型和版本]:Google chrome 版本 54.0.2840.71 m (64-bit)
• OS Version [操作系统类型和版本]:windows 7 61bit

Expected behaviour [期望结果]

了解原因及解决办法。

ECharts option [ECharts配置项]

option = {
               title: {
                    text: '位移'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data:[]/* data.map(function (item) {
                        return item[0];
                    })*/
                },
                yAxis: {
                    splitLine: {
                        show: false
                    },
                    // max:100
                },
                toolbox: {
                    left: 'center',
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                // dataZoom: [{
                //     startValue: '2014-06-01'
                // }, {
                //     type: 'inside'
                // }],
                visualMap: [{
                    top: 10,
                    right: 10,
                    pieces: [{
                        // gt: 0,
                        lte: 60,
                        color: '#096'
                    }, {
                        gt: 60,
                        lte: 70,
                        color: '#ffde33'
                    }, {
                        gt: 70,
                        lte: 80,
                        color: '#E9967A'
                    },{
                        gt: 80,
                        color: '#EE0000'
                    }],
                    outOfRange: {
                        color: '#999'
                    }
                }
                ],
                series: {
                    name: 'displacement',
                    type: 'bar',
                    data:[],/* data.map(function (item) {
                        return item[1];
                    }),*/
                    markLine: {
                        silent: false,
                        data: [{
                            yAxis: 60
                        }, {
                            yAxis: 70
                        }, {
                            yAxis: 80
                        }]
                    }
                }
}

Other comments [其他信息]

[100pah]

这个报错，是为了限制 setOption 调用时机，意思是如果 setOption 或者 dispatchAction 的流程没有走完，中途再调用一次 setOption 会受限。

那么，你是在什么场景/什么时机下调用的 setOption 呢？

[Eddy-CY]

就是socket.io接收到数据，更新option的数据以后就调setOption。 @100pah

[100pah]

在 setOption 之前控制台中有没有报过错？

[Eddy-CY]

没有，初始化的时候没有报错，刷新也没报错，只是有时候会出现，现在好像有没有看到了，很奇怪！会不会一张页面存在多个echarts对象的时候相互影响呀！现在又没有看到报错了！ @100pah

[pissang]

好像源代码版本在 resize 后会出现这个问题，如果是的话最新代码已经修复了

[Yaxian]

try

setTimeout(() => {
  echatsInstance.setOption([option])
}, 500)

not

  echatsInstance.setOption([option])

[AntiMoron]

@100pah 我也遇到了这个问题，有没有对应的回调通知setOption流程走完呢？

[stardustman]

官方的api有 echartsInstance.clear 清空当前实例，会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。 我碰到的是用ajax请求的到json数据后去更新series中的数据,但是我把实例和Option都声明成全局变量,就会报这样的错.都放在ajax函数里就不报错了.也是奇怪.

[stardustman]

[shyangs]

我也遇到這個報錯

不知道跟我用了 window.setTimeout(function(){ }); 有沒關係.

....

看了上面的討論, 暫時這樣繞過.(不知道是不是好方法)

echartsInstance.clear();
echartsInstance.setOption(option);

....

3806 , #6281 也是這樣的報錯訊息.

[sinpor]

@100pah 关于你说的限制setOption调用时机，之前我用setOption设置一个graphic，然后在graphic元素的拖拽事件处理方法中又用setOption设置另一个graphic元素是可行的，但现在改为设置series就会报这个错，求回复(o゜▽゜)o☆

[NetFreeOps]

都2021年，这个问题还存在，有没有大神解决一下的

[ginkosen]

都2021年07月了，这个问题还存在，有没有大神解决一下的

[1765659645]

都2021年07月了，这个问题还存在，有没有大神解决一下的。 目前还是通过设置setTimeout解决

[wanglang]

都2021年08月了，这个问题还存在，有没有大神解决一下的

[1765659645]

都2021年08月了，这个问题还存在，有没有大神解决一下的

你可以试试渲染模式用canvas 看看还存不存在，我之前是svg模式，感觉性能卡，换canvas就不用设置setTimeout了

[tianzhen123]

可以在try catch中捕获错误，然后使用 echarts. dispose销毁实例，之后再调用init，setOption 就没什么问题了

[yuanyuanlife]

我升级 ECharts 5 以后，我也遇到了

[sunnynudt]

升级到ECharts 5.2后，我也遇到这个问题了。到现在官方还没修复这个bug吗？

[Kinghts]

跟vue一起用时出现了这个问题，解决了，就是不要让echart实例变成vue的响应式对象：

data() {
  return {
    id: 'chart-xxxxx',
    instance: null,
  };
},
mounted() {
  this.instance = Object.freeze({ chart: echart.init(document.getElementById(this.id)) });
},

tips: 超大对象放入vue 的data前最好freeze下，不然可能出现把整个页面卡住的性能问题，当然，你得明白自己在干啥，enjoy

[RothCheng]

遇到 error 的场景：在 ondrag 回调中处理 chart.setOption 解决方法：使用 “防抖” 的方式处理

[vipsunwei]

跟vue一起用时出现了这个问题，解决了，就是不要让echart实例变成vue的响应式对象：

data() {
  return {
    id: 'chart-xxxxx',
    instance: null,
  };
},
mounted() {
  this.instance = Object.freeze({ chart: echart.init(document.getElementById(this.id)) });
},

tips: 超大对象放入vue 的data前最好freeze下，不然可能出现把整个页面卡住的性能问题，当然，你得明白自己在干啥，enjoy

看了你的说法，改了代码，发现报错不见了。nice！！！

[JyenZhou]

2021.12.16 定时器中调用实时更新还是有这个错 这么辣鸡的么 看到楼上各位回复的的解决方法 没有一个是优雅的 差评 用xxxCharts（怕你们说我打广告）去了

[pissang]

vue 会对所有 data 下挂的对象下的所有属性做深度的 proxy，所以不建议把 echarts 或者其它库的实例挂在 data 下，第一是产生不必要的性能损耗，第二是可能会产生未知的 bug

[wangrongding]

vue 会对所有 data 下挂的对象下的所有属性做深度的 proxy，所以不建议把 echarts 或者其它库的实例挂在 data 下，第一是产生不必要的性能损耗，第二是可能会产生未知的 bug

正解 ~

[shirelytom]

跟vue一起用时出现了这个问题，解决了，就是不要让echart实例变成vue的响应式对象：

data() {
  return {
    id: 'chart-xxxxx',
    instance: null,
  };
},
mounted() {
  this.instance = Object.freeze({ chart: echart.init(document.getElementById(this.id)) });
},

tips: 超大对象放入vue 的data前最好freeze下，不然可能出现把整个页面卡住的性能问题，当然，你得明白自己在干啥，enjoy

看了你的说法，改了代码，发现报错不见了。nice！！！

感谢大佬，终于解决了这个问题

[nwind]

同样遇到，似乎是因为调用太频繁，用 _.debounce 解决了

[vtejuf]

也可能是options异常导致前一个渲染暂停了，这时等待或clear都没用