Erreur non interceptée (dans la promesse) : Échec de l'initialisation : dom non valide.

1. Problèmes

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

code d'erreur

<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>

Deux, la cause du problème

Obtenir domune erreur, eChartsne prend en charge que l'utilisation de la méthode native pour obtenir dom.

VueLa refméthode eChartsn'est pas prise en charge.

Trois, la solution

Obtenu à l'aide de méthodes natives dom.

code correct

<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>

FIN