Echarts实现暂无数据的三种方法

更新时间：2023年08月08日 10:41:17 作者：趣果有间

本文将介绍如何使用Echarts实现暂无数据的三种方法,详细讲解这三种方法的实现步骤和效果展示,帮助读者更好地理解如何在Echarts中处理暂无数据的情况

通过 title 配置项来实现

const init = (data) => {
  const myChart = echarts.init(document.getElementById('noData'))
  const option = {
    title: {
      show: !data.length, // 无数据时展示 title
      textStyle: {
        color: 'black',
        fontSize: 26
      },
      text: '暂无数据',
      left: 'center',
      top: 'center'
    },
    xAxis: {
      show: data.length, // 无数据时不展示 x 轴
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data,
        type: 'line'
      }
    ]
  }
  myChart.setOption(option)
}
// const data = [150, 230, 224, 218, 135, 147, 260]
const data = []
init(data)

通过 showLoading API 来实现

const init = (data) => {
  const myChart = echarts.init(document.getElementById('noData'))
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data,
        type: 'line'
      }
    ]
  }
  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()
  }
}
// const data = [150, 230, 224, 218, 135, 147, 260]
const data = []
init(data)

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

附：showLoading API

通过 graphic 配置项来实现

const init = (data) => {
  const myChart = echarts.init(document.getElementById('noData'))
  const option = {
    xAxis: {
      show: data.length, // 无数据时不展示 x 轴
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data,
        type: 'line'
      }
    ],
    graphic: {
      type: 'text',
      left: 'center',
      top: 'middle',
      silent: true,
      invisible: data.length,
      style: {
        fill: 'black',
        fontWeight: 'bold',
        text: '暂无数据',
        fontSize: '26px'
      }
    }
  }
  myChart.setOption(option)
}
// const data = [150, 230, 224, 218, 135, 147, 260]
const data = []
init(data)

这种方式的实现原理是在图表上再增加一个图层，图层上写着暂无数据的提示，如果想要展示图片的话也是可以的，比较灵活，所以个人认为这种方式是最佳的解决方案。

附：graphic 配置项手册

到此这篇关于Echarts实现暂无数据的三种方法的文章就介绍到这了,更多相关Echarts 暂无数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Javascript实现从小到大的数组转换成二叉搜索树
这篇文章主要介绍了Javascript实现从小到大的数组转换成二叉搜索树的相关资料,需要的朋友可以参考下
2017-06-06
JsChart组件使用详解
JSChart能够在网页上生成图标，常用于统计信息，十分好用的一个JS组件。这篇文章主要介绍了JsChart组件使用详解,需要的朋友可以参考下
2018-03-03
JavaScript必知必会(九）function 说起闭包问题
这篇文章主要介绍了JavaScript必知必会(九）function 说起闭包问题的相关资料,需要的朋友可以参考下
2016-06-06
javascript中Date对象应用之简易日历实现
这篇文章主要为大家详细介绍了javascript中Date对象应用之简易日历实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
js 省地市级联选择
3级省地市级联菜单，ie/ff 测试通过，支持多个并存，支持事件
2010-02-02
详谈LABJS按需动态加载js文件
为了提高页面的打开和加载速度，我们经常把JS文件放在页面的尾部，但是有些JS必须放在页面前面，这样就会增加页面的加载时间；于是出现了按需动态加载的概念，这个概念就是当页面需要用到这个JS文件或者CSS渲染文件的时候，在去请求这些文件，这样就节省了页面的加载时间
2015-05-05
前端HTML实现个人简历信息填写页面效果实例
本文介绍了如何使用HTML、CSS和JavaScript构建一个个人简历信息填写页面,涵盖了简历页面的HTML结构设计、CSS样式美化以及JavaScript实现动态功能和验证的全过程,需要的朋友可以参考下
2024-11-11
浅谈webpack打包生成的bundle.js文件过大的问题
下面小编就为大家分享一篇浅谈webpack打包生成的bundle.js文件过大的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
js实现3D图片环展示效果
本文主要介绍了js实现3D图片环展示效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
基于JavaScript实现一个月饼音乐播放器
这篇文章主要为大家详细介绍了如何利用JavaScript实现一个简单的月饼音乐播放器，文中的示例代码讲解详细，感兴趣的小伙伴可以尝试一下
2022-09-09