echarts 显示暂无数据的具体方法

在 echarts 渲染过程中，当没有数据的时候，页面像没有完成的项目一般，为了更好的用户体验，需要显示暂无数据，这里整理了三种实现方案：

（1）通过判断是否有渲染需要的图表数据，给 DOM 插入文字。

if(this.chartData.series[0].data.length > 0){this.$nextTick(() => {this.charts = this.$echarts.init(this.$refs.chart);this.setOption();var _this = this;// 点击柱形图事件this.charts.on("click", (params) => {_this.$emit("getBar", params.name);});});} else {this.$nextTick(() => {var dom = this.$refs.chartdom.innerHTML = '暂无数据'dom.removeAttribute('_echarts_instance_')})}

(2) 通过 showLoading API 来实现

myChart = this.$echarts.init(this.$refs.chart);
myChart.setOption(option)if (!data.length) {myChart.showLoading({text: '暂无数据',showSpinner: false,textColor: 'black',maskColor: 'rgba(255, 255, 255, 1)',fontSize: '26px',fontWeight: 'bold'})} else {myChart.hideLoading()}

有数据时记得调用 hideLoading() 否则图表将无法展示。

(3)通过给 options 增加 graphic 配置项来实现

graphic: {type: 'text',left: 'center',top: 'middle',silent: true,invisible: data.length == 0, //是否可见，这里的意思是当没有数据时可见style: {fill: 'black',fontWeight: 'bold',text: '暂无数据',fontSize: '26px'}}

实现原理是在图表上再增加一个图层，图层上写着暂无数据的提示。

echarts 显示暂无数据的具体方法相关推荐

关于Echart图没有数据的时候显示暂无数据思路
Echart 没有数据的时候显示暂无数据思路 : 1. 通过设置 title 就可以处理了 2. 通过判断,后台传给我们的数据是否有值,将 title 这个属性设置成两个,一个是有数据的时候显示的标 ...
页面显示的时候先显示暂无数据然后再显示数据
ts文件: //给hasdata赋值为true,在页面加载的时候就不会先显示暂无数据: hasdata: boolean = true//获取任务分类getRunCategory(timeRefres ...
el-table loading 显示暂无数据查询时显示数据正在加载中
<el-table v-loading="loadingShow" element-loading-text="数据正在加载中..."此处省略好几行> ...
vue解决Element-ui中 el-cascader 级联选择器最后一级数据为空显示暂无数据问题
1.出现问题bug: el-cascader控件最后一级出现空白暂无数据 2. 问题原因分析经过调试分析出现空级联原因是:由于数据是从后台传递过来的,当后端的哥们使用递归算出菜单,然后转换成js ...
echarts折线图无数据断开解决方法
示例: 解决方法:series的connectNulls属性支持连接空值
layui在搜索的时候没有数据，在表格中显示暂无数据
layui在搜索的时候没有数据,在表格中显示暂无数据网上有很多教程,都是说要改变table.js,但是我发现不需要,只需要在返回json数据的时候做一下判断即可. php给layui返回json数据 ...
给echarts添加筛选时间控件时，控件不显示，并设置数据库无数据时echarts模块显示暂无数据
给echarts模块添加时间控件时,控件无效,经检查发现,控件被画布遮盖了,需要用一个form标签包括时间控件,否则时间控件不生效.另外,如果echarts从后台获取到的数据为空,需要提示暂无信息.这 ...
echarts在没有数据时显示暂无数据
需求描述: 如上图,若选择的日期范围内没有数据时,接口返回数据为空,此时需要在echarts dom区域内显示"暂无数据"的提示文字: 并且,若在暂无数据之后重新选择日期范围,当重 ...
Echarts实现省级地图的两种方法（以浙江省为例）
Echarts实现省级地图的两种方法(以浙江省为例) 在echarts调用地图时,我们往往会使用GeoJson格式的数据,根据网上的资料,会发现官网会提供世界.中国以及各省的数据.但是,访问下载最新的 ...

echarts 显示暂无数据的具体方法

echarts 显示暂无数据的具体方法相关推荐

最新文章

热门文章