echarts无数据时显示暂无数据或者用图片代替

一、显示暂无数据

参照(26条消息) 新版ECharts实现“暂无数据”的完美解决方案_Harryfin的博客-CSDN博客_echarts没有数据怎么展示

graphic: {
    type: 'text',     // 类型：文本
    left: 'center',
    top: 'middle',
    silent: true,     // 不响应事件
    invisible: data.length > 0,   // 有数据就隐藏
    style: {
        fill: '#9d9d9d',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '25px'
    }
}

二、图片代替

//首先引入图片 
import noData from '../../../../assets/images/dataMissed.png'
//配置
if (this.Arr.length == 0) {//无数据
                        const noDataImg = noData // 暂无数据图片路径
                        const averageChart = document.getElementById('average-chart')
                        averageChart.style.display = 'flex'
                        averageChart.style.flexDirection = 'column'
                        averageChart.style.justifyContent = 'center'
                        averageChart.style.alignItems = 'center'
                        averageChart.removeChild(averageChart.firstChild) // 移除
                        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 = '#999999'
                    } else {
                        let aveShow = false//小于8条数据不显示滚轮
                        if (this.subNameArr.length > 8) {
                            aveShow = true
                        }
                        averageChart.setOption({
                                ....
                        })//开始配置
                    }

三、实现效果

有数据时：

无数据时：