Error: `resize` should not be called during main process.

I used echarts to redraw the diagram according to the screen changes, and kept reporting this error, but I did not find out where the problem was after looking for a long time.

watch: {
    option: {
      handler() {
        this.myEchart = echarts.init(this.$refs.echartsRef)
        this.myEchart.setOption(this.option)
        // this.mountedEchart()
      },
      immediate: false
    }
  },
  mounted() {
    // this.mountedEchart()
    // this.myEchart = echarts.init(this.$refs.echartsRef)
    // this.myEchart.setOption(this.option)

    //When the screen size changes, redraw the picture
    window.addEventListener('resize', () => {
      this.myEchart.resize()
    })
  },

Because this is my packaged component to monitor the change of option to redraw the graph, so init the graph in the watch

Later, I initialized echarts.init() in both watch and mounted, and this error was resolved.

watch: {
    option: {
      handler() {
        // this.myEchart = echarts.init(this.$refs.echartsRef)
        // this.myEchart.setOption(this.option)
        this.mountedEchart()
      },
      immediate: false
    }
  },
  mounted() {
    this.mountedEchart()
    // this.myEchart = echarts.init(this.$refs.echartsRef)
    // this.myEchart.setOption(this.option)

    // When the screen size changes, redraw the picture
    window.addEventListener('resize', () => {
      this.myEchart.resize()
    })
  },
  methods: {
    mountedEchart() {
      this.myEchart = echarts.init(this.$refs.echartsRef)
      this.myEchart.setOption(this.option)
    }
  },

But there is another warning echarts.js?1be7:2178 There is a chart instance already initialized on the dom.

After unremitting efforts, I finally found the problem. I still don’t understand the grammar well, and I didn’t pay attention to the warning itself. In fact, the problem is the same as the warning. The echarts instance already exists.

I re-registered when the instance exists

echarts.init(this.$refs.echartsRef) ran twice, all warnings appeared

In fact, as long as you redraw the icon, you only need to re setOption, and there is no need to register again

watch: {
    option: {
      handler() {
        this.mountedEchart()
      }
    }
  },
  mounted() {
    this.myEchart = echarts.init(this.$refs.echartsRef)
    this.mountedEchart()
    // this.myEchart.setOption(this.option)

    //When the screen size changes, redraw the picture
    window.addEventListener('resize', () => {
      this.myEchart.resize()
    })
  },
  methods: {
    mountedEchart() {
      // this.myEchart = echarts.init(this.$refs.echartsRef)
      //Just setOption for redrawing is fine, no need to init again, a warning will appear when init again but another warning will appear
      //`echarts.js?1be7:2178 There is a chart instance already initialized on the dom.`
      this.myEchart.setOption(this.option)
    }
  },