一开始也经历了用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,到这里问题已解决
标签:style,const,averageChart,pBlock,mainImg,vue2,vue3,echarts From: https://www.cnblogs.com/feng-1212/p/17711631.html