快捷導(dǎo)航

解決Vue中使用Echarts出現(xiàn)There?is?a?chart?instance?already?initialized?on?the?dom的警告問題

更新時(shí)間：2023年06月19日 09:52:31 作者：唐志遠(yuǎn)

使用echarts的時(shí)候，多次加載會(huì)出現(xiàn)There?is?a?chart?instance?already?initialized?on?the?dom.這個(gè)黃色警告，此警告信息不影響echarts正常加載，但是有bug得解決，本文就帶大家解決這個(gè)問題，感興趣的同學(xué)可以參考閱讀

問題描述

使用echarts的時(shí)候，多次加載會(huì)出現(xiàn)There is a chart instance already initialized on the dom.這個(gè)黃色警告，大概意思就是dom上已經(jīng)初始化了一個(gè)圖表實(shí)例。此警告信息不影響echarts正常加載，但是有bug不解決的話，心里癢的慌！

先說(shuō)明一下，echarts是用在了子組件的彈窗里，然后在父組件打開彈窗時(shí)調(diào)用echarts.init()的初始化方法。第一次渲染正常，之后再打開彈窗控制臺(tái)就會(huì)報(bào)There is a chart instance already initialized on the dom.

父組件中的代碼：

const taskDetailDom = ref()
const open = ()=> {
    if (taskDetailDom.value) {
        taskDetailDom.value.initEchart()
    }
}

如何造成的？這里只區(qū)別了子組件的寫法。

錯(cuò)誤寫法：

<script setup lang='ts'>
import echarts from "@/utils/custom/echart"
let tChart: Ref<HTMLDivElement | null> = ref(null)
const initEchart = () => {
   const dom = tChart.value
   if (dom) {
      let myChart = echarts.init(dom)
      myChart.setOption(option)
   }
}
defineExpose({
   initEchart
})

關(guān)于import echarts from "@/utils/custom/echart"此處中的代碼(可參考官方示例)如下：

import * as echarts from 'echarts/core';
import {
    BarChart,
    LineChart,
    PieChart
} from 'echarts/charts';
import {
    LegendComponent,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    // 數(shù)據(jù)集組件
    DatasetComponent,
    // 內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件 (filter, sort)
    TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import type {
    // 系列類型的定義后綴都為 SeriesOption
    BarSeriesOption,
    LineSeriesOption
} from 'echarts/charts';
import type {
    // 組件類型的定義后綴都為 ComponentOption
    LegendComponentOption,
    TitleComponentOption,
    TooltipComponentOption,
    GridComponentOption,
    DatasetComponentOption
} from 'echarts/components';
import type {
    ComposeOption,
} from 'echarts/core';
// 通過 ComposeOption 來(lái)組合出一個(gè)只有必須組件和圖表的 Option 類型
type ECOption = ComposeOption<
    | BarSeriesOption
    | LegendComponentOption
    | LineSeriesOption
    | TitleComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | DatasetComponentOption
>;
// 注冊(cè)必須的組件
echarts.use([
    LegendComponent,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LineChart,
    PieChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
export default echarts;

解決方法

在方法最外層定義echarts dom對(duì)象，然后echarts.init()之前，判斷dom是否為空或未定義，如果已存在則調(diào)用dispose()方法銷毀，再初始化echarts.init()。

let tChart: Ref<HTMLDivElement | null> = ref(null)
let myChart: any // 1. 最外層定義 echarts dom
const initEchart = () => {
   const dom = tChart.value
   if (dom) {
      // 2. 判斷 dom 是否為空或未定義
      if (myChart != null && myChart != "" && myChart != undefined) {
        // 3. 已存在則調(diào)用 dispose() 方法銷毀
         myChart.dispose();
      }
      myChart = echarts.init(dom)
      myChart.setOption(option)
   }
}
defineExpose({
   initEchart
})

到此這篇關(guān)于解決Vue中使用Echarts出現(xiàn)There is a chart instance already initialized on the dom的警告問題的文章就介紹到這了,更多相關(guān)Vue中使用Echarts出現(xiàn)的問題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: