vue3 echarts 基础封装

最新推荐文章于 2024-07-17 02:09:49 发布

头发被吹的凌乱了

最新推荐文章于 2024-07-17 02:09:49 发布

阅读量167

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/www12312312/article/details/136845341

版权

本文介绍了如何在Vue组件中使用ECharts库创建动态图表，并实现组件的重绘以及使用防抖技术来优化窗口调整时的性能。通过watch选项更新和生命周期钩子管理，确保了图表的响应式更新和卸载时的资源清理。

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

只需要传入option 对象即可
在这里插入图片描述

<template>
    <div id="myEcharts"></div>
</template>
<script setup>
import * as echarts from 'echarts';
let myChart = null;
const props = defineProps({
    option: Object,
})
//重绘
const resizeHandler = () => {
    myChart.resize();
}
//设置防抖
const debounce = (fun, delay) => {
    let timer;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fun();
        }, delay);
    }
};
const cancalDebounce = debounce(resizeHandler, 500);

onBeforeUnmount(() => {
    window.removeEventListener('resize', cancalDebounce)
    myChart.dispose()
})

watch(() => props.option, () => {
    myChart.setOption(props.option, true);
})

onMounted(() => {
    let myChart = echarts.init(document.getElementById("myEcharts"));
    myChart.setOption(props.option, true);
    window.addEventListener('resize', cancalDebounce);
})
</script>
<style lang="less" scoped>
#myEcharts{
    width: 100%;
    height: 100%
}
</style>