Vue3 中使用 ECharts 5 报错

在 Vue3 中使用 ECharts 5 报错：Uncaught TypeError: Cannot read properties of undefined (reading 'xxx');

错误原因

Vue 的响应式系统与 ECharts 的状态管理冲突，导致 ECharts 无法正常更新而报错

解决办法

• 方案一：使用原始 JavaScript 变量绑定 ECharts 实例

<script setup>
    import * as echarts from 'echarts';

    let myChart = null;
    myChart = echarts.init(document.querySelector('#id'));
</script>

• 方案二：使用markRaw将 ECharts 实例标记为原始对象

<script setup>
    import { ref, markRaw } from 'vue';
    import * as echarts from 'echarts';

    const myChart = ref(null);
    myChart = markRaw(echarts.init(document.querySelector('#id')));
</script>