Uncaught (in promise) Error: Initialize failed: invalid dom.

一、问题

Uncaught (in promise) Error: Initialize failed: invalid dom.

错误代码

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';

onMounted(() => {
    drawChat()
})

const drawChat = () => {
    const mychart = ref(null)
    let myChart = echarts.init(mychart)
    let option = { }
    option && myChart.setOption(option)
}
</script>

<template>
    <div ref="mychart" class="echart"></div>
</template>

二、问题原因

获取 dom 错误，eCharts 仅支持使用原生方法获取 dom。

Vue 的 ref 方法，eCharts 不支持。

三、解决办法

使用原生方法获取 dom。

正确代码

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';

onMounted(() => {
    drawChat()
})

const drawChat = () => {
    let myChart = echarts.init(document.getElementById('mychart')) // 原生方法获取 dom
    let option = { }
    option && myChart.setOption(option)
}
</script>

<template>
    <div ref="mychart" class="echart"></div>
</template>

END