关于echarts5.5.0版本，点击legend报错的问题

最新推荐文章于 2024-07-19 14:30:57 发布

奶昔不会射手

最新推荐文章于 2024-07-19 14:30:57 发布

阅读量717

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lth002/article/details/136328169

版权

本文描述了在使用Vue和ECharts时，如何正确地通过`ref`处理图表实例的生命周期管理，特别是在设置和销毁图表时遇到的错误以及修复方法。

摘要由CSDN通过智能技术生成

在做项目的时候，图表画出来了，但是点击legend就会报错，记录一下解决方法
错误写法：

  <template>
    <div class="echarts_container" ref="echarts_container">
    </div>
</template>
<script setup lang='ts'>
import { ref, onMounted, onUnmounted } from "vue";
const echarts_container = ref();
//let myChart = ref();  //错误地方就是这里，不能用ref代理
let machrt = null;  //正确写法
let option = {
	....
}
onMounted(() => {
    myChart = echarts.init(echarts_container.value);
    option && myChart.setOption(option);
});

onUnmounted(() => {
    myChart.destroy();
});
</script>