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

热心市民111

已于 2022-09-06 09:52:24 修改

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： echarts javascript ecmascript

于 2022-08-25 15:07:35 首次发布

本文链接：https://blog.youkuaiyun.com/qq_54089372/article/details/126525251

本文介绍使用新版ECharts实现无数据显示的方法，包括文本提示和图片显示两种方式，并提供具体配置代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、显示暂无数据

参照(26条消息) 新版ECharts实现“暂无数据”的完美解决方案_Harryfin的博客-优快云博客_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({
                                ....
                        })//开始配置
                    }