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代码

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代码

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，到这里问题已解决