在 vue3 中使用 echarts 避坑

在vue3 中封装echarts组件会出现 无法实现多个echarts图表, 与resize()方法响应不及时等问题

在echarts组件中 使用document.getElementById方法获取id 会提示重复申请的错误,

 

推荐使用ref的方式来获取元素

const myChart = ref(null);

var Chart = null;

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

function onResize() {
    Chart.resize();
}

onMounted(() => {
    nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        Chart = echarts.init(myChart.value);
        Chart.setOption(props.option);
        resize(Chart);
    });
});

 这里的resize方法是一个全局方法 提供大家参考

/**
 * 监听浏览器窗口变化
 */
export const resize = (chart) => {
    let timer = 0;
    window.addEventListener("resize", () => {
        clearTimeout(timer);

        timer = setTimeout(() => {
            chart.resize();
        }, 300);
    });
}

有什么更好的解决方法 大家一起分享呀