Use echarts to redraw the picture according to the screen changes. I have been reporting this error for a long time, but I haven’t found the problem

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)

    //Redrawing when the screen size changes
    window.addEventListener('resize', () => {
      this.myEchart.resize()
    })
  },

Because this component is encapsulated by me and needs to listen to the change of option to redraw the diagram, the init diagram is displayed in the watch

Later, I initialized seals. Init() in both watch and mounted, and this error was solved.

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)

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

However, another warning appears charts.js?1be7:2178 There is a chart instance already initialized on the dom.

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

I registered again when the instance existed

ecarts.init (this.$refs.Ecartsref) runs twice, and all warnings appear

In fact, just redraw the icon and reset setoption. 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)

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