echarts5 + vue3 + vite tooltip提示框组件不显示问题

最新推荐文章于 2024-03-25 11:23:02 发布

落魄切图仔

最新推荐文章于 2024-03-25 11:23:02 发布

阅读量685

点赞数 1

文章标签： echarts javascript vue

本文链接：https://blog.csdn.net/qq_44096635/article/details/127035586

版权

Vue3.0项目中使用ECharts5.0折线图，配置正确，但是tooltip组件无论如何就是无法显示，复制到echarts官网实例当中能够正常显示。原因是echarts实例不能是响应式的
原本代码是这样的

import { inject, onMounted, onUnmounted, ref } from 'vue';
const lineRef = ref(null)
let lineChart = ref(null)
let echarts = inject("echarts")
onMounted(() => {
    lineChart.value = echarts.init(lineRef.value)
    lineChart.value && lineChart.value.setOption(option);
})
onUnmounted(() => {
    lineChart.value && lineChart.value.dispose();
    lineChart.value = null;
})

改成

import { inject, onMounted, onUnmounted, ref } from 'vue';
const lineRef = ref(null)
let lineChart = null;
let echarts = inject("echarts")
onMounted(() => {
    lineChart = echarts.init(lineRef.value)
    lineChart && lineChart.setOption(option);
})
onUnmounted(() => {
    lineChart && lineChart.dispose();
    lineChart = null;
})