Echarts 无数据时显示“暂无数据”

2023-11-12

当我们的图表遇到接口数据为空或者筛选之后无数据的情况,会显示成这样

就比较丑,所以需要更换成指定的某些文字做提示

通过配置title,曲线救国

title: {
    show: true,
    text: '暂无数据',
    left: "center",
    top: 'center'
  }

那它就会变成这样

 那我连这个圆都不想要了呢?

在series中配置「showEmptyCircle」为false就可以了,这里是以pie为例,它就变成这样

 那我要是连那个「Access From」这几个字都不要了呢,把name也去掉哈哈哈哈哈哈哈,不过这只是文字版的,如果要更换成图片,要另外尝试了,我也没试过~

以下为全部代码

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  title: {
    show: true,
    text: '暂无数据',
    left: "center",
    top: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'center'
      },
      showEmptyCircle: false,
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [

      ]
    }
  ]
};

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Echarts 无数据时显示“暂无数据” 的相关文章

  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供
  • React - 如何在不使用构造函数的情况下访问道具

    注意 我在使用 React Native 时遇到了这个特定问题 但我想这也适用于 React 我有一个使用 React Component 构建的反应组件 我不需要设置状态 但我确实有道具 我建议的语法如下 class Header ext
  • Push不是数组人口的函数

    我想要一个结构如下的数组 var myMap id 0 1 name Op Op2 Now Op and Op2被采取 each像这样 var myMap var count 0 each GlobalVariables available
  • 在所有浏览器的 HTML 页面中嵌入 .wav 文件(无控件)

    我需要在单击按钮时播放一些 wav 文件 我找到了在 IE 中工作的解决方案 但它需要 Firefox 的 QuickTime 插件 还有其他办法吗 h1 test h1 span span
  • 手动触发触摸事件

    我搜索了过去30分钟 但没有找到解决方案 我想触发一个touchstart元素上的事件 这会触发touchstart event var e document createEvent MouseEvent e initMouseEvent
  • 无法读取未定义的属性“搜索”

    我正在尝试制作一个使用 YouTube API 的脚本 我输入了一个关键字 youtube api 找到视频 gt 脚本获取第一个结果并返回 VideoID 现在我的问题是 当我按下提交按钮时 搜索功能不会被触发 有谁知道这可能是什么原因
  • 有没有类似于 iOS 的 canOpenURL 来检查移动浏览器的 URL 方案? [复制]

    这个问题在这里已经有答案了 可能的重复 iPhone Safari 检查 JavaScript 是否支持 URL 方案 https stackoverflow com questions 627916 iphone safari check
  • 以编程方式更改 html 选择下拉列表后 onchange 不会触发

    我在 HTML 中有一个选择
  • 如何正确使用react-router-dom中的useHistory()?

    如何使用useHistory 正确吗 我无法从一个反应组件过渡到另一个反应组件 根据 React 文档以及 Stack Overflow 上的说明 我无法从 App js 转换到 MyComponent js 例如 我正在尝试 App js
  • 我需要 Selenium JavascriptExecutor 通过 jquery 返回一个元素

    我对此束手无策 我确信答案很简单 但我就是想不出来 当我将其放入 google Chrome 的控制台时 我有一个 jquery 选择器可以完美地找到和元素 answer label contains Yes 现在我想用它来检索 WebDr
  • 在 Angular 5 中,如何从父组件访问动态添加的子组件?

    我正在开发一个 Ionic Angular 5 项目 我需要动态加载一些组件 继动态组件加载器示例 https angular io guide dynamic component loader在 Angular 文档中 我能够成功加载组件
  • 生成两个日期内的随机日期数组的优雅方法

    我有一个日期选择器 其中显示两个月 我想在每个可见月份中随机选择 3 个日期 date datepicker minDate new Date dateFormat DD MM d yy constrainInput true before
  • 使用源映射 Unuglify js 文件

    我是新来的JavaScript并遇到了这种最小化的做法javascript文件 然而 我在网上或 VS 代码中找不到任何可以使用附加源文件最大化我的 js 代码的工具 这是我拥有的文件 a js webpackJsonp 1 681 fun
  • 更改元素的顺序

    我正在创建一个浮动宽度的网站 用户在智能手机上使用从全高清分辨率到约 600 像素的屏幕 这似乎是一个不错的主意 这就带来了一个非常有趣的问题 当用户使用比最佳分辨率更小的分辨率时 页面的高度会增加很多 这意味着更改某些元素 例如某些图像
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • 使用 JavaScript 比较两个日期未按预期工作[重复]

    这个问题在这里已经有答案了 这是我的 JavaScript 代码 var prevDate new Date 1 25 2011 the string contains a date which comes from a server si
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些

