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

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 [其他信息]

default

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 28 (4 by maintainers)

Most upvoted comments

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

pissang on Dec 16, 2021

我也遇到這個報錯

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

…

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

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

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

shyangs on Nov 14, 2017

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

JyenZhou on Dec 16, 2021

跟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

Kinghts on Oct 21, 2021

跟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！！！

vipsunwei on Nov 18, 2021

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

sinpor on Dec 16, 2018