echarts 图表无数据/空数据展示“暂无数据”

我们从后端获取数据动态渲染图表时，难免会遇到数据为空的情况（虽然实际应用中这样的bug极少遇到），但考虑周全一点也好，看如何实现吧。

正常情况渲染图表：

<div id="test_chart" style="width: 600px;height:400px;"></div><script>let chartData =  [5, 20, 36, 10, 10, 20];// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('test_chart'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫']},yAxis: {},series: [{name: '销量',type: 'bar',data: chartData          //动态数据}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>

我们只需要：在定义option的外面加一个if条件判断，判断动态获取的数据是否有值，有则渲染图表，无则渲染指定内容——可以是暂无数据的图片，也可以是文字

1、显示“暂无数据”文字

<div id="test_chart" style="width: 600px;height:400px;"></div><script>let chartData =  [5, 20, 36, 10, 10, 20];// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('test_chart'));var option;// 指定图表的配置项和数据if (chartData.length == 0 ) {  //暂无数据option = {title: {text: '暂无数据',x: 'center',y: 'center',textStyle: {fontSize: 14,fontWeight: 'normal',}}}} else {option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫']},yAxis: {},series: [{name: '销量',type: 'bar',data: chartData          //动态数据}]};}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>

效果如下：

需要注意的是，如果有值的option里面没有定义title属性，那么就无法覆盖无值的情况渲染的“暂无数据”title，我们可以给它赋空值。

option = {title:{text:''},xAxis:{},yAxis:{},series:{},
}

2、显示“暂无数据”图片

封装了一个noDataChart函数（可以直接复制使用），在上面的if判断为真的时候，调用这个函数，显示暂无数据图片即可。

// 暂无数据处理函数
noDataChart(dom){   //传入图表所在的dom节点dom.removeChild(dom.firstChild)const mainImg = document.createElement('img')dom.appendChild(mainImg) // 定义要显示的图片mainImg.style.width = 'auto'mainImg.style.height = 'auto'mainImg.src = noDataImg // 要显示图片的src路径，由外部统一定义，或直接写在这里也可以const mainText = document.createElement('h3')   //定义显示文字dom.appendChild(mainText)dom.style.display = 'flex'dom.style.flexDirection = 'column'dom.style.justifyContent = 'center'dom.style.alignItems = 'center'mainText.innerHTML = '暂无数据'mainText.style.color = '#999999'dom.removeAttribute('_echarts_instance_')
},// 图表绘制函数
function myChartFunc(){let dom = document.getElementById('test_chart')var myChart = echarts.getInstanceByDom(dom);   //存在dom节点，获取已有的echarts实例的dom节点if ( myChart == null ) {  //不存在，进行初始化操作myChart = echarts.init(dom);}// 指定图表的配置项和数据if (chartData.length == 0 ) {  //暂无数据this.noDataChart(dom)   //---调用暂无数据处理函数} else {var option = {title: {text: 'ECharts 入门示例'},/*图表相关配置*/      }myChart.setOption(option)}
}

注意点：

1、noDataChart函数中使用的暂无数据图片noDataImg由外部定义，此处直接使用，可以根据需要选择外部定义或者是直接将图片路径写在对应位置；

2、在图表绘制函数内部，判断有无数据之前，新增了一条if语句，判断图表dom节点是否存在，存在则直接获取echarts实例，否则进行初始化操作；

3、因为在这种情况下，图表无数据时，我们没有使用到option变量，如果还是将option的声明写在if条件外侧（且myChart.setOption(option)也在外侧），那暂无数据的情况会导致setOption语句获取到option为undefined报错，所以直接将option的声明和定义、以及myChart.setOption(option)语句写在有数据的else代码块内部。

echarts 图表无数据/空数据展示“暂无数据”相关推荐

Vue中echarts图表x轴文字倾斜展示(防止字迹展示重叠)
前言 Vue中echarts图表x轴文字倾斜展示效果图代码 axisLabel: {fontSize: 12,color: '#666',interval: 0,//主要是下面的代码-倾斜rota ...
Echarts环形图设置空数据样式
需求背景由于最近的需求涉及到图表的展示,所以引入Echarts来渲染图表,但是问题也随之而来了,仔细阅读过文档后发现,Echarts对于环形图并没有能够设置默认样式的地方,对于空数据,界面直接就是空 ...
Echarts折线图获取数据库数据展示
Echarts折线图获取mysql中的数据展示需求: 1 设计思路: 2 数据表设计 3 需求分析 4 后端接口开发 5 前端数据展示需求: 将数据库活动表的4种信息状态以 echarts表格展 ...
echarts图表动态获取后台数据详解（二）
前篇文章介绍了如何在现有的页面中,建立容器存放echarts图表,如何引入echarts.js文件,和配置图表库的路径.并将静态数据在页面上呈现出来.相当于是为动态获取后台数据做了铺垫.那么这篇文章, ...
微信小程序循环显示多个Echarts图表，动态渲染数据
需求:需要在微信小程序中循环显示多个Echarts图表,动态渲染Echarts数据. 经查询,选择使用echarts插件. 在echarts官网中获取ec-canvas组件,放入至微信小程序中 1.w ...
echarts图表在修改了数据之后，如何进行重新渲染？
let map = echarts.init(document.getElementById('map')); let option = map.getOption() // 获取option数据 o ...
微信小程序 - 空数据、网络加载失败组件
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类小程序码效果图: ##使用说明 1. usingComponents 添加"EmptyV ...
大数据平台展示可视化效果，echarts图表实战项目(源码50套)
本文重点介绍HTML5图表框架echarts入门Demo及实战项目(含源码),以此来实现echarts大屏展示大数据平台可视化酷炫效果. 缘起:最近接了个任务需要用H5在前台两个大电视上做两页数据展示 ...
实现Java Web开发的关于echarts可视化动态数据展示
实现Java Web开发的关于可视化动态数据展示 echarts是一个实现动态数据展示最方便的图形化展示工具.它能够完成数据实时传递更新并且能够完成页面直观的展示.最开始时,echarts是由百度设计 ...
java echarts 生成图片_java如何在后台生成echarts图表？实际代码展示
学习是一个永无止境的过程,关于java的学习更是如此.今天主要为大家介绍下,如何在java中后台生成echarts图表,并且为大家展示实际的操作流程. 首先说下它的适用情况:⑴.支持echart4.0 ...

echarts 图表无数据/空数据展示“暂无数据”

1、显示“暂无数据”文字

2、显示“暂无数据”图片

echarts 图表无数据/空数据展示“暂无数据”相关推荐

最新文章

热门文章

echarts 图表无数据/空数据 展示“暂无数据”

1、显示“暂无数据”文字

2、显示“暂无数据”图片

echarts 图表无数据/空数据 展示“暂无数据”相关推荐

最新文章

热门文章

echarts 图表无数据/空数据展示“暂无数据”

echarts 图表无数据/空数据展示“暂无数据”相关推荐