一开始也经历了用v-if和v-show，v-show的话echarts还会留出暂无数据图片的位置，导致echarts变形，v-if在加载和不加载切换时，dom会获取不到；后来也是在网上找的方法，时间有点长，原文地址就不贴了。
对了，在网上查方法的时候还找到了echarts noDataLoading这个方法，按照网上的写完，但是并没有起作用，不知道是方法移除了还是其他问题，后面实现了也没管它
vue2
echarts版本：4.9.0
默认你的echarts已经注册在全局，可以在组件中用this.$echarts()访问到（注册比较简单不细说）
html代码
<div id="mychart" style="width: 100%;height: 100%"></div>
script代码
import noData from '@/assets/nodata.png'
//ajax获取数据，判断数据为不为空，为空展示暂无数据，不为空则展示echarts
if(res.data.length){
this.initEcharts(res.data);
}else{
this.showNoData('mychart')
}
//暂无数据的方法
showNoData(id){
const noDataImg = noData // 暂无数据图片路径
const averageChart = document.getElementById(id)
averageChart.style.display = 'flex'
averageChart.style.flexDirection = 'column'
averageChart.style.justifyContent = 'center'
averageChart.style.alignItems = 'center'
if(averageChart.firstChild){
averageChart.innerHTML=''
}// 移除
const mainImg = document.createElement('img') // 添加要显示的图片
averageChart.appendChild(mainImg)
mainImg.style.width = 'auto'
mainImg.style.height = 'auto'
mainImg.src = noDataImg
const pBlock = document.createElement('p')//添加p标签
averageChart.appendChild(pBlock)
pBlock.innerHTML = '暂无数据' //我的图片里没有字，所以自己加了字，图片里有字可以把这里去掉或设为空
pBlock.style.color = '#2c3e50';
averageChart.removeAttribute('echarts_instance')
},
//渲染echarts
initEcharts(data){
let dom = document.getElementById("mychart");
let mychart = this.$echarts.getInstanceByDom(dom)
//注意一下这里，我的项目里可以选择时间，暂无数据图片和echarts来回切换，所以这里就要判断有没有echarts，因为在showNoData方法里有清除元素，不加的话会报错
if(mychart == null){
mychart = this.$echarts.init(dom)
}
//数据处理就不写了 最后把组好的option set进去就行了
mychart.setOption(你的option);
},
vue3
vue3我的使用场景跟vue2不太一样，3中没有时间选择框不需要切换echarts和图片（如有需要可以参考上面vue2的方法），echarts的数据是从父组件传过来的，所以要监听数组的变化（watch）并且dom也得存在（nextTick ）
html代码
<div ref="bar" style="width: 100%; height: 100%"></div>
script setup代码
import noData from '../../../assets/nodata.png'
import { ref, watch, nextTick } from 'vue'
import * as echarts from 'echarts';
const props = defineProps({
data:{ type:Array, default:[]},
})
const bar = ref()
const initCharts = ()=>{
let barCharts = echarts.init(bar.value);
if(props.data.length){
barCharts.setOption(option)//用自己的option
}else{
showNoData(bar.value)
}
}
const showNoData = (ele) => {
const noDataImg = noData // 暂无数据图片路径
const averageChart = ele
averageChart.style.display = 'flex'
averageChart.style.flexDirection = 'column'
averageChart.style.justifyContent = 'center'
averageChart.style.alignItems = 'center'
if(averageChart.firstChild){
averageChart.innerHTML=''
}// 移除
const mainImg = document.createElement('img') // 添加要显示的图片
averageChart.appendChild(mainImg)
mainImg.style.width = '60px'
mainImg.style.height = '55px'
mainImg.src = noDataImg
const pBlock = document.createElement('p')//添加p标签
averageChart.appendChild(pBlock)
pBlock.innerHTML = ''
pBlock.style.color = '#2c3e50';
averageChart.removeAttribute('echarts_instance')
}
watch(
()=>props.data,
async(newValue)=>{
await nextTick()
initCharts()
},
{immediate:true,deep:true}
)
ok，到这里问题已解决