×

JS每日一学:echarts图表无数据/空数据如何展示"暂无数据"

作者:jquery2023.01.04来源:Web前端之家浏览:451评论:0
关键词:jsecharts

JS每日一学: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代码块内部。


您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20230104a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • jianj

    node看上有点复杂...

  • 访客

    正好遇到,谢谢分享...

  • jimmy

    这个很有趣,国内SEO更多的是百度...

  • jenny

    VUE的总结的不错啊,收藏了。下次搞点React的啊...

  • jenny

    win7最经典,想当初win8出来后都没它好用,怀恋经典。。。...

  • Terry

    谢谢提醒,插件已经修复。...

  • 访客

    士大夫士大夫...

  • 访客

    用這甚麼顏色...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2