解决vue3项目中引用echarts出的现“There is a chart instance already initialized on the dom.”警告的问题

在Vue3中使用echarts时，如果出现"There is a chart instance already initialized on the dom."的警告，有几种解决方法可以尝试。

方法1：在初始化echarts之前，先判断该echarts实例是否存在，若存在则先销毁。可以使用ref创建一个虚拟DOM引用，并在初始化时使用该引用。示例代码如下：

import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

setup() {
  const main = ref()

  onMounted(() => {
    init()
  })

  let myChart

  const init = () => {
    // 初始化之前先判断该实例是否存在，若存在则先销毁
    if (myChart != null && myChart != "" && myChart != undefined) {
      myChart.dispose(); // 销毁
    }

    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(main.value)

    var option = { ... }
    option && myChart.setOption(option)
  }

  return {
    init,
    main
  }
}

方法2：使用$echarts.getInstanceByDom()方法来检测是否已经存在echarts实例，如果不存在，则进行初始化。示例代码如下：

let myChart = this.$echarts.getInstanceByDom(this.$refs[this.chartObj.type])
if (myChart == null) {
  myChart = this.$echarts.init(this.$refs[this.chartObj.type])
}
myChart.setOption(this.option)

根据需求选择其中一种解决方法即可解决该警告问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3中使用echarts 出现 There is a chart instance already initialized on the dom.](https://blog.csdn.net/qq_36687211/article/details/128725708)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [解决vue项目中引用echarts出的现“There is a chart instance already initialized on the dom.”警告的...](https://blog.csdn.net/zch981964/article/details/126963096)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [在VUE中Echarts出现There is a chart instance already initialized on the dom.](https://blog.csdn.net/weixin_65984842/article/details/129319599)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]