一、问题
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