vue3 Echarts tooltip不显示问题

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

Mtao&

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

阅读量447

点赞数 7

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/qq_45186619/article/details/135266816

版权

封装组件的时候获取的元素不要用ref

<script setup>
import * as echart from 'echarts';
import { ref, onMounted, onBeforeUnmount, watch} from 'vue';
const props = defineProps({
    id: {
        type: String,
        default: ''
    },
    options: {
        type: Object,
        required: true,
    },
    height: {
        type: String,
    },
    width: {
        type: String,
    },
})

onMounted(() => {
    initCharts();
});
// 初始化图表
const initCharts = () => {
    myChart = echart.init(document.getElementById(props.id));
    renderEchart();
    // 页面大小变化重置图表
    window.addEventListener("resize", () => {
        myChart.resize();
    });
}
// 设置echarts配置项
const renderEchart = () => {
    myChart.setOption(props.options);
}
const clearEchart = () => {
    myChart.clear();
}
onBeforeUnmount(() => {
    // 销毁echarts实例
    myChart = null
})
</script>
<template>
    <div :id="id" v-if="options" :style="{ 'height': height, 'width': width }"></div>
</template>


<style lang='scss' scoped></style>