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;
}

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

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