Vue3 销毁了echarts还是出现There is a chart instance already initialized on the dom.

在Vue3中销毁了echarts实例后，如果没有判断该实例是否存在，重新初始化时可能会出现"There is a chart instance already initialized on the dom."的错误。因此，在销毁echarts实例之前，需要先判断该实例是否存在，若存在，则进行销毁操作。以下是一个示例代码：

import * as echarts from 'echarts'

export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 判断echarts实例是否存在，若存在，则进行销毁操作
      if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
        this.myChart.dispose()
      }
      // 初始化echarts实例
      this.myChart = echarts.init(this.$refs.chart)
      // 设置echarts实例的配置项和数据
      this.myChart.setOption({...})
    }
  }
}

相关问题

Vue3 切换tabs页 销毁了echarts 还是出现There is a chart instance already initialized on the dom.

问题原因：在Vue3切换tabs页时，由于没有及时销毁echarts实例，导致出现"There is a chart instance already initialized on the dom"的错误提示。

解决思路：可以在Vue3的生命周期函数中使用echarts.dispose()方法销毁echarts实例，以避免出现重复初始化的问题。具体实现方法如下：

1.在Vue3组件的data中定义一个echarts实例变量，例如：

data() {
  return {
    chartInstance: null
  }
}

2.在Vue3组件的mounted生命周期函数中初始化echarts实例，并将其赋值给之前定义的echarts实例变量，例如：

mounted() {
  const chartDom = document.getElementById('chart')
  this.chartInstance = echarts.init(chartDom)
  // 其他初始化配置
}

3.在Vue3组件的beforeUnmount生命周期函数中使用echarts.dispose()方法销毁echarts实例，例如：

beforeUnmount() {
  this.chartInstance.dispose()
}

这样，在切换tabs页时，echarts实例会被及时销毁，避免出现重复初始化的问题。

vue中使用eCharts时[ECharts] There is a chart instance already initialized on the dom.

当在Vue中使用ECharts＊＊＊元素上多次渲染图表，就会出现警告[ECharts] There is a chart instance already initialized on the dom. 这是因为ECharts实例只能在一个DOM元素上初始化一次。为了解决这个问题，可以在切换图表时先销毁之前的ECharts实例，然后再重新渲染新的图表。

以下是解决方法：

1.在Vue组件中引入ECharts，并在mounted钩子函数中初始化ECharts实例：

import echarts from 'echarts'

export default {
  data() {
    return {
      liquidChart: null, // ECharts实例
      chartData: {...} // 图表数据
    }
  },
  mounted() {
    this.initChart()
 },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart
      this.liquidChart = echarts.init(chartDom)
      this.liquidChart.setOption({...})
    }
  }
}

2.在切换图表时，先销毁之前的ECharts实例，然后再重新渲染新的图表：

watch: {
  changeIndex: {
    handler() {
      if (this.liquidChart) {
        this.liquidChart.dispose()
        this.liquidChart = null
      }
      this.initChart()
    }
  }
}