一、显示暂无数据

参照(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 = noDataImgconst 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({....})//开始配置}

三、实现效果

有数据时：

无数据时：

echarts无数据时显示暂无数据或者用图片代替相关推荐

关于echarts无数据时显示问题
我是做java开发的,最近公司让我做前端统计图表柱形图之类的,我用的就是echarts,版本是2.2.7,接下来,就说说我遇到的问题,因为我是小白,所以记录一下. ajax请求返回数据为空时显示暂无数 ...
echarts在没有数据时显示暂无数据
需求描述: 如上图,若选择的日期范围内没有数据时,接口返回数据为空,此时需要在echarts dom区域内显示"暂无数据"的提示文字: 并且,若在暂无数据之后重新选择日期范围,当重 ...
看代码学知识之（2） ListView无数据时显示其他View
看代码学知识之(2) ListView无数据时显示其他View 今天看的一块布局是这样的: <!--The frame layout is here since we will be showi ...
【echart】showLoading hideLoading 无数据时显示正在加载
[echart]showLoading hideLoading 无数据时显示正在加载 - WANGHUAN- - 博客园
Layui table无数据时显示Error而不是显示无数据
先放问题和结果: layui table无数据时显示Error而不是显示无数据,是因为接口返回状态码的问题, 当无数据时code返回了0,就会导致出现Error 第一种解决方案(后端接口处理): 后端 ...
关于Echart图没有数据的时候显示暂无数据思路
Echart 没有数据的时候显示暂无数据思路 : 1. 通过设置 title 就可以处理了 2. 通过判断,后台传给我们的数据是否有值,将 title 这个属性设置成两个,一个是有数据的时候显示的标 ...
页面显示的时候先显示暂无数据然后再显示数据
ts文件: //给hasdata赋值为true,在页面加载的时候就不会先显示暂无数据: hasdata: boolean = true//获取任务分类getRunCategory(timeRefres ...
el table怎么获取最后一行_element中el-table单行暂无数据和整体暂无数据的默认修改...
element中el-table单行暂无数据和整体暂无数据的默认修改最近在写element中的el-table表格时,遇到返回列表没有数据的情况 1.整个表格无数据需要展示UI给的一张图片,奈何e ...
echarts 显示暂无数据的具体方法
在 echarts 渲染过程中,当没有数据的时候,页面像没有完成的项目一般,为了更好的用户体验,需要显示暂无数据,这里整理了三种实现方案: (1)通过判断是否有渲染需要的图表数据,给 DOM 插入文字 ...
el-table loading 显示暂无数据查询时显示数据正在加载中
<el-table v-loading="loadingShow" element-loading-text="数据正在加载中..."此处省略好几行> ...

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

一、显示暂无数据

二、图片代替

三、实现效果

echarts无数据时显示暂无数据或者用图片代替相关推荐

最新文章

热门文章