随机推荐

  • Linux和UNIX“新手”们必备的与Linux系统编程相关的基本概念

    1 操作系统的核心 内核 术语 操作系统 通常包含两种不同含义 1 指完整的软件包 这包括用来管理计算机资源的核心层软件 以及附带的所有标准软件工具 诸如命令行解释器 图形用户界面 文件操作工具和文本编辑器等 2 在更狭义的范围内 是指管理
  • 用Android studio 2.3调度程序时提示“Installation failed with message Failed to establish session”错误,需要在在开发者选项

    用Android studio 2 3调度程序时提示 Installation failed with message Failed to establish session 错误 需要在在开发者选项里关闭MIUI优化
  • 【以太网硬件二十一】USXGMII是什么?-Part2

    个人主页 highman110 作者简介 一名硬件工程师 持续学习 不断记录 保持思考 输出干货内容 目录 PCS功能细节 XGMII到USXGMII的映射 带内配置和状态信号 自协商相关 电气特性 PCS功能细节 USXGMII把并行的X
  • Apache Flink Flink Time & Window 解析

    一 Window Time 介绍 Apache Flink 以下简称 Flink 是一个天然支持无限流数据处理的分布式计算框架 在 Flink 中 Window 可以将无限流切分成有限流 是处理有限流的核心组件 现在 Flink 中 Win
  • call、apply、bind的区别

    为什么要改变this的指向 var name codereasy let obj name 张三 say function console log this name obj say setTimeout obj say 10 正常情况下
  • linux I/O优化 磁盘读写参数设置

    转载 http wlservers blog 163 com blog static 120622304201241715945256 关于页面缓存的信息 可以用 cat proc meminfo 看到 其中的Cached 指用于pagec
  • Java Maven安装及环境配置教程

    一 安装 1 安装包 apache maven 3 6 3 安装包下载地址 2 下载安装包然后直接解压就行 注意 文件的位置路径不能有中文 二 环境配置 1 用户变量 双击Path 点击新建 将如下复制进去 然后点击确定 MAVEN HOM
  • opencv实战项目 手势识别-手部距离测量

    手势识别系列文章目录 手势识别是一种人机交互技术 通过识别人的手势动作 从而实现对计算机 智能手机 智能电视等设备的操作和控制 1 opencv实现手部追踪 定位手部关键点 2 opencv实战项目 实现手势跟踪并返回位置信息 封装调用 3
  • Spark数据分析之pyspark

    一 大数据简史 从hadoop到Spark 1 hadoop的出现 1 问题 1990年 电商爆发以及机器产生了大量数据 单一的系统无法承担 2 办法 为了解决 1 的问题许多公司 尤其是大公司领导了普通硬件集群的水平扩展 3 执行 had
  • HashCode方法的调用对Java锁的影响

    在回顾以前写的锁升级的代码时 意外发现hashCode方法的调用会对锁产生影响 于是做了几个测试并查阅了一些资料 把最终的结果记录于此 结论 首先上结论 一个对象在调用原生hashCode方法后 来自Object的 未被重写过的 该对象将无
  • qt可停靠控件和工具栏(Dock Widgets and Toolbars)

    可停靠控件能够停靠在QMainWindow中或者作为一个独立窗口浮动 QMainWindow提供了四个可停靠控件的地方 上方 下方 左方 右方 Microsoft Visual Stadio程序和Qt Linguist程序使用大量的可停靠窗
  • python 函数中的省略号

    1 省略号在python里也是个对象 2 赋值号后面省略号 给该变量赋值一个default值 具体python的机制我不清楚 应该是在类里面定义好的 或者参数省略 3 冒号后面省略号 表示函数的定义内容不写了 函数的定义内容不写了 相当于p
  • PTA6(python)

    python程序设计06 面向对象 7 1 求两点之间距离 7 2 类的定义和使用 7 3 优异生查询 类和对象 7 4 新型计算器 7 5 学生类的使用 7 6 三维向量运算 7 7 继承类应用 7 8 有关队列操作 7 9 有关堆栈操作
  • python调用everything批量查找表格中的文件名在磁盘中是否存在

    python调用everything批量查找表格中的文件名在磁盘中是否存在 介绍 Everything 配置 使用openpyxl读写文件 读文件 写文件 BeautifulSoup的使用 创建 beautifulsoup 对象 soup
  • 基础实验篇

    uORB是PX4 Pixhawk系统中非常重要且关键的模块之一 是用于无人机模块间通信的协议机制 本篇将详细介绍uORB并详细拆解uORB消息读写与自定义实验流程 三 基础实验篇 uORB消息读写与自定义实验 三 01 基于RflySim平
  • 代码随想录一刷-Day01

    代码随想录一刷 Day01 LeetCode704 二分查找 这道属于是入门必刷了 但是虽然能做出来 在细节上还是不够注意 public int search int nums int target if nums null nums le
  • @excel注解_EasyPOI 详细教程以及注解的使用

    因为项目的原因需要用到POI来操作Excel 文档 以前都是直接使用POI来操作的 但是最近听到easypoi的存在 所以自己简单的尝试了下 别说 他还真的挺好用的 Easypoi介绍 Easypoi 为谁而开发 不太熟悉poi的 不想写太
  • LocalDate的用法与String互转

    一 LocalDate常用用法 1 1 申明定义 LocalDate formatDate LocalDate of 2020 2 5 自定义 LocalDate today LocalDate now 获取当前日期 1 2 getX 获取
  • WebRTC实时音视频技术的整体架构介绍

    WebRTC 简介 WebRTC 名称源自网页实时通信 Web Real Time Communication 的缩写 是一个支持网页浏览器进行实时语音通话或视频聊天的技术 是谷歌2010年以6820万美元收购Global IP Solut
  • Echarts 无数据时显示“暂无数据”

    当我们的图表遇到接口数据为空或者筛选之后无数据的情况 会显示成这样 就比较丑 所以需要更换成指定的某些文字做提示 通过配置title 曲线救国 title show true text 暂无数据 left center top center