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 暂无数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序实现滑动删除
这篇文章主要为大家详细介绍了微信小程序实现滑动删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
webpack 静态资源集中输出的方法示例
这篇文章主要介绍了webpack 静态资源集中输出的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
php的派发机制实现方法
PHP是一种动态类型的编程语言,它支持面向对象编程,在PHP中,派发指在运行时确定要调用的方法或函数的过程,派发机制允许根据实际对象的类型来选择要执行的方法,这种灵活性使得PHP可以实现多态性,本文将给大家介绍php的派发机制是怎么实现的,需要的朋友可以参考下
2023-10-10
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
这篇文章主要介绍了微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能，利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置，具体实例代码跟随小编一起看看吧
2019-12-12
JavaScript提升机制Hoisting详解
这篇文章主要介绍了JavaScript提升机制Hoisting详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
javascript实现网页字符定位的方法
这篇文章主要介绍了javascript实现网页字符定位的方法,实例分析了javascript页面元素查找与定位的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
针对BootStrap中tabs控件的美化和完善(推荐)
这篇文章主要介绍了针对BootStrap中tabs控件的美化和完善的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-07-07
微信小程序实现树莓派（raspberry pi）小车控制
这篇文章主要为大家详细介绍了微信小程序实现树莓派（raspberry pi）小车控制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
layui监听工具栏的实例(操作列表按钮)
今天小编就为大家分享一篇layui监听工具栏的实例(操作列表按钮)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript获得指定对象大小的方法
这篇文章主要介绍了JavaScript获得指定对象大小的方法,涉及javascript针对元素遍历与属性操作的相关技巧,需要的朋友可以参考下
2015-07-07