1. Problemas
Uncaught (in promise) Error: Initialize failed: invalid dom.
Erro de código
<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>
Dois, a causa do problema
Obter dom
erro, eCharts
suporte apenas usando o método nativo para obter arquivos dom
.
Vue
O ref
método eCharts
não é suportado.
Três, a solução
Obtido usando métodos nativos dom
.
código correto
<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>
FIM