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

在Vue 3中，使用echarts时可能会遇到"There is a chart instance already initialized on the dom."这个警告。要解决这个问题，可以按照以下方法进行操作：

1. 在初始化之前，先判断echarts实例是否存在，若存在，则先销毁该实例。可以使用ref来创建虚拟DOM引用，并在使用时使用`refName.value`来引用。具体代码如下：

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实例是否存在，若不存在，则进行初始化。具体代码如下：

import { ref } from 'vue';
import * as echarts from 'echarts';

const barEchartRef = ref();
let barEchart = null;

function barEchartInit() {
  let barOptions = {};
  let hasEchart = echarts.getInstanceByDom(barEchartRef.value);
  
  if (!hasEchart) {
    barEchart = echarts.init(barEchartRef.value);
  }

  barEchart.setOption(barOptions, true);
}

总结起来，主要解决方法有两种：
1. 利用ref来创建虚拟DOM引用，在初始化之前先判断echarts实例是否存在，若存在则先销毁，然后再进行初始化。
2. 使用`echarts.getInstanceByDom`方法判断echarts实例是否存在，若不存在则进行初始化。

希望以上解决方法能够帮助到您解决"There is a chart instance already initialized on the dom."这个警告的问题。<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使用echart图表过程所遇问题整理](https://blog.csdn.net/qq_43628158/article/details/127964441)[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* [Vue3 组件内使用echarts时出现重复挂载的问题](https://blog.csdn.net/zb527129/article/details/125944895)[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 ]