vue3+ts+echart Error: Renderer ‘undefined‘ is not imported. Please import it first.

vue+ts+echart报错Error: Renderer ‘undefined’ is not imported. Please import it first.

官方文档地址
报错截图

版本

报错原因

因为CanvasRenderer这个没有倒入，所以我们先需倒入一下

解决方法

import {CanvasRenderer} from "echarts/renderers";
import * as echarts from "echarts/core";
const init_data = () => {
  // const chartDom = ref('dom_el')
  const chartDom = document.getElementById('dom_el')
  echarts.use(CanvasRenderer)
  const myChart = echarts.init(chartDom);
  // myChart.setOption(props.option);
}

---

如果没有mounted生命周期可以可能会报这个错

使用geteementid报这个错

使用ref报这个错
我门只需要把init_data方法放在mounted方法里面执行就好了

onMounted(() => {
  init_data()
})