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删除指定子元素代码实例,本文给出了代码实例和实现代码解释,需要的朋友可以参考下
2015-01-01
js实现简单的点名器随机色实例代码
这篇文章主要给大家介绍了关于js实现简单的点名器随机色的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
JavaScript中的object转换成number或string规则介绍
这篇文章主要介绍了JavaScript中的object转换成number或string规则介绍,本文讲解了object自动转换成string的规则、object自动转换成number的规则等内容,需要的朋友可以参考下
2014-12-12
JavaScript时间格式化函数功能及使用示例
这篇文章主要为大家介绍了JavaScript时间格式化函数功能及使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
JS设计模式之命令模式的用法详解
JavaScript中的命令模式是一种设计模式,它提供了一种将命令封装为对象的方式,从而允许我们将请求与实际执行该请求的操作对象解耦,这种模式可以在不同的场景中使用,例如实现撤销/重做操作、队列任务等,本文我们将讲解命令设计模式在JS中的使用
2023-08-08
使用 Schema-Utils 对 Webpack Plugin 进行配置项校验的简单用例
schema-utils 库用于在 loader 和 plugin 实例化时，对传入的参数进行校验，本文重点给大家介绍使用 Schema-Utils 对 Webpack Plugin 进行配置项校验的用例详解，感兴趣的朋友一起看看吧
2022-03-03
基于JavaScript实现活动倒计时效果
这篇文章主要为大家详细介绍了基于JavaScript实现活动倒计时效果，距离活动时间还剩多少，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
一文搞懂如何避免JavaScript内存泄漏
SPA的兴起，促使我们更加关注与内存相关的JavaScript编码实践。如果应用使用的内存越来越多，就会严重影响性能，甚至导致浏览器的崩溃。下面就来看看JavaScript中常见的内存泄漏以及如何避免内存泄漏
2022-05-05
JS构造函数与原型prototype的区别介绍
下面小编就为大家带来一篇JS构造函数与原型prototype的区别介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
await/async无法捕获与处理错误信息的解决方案分享
async await 中添加错误处理个人认为是有必要的,下面这篇文章主要给大家介绍了关于await/async无法捕获与处理错误信息的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02