vue2和vue3使用echarts时无数据，怎么显示暂无数据图片或文字

一开始也经历了用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，到这里问题已解决