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

这篇具有很好参考价值的文章主要介绍了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>

效果如下: 

echarts 无数据,javascript,vue,前端,echarts

需要注意的是,如果有值的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 无数据,javascript,vue,前端,echarts文章来源地址https://www.toymoban.com/news/detail-735185.html

到了这里,关于echarts 图表无数据/空数据 展示“暂无数据”的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue+Echarts图表动态适配

    目录 前言 一、问题背景 二、解决方案 1.在Vue组件中引入Echarts 2.初始化图表 3.监听resize事件 4.销毁图表 三、优化方案 1.防抖 2.节流 四、总结 在实际的前端开发过程中,动态适配是一个非常重要的问题。在数据可视化的场景下,图表的动态适配尤为重要。在本篇博客中,我们

    2024年02月05日
    浏览(42)
  • vue-echarts踩坑,本地开发可以渲染echarts图表,线上环境图表渲染不出来

    main.js 全局注册v-chart组件 在页面中使用 如上图,我开始写的静态数据,在data中定义了chartOption1:{…配置项…}, 在接口数据返回之后,更新了配置项,在本地开发环境可以正常渲染。但是线上环境出不来,也不报错,接口数据一切正常。 解决办法: 无奈最后没有使用‘vue-e

    2024年01月18日
    浏览(49)
  • vue+echarts图表的基本使用

    在实际开发当中,我们经常需要用到一些图表来实现数据可视化,这时候 echarts 可以帮助我们实现数据的展示。这里将介绍如何使用前端框架vue+echarts来实现数据可视化。 长话短说,echarts就是一个帮助数据可视化的库。 代码:直接复制代码创建一个vue组件,到App中引入组件

    2024年02月15日
    浏览(46)
  • JavaScript、Vue实现大数据大屏展示3D旋转动画效果

    最近在写一些数据大屏的时候客户需要做个3D旋转动效的效果,简单整理之后写了一个小demo做下记录,先看一下效果: 当点击next的时候,整个模块旋转切换到下个菜单,点击prev的时候也可以切换到上一个菜单效果。 首先我们先构建一个大体的dom结构,如下: 编写基本的css样

    2024年02月11日
    浏览(37)
  • Vue3中使用Echarts图表

    Echarts是一个基于JavaScript的开源可视化图表库,由百度开发和维护。它提供了多种类型的图表,包括折线图、柱状图、散点图、饼图、地图等,可以用于展示各种类型的数据。Echarts具有良好的交互性和可扩展性,可以通过自定义主题和图表样式来满足不同的需求。同时,Ech

    2024年02月08日
    浏览(44)
  • vue左侧漏斗切换 echart图表动态更新

    这个需求是根据点击左侧的箭头部分,右侧图表切换,左侧选中数据高亮(图片用的svg)    

    2024年02月11日
    浏览(40)
  • vue2、vue3分别配置echarts多图表的同步缩放

    大家好!我是yma16,本文分享在vue2和vue3中配置echarts的多图表同步缩放 背景: 解决echarts的多图表x轴同步联动的问题 echarts的datazoom api对外暴露 原理: echarts的实例存在datazoom缩放的方法, 所以只需要在datazoom事件触发其他图表的datazoom即可实现同步缩放 注意: x轴的范围要一

    2024年02月09日
    浏览(79)
  • VUE2+Element-ui+封装Echarts图表

    封装Echarts图表,如下效果图 Home组件代码块,使用的mock.js模拟数据封装 Echarts图表组件 安装所需依赖 cnpm i axios -S 安装axios接口请求 cnpm i mockjs 或 yarn add mockjs 安装mockjs生成模拟随机数据 cnpm i echarts 或 yarn add echarts 安装echarts图表 cnpm i element-ui -S 安装element-ui组件库 安装less c

    2024年02月08日
    浏览(47)
  • Vue3项目中使用ECharts图表并实现自适应效果

    在项目中输入如下代码: 安装完成可以在package.json中看到: 创建ECharts图表的文件barCharts.vue,将它引入并在父组件中使用。在使用setup时,我们把组件直接引入进来,就可以直接使用了,不用像Vue2那样需要注册了。 在父组件中创建一个有宽高的容器,里面放ECharts组件,ECh

    2024年02月03日
    浏览(50)
  • ECharts数据可视化--常用图表类型

    目录 一.柱状图 1.基本柱状图  1.1最简单的柱状图 ​编辑   1.2多系列柱状图   1.3柱状图的样式          (1)柱条样式                  (2)柱条的宽度和高度         (3)柱条间距         (4)为柱条添加背景颜色 ​编辑 2.堆叠柱状图 3.动态排序柱状图 4.阶梯

    2024年02月05日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包