echarts动态切换数据渲染（vue3 + echarts）

项目情况用到了vue3+echarts5。初次拿到数据渲染没有问题。需求是：进行数据筛选，图表也要进行相对应的数据切换。

思路

• echarts数据变换后，图表没进行切换。是因为没办法echarts没办法直接渲染更新后的数据
• 数据切换后直接再去用init会报错，原因是（你已经渲染过了，已经存在了这个dom元素。所以不允许）
• 那我们就可以定义一个status。初次为true,代表当前这个echarts还没有init dom元素。然后如果init之后直接把status变为false。之后只需要用到setOption就可以了

解决方法

const myChart1 = ref<any>();
const isDomLoading = ref(true); //echart是否初始化
//获取echart数据
const getChartData = async (payload?: any) => {
	//可以在这里处理数据
	
	if (isDomLoading.value) {
		myChart1.value = echarts.init(document.getElementById('chartDom'));//如果没数据就初次渲染
		initChart();//初始化
	}else{
		myChart1.value.setOption(initChartData());//如果已经渲染过就setOption更新数据
	}
}


//定义echarts option参数
const initChartData = () => {
    let option = {
        xAxis: {
            type: 'category',
            data: chartDomData.value,
            nameTruncate: {
                maxWidth: 9,
                ellipsis: '...',
            },
            triggerEvent: true,
            axisLabel: {
                show: true,
                interval: 0,
                width: 80,
                overflow: 'truncate',
                ellipsis: '...',
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        yAxis: {
            type: 'value',
            show: false,
            axisLine: {
                //y轴
                show: false,
            },
            axisTick: {
                //y轴刻度线
                show: false,
            },
            splitLine: {
                //网格线
                show: false,
            },
        },
        series: [
            {
                data: chartDomData.value,
                selectedMode: 'single',
                select: {
                    itemStyle: {
                        borderColor: '#000',
                        borderType: 'dashed',
                    },
                },
                type: 'bar',
                label: {
                    show: true,
                },
            },
        ],
    };
    return option;
};
//初始化图表
const initChart = () => {
	myChart1.value.setOption(initChartData());
	isDomLoading.value = false;
}

 				<div
                    class="box"
                    id="chartDom"
                    ref="chartDom"
                ></div>

如果理解的不对，可以告诉我。我更改一下。一起进步