使用echarts当数据为空时展示空状态占位图

2023-11-12

在开发echarts的时候我们不得不考虑数据为空的情况,其实有很多种解决办法,我自己是这样做的,有更好的办法请私信我,共同学习。
大概长这样:
在这里插入图片描述

创建你的utils:

export const setNotopt = (demo,subtext = '暂无数据')=> {
    var option = {
        title: {
            text: ' {a|}',
            x: 'center',
            y: 'center',
            subtext,
            itemGap: -20,
            textStyle: {
                rich: {
                  a: {
                    color: '#000',
                    fontSize: '16',
                    height: 80,
                    width: 160,
                    backgroundColor: {
                      image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbFJ1bGU9ImV2ZW5vZGQiPg0KICAgIDxlbGxpcHNlIGZpbGw9IiNkZGQiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3IiAvPg0KICAgIDxnIGZpbGxSdWxlPSJub256ZXJvIiBzdHJva2U9IiM5OTkiPg0KICAgICAgPHBhdGgNCiAgICAgICAgZD0iTTU1IDEyLjc2TDQ0Ljg1NCAxLjI1OEM0NC4zNjcuNDc0IDQzLjY1NiAwIDQyLjkwNyAwSDIxLjA5M2MtLjc0OSAwLTEuNDYuNDc0LTEuOTQ3IDEuMjU3TDkgMTIuNzYxVjIyaDQ2di05LjI0eiIgLz4NCiAgICAgIDxwYXRoDQogICAgICAgIGQ9Ik00MS42MTMgMTUuOTMxYzAtMS42MDUuOTk0LTIuOTMgMi4yMjctMi45MzFINTV2MTguMTM3QzU1IDMzLjI2IDUzLjY4IDM1IDUyLjA1IDM1aC00MC4xQzEwLjMyIDM1IDkgMzMuMjU5IDkgMzEuMTM3VjEzaDExLjE2YzEuMjMzIDAgMi4yMjcgMS4zMjMgMi4yMjcgMi45Mjh2LjAyMmMwIDEuNjA1IDEuMDA1IDIuOTAxIDIuMjM3IDIuOTAxaDE0Ljc1MmMxLjIzMiAwIDIuMjM3LTEuMzA4IDIuMjM3LTIuOTEzdi0uMDA3eiINCiAgICAgICAgZmlsbD0iI2UxZTFlMSIgLz4NCiAgICA8L2c+DQogIDwvZz4NCjwvc3ZnPg==',
                    }
                  },
                }
            },
            subtextStyle: {
              fontSize: 16,
            }
        }
    }
    demo.setOption(option,true)
  }

在使用的页面引入:

import { setNotopt } from ‘@/util/utils.js’

在接口返回后 使用:

        if (res.data.length == 0) {
          return setNotopt(chartDom,'糟糕!数据找不到了')
        }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用echarts当数据为空时展示空状态占位图 的相关文章

随机推荐

  • k8s yaml文件

    简介 YAML IPA j m l 尾音类似camel骆驼 是一个可读性高 用来表达资料序列的编程语言 YAML参考了其他多种语言 包括 XML C语言 Python Perl以及电子邮件格式RFC2822 Clark Evans在2001
  • C++基础之初始化、输入输出安全问题及常量问题

    一 C 统一初始化 初始化列表 解决方案 例1 int main int a 10 int b 10 int c 10 初始化列表 int arr 10 1 2 4 5 6 int brr 10 1 2 3 4 5 6 int crr 1
  • GAMES101回顾 -- Geometry

    Geometry Examples of geometry 隐式几何 Inplict 定义 用函数进行表示 如 f x y z 0 显式几何 Explict 定义 所有点都是直接或通过参数映射给出 所有的 u v 映射到对应的 x y z
  • 【毕业设计】爱琴海——基于HTML5的婚庆用品商城网页设计

    一 内容简介 一 背景与意义 婚俗 是指结婚的风俗 各国各族人民按照自己的习俗 举行各具特色的婚礼 具有各自浓厚的民族独特风采 婚俗元素在是中国婚俗文化的媒介 承载了中华儿女对幸福和吉祥的追求 在中国婚俗文化的发展过程中 婚庆用品设计一直在
  • 题目 2307: 蓝桥杯2019年第十届省赛真题-灵能传输

    题目 在游戏 星际争霸 II 中 高阶圣堂武士作为星灵的重要 AOE 单位 在 游戏的中后期发挥着重要的作用 其技能 灵能风暴 可以消耗大量的灵能对 一片区域内的敌军造成毁灭性的伤害 经常用于对抗人类的生化部队和虫族的 刺蛇飞龙等低血量单位
  • Android卡顿分析中常见的log

    1 看内存 bugreport 开始的时候有pss的信息 并且进行排序 之后会写一个解析和计算的 2 找system log中关键部分 一般设备hang 住的时候用户会疯狂按keycode 可以找相关log keyCode 3 down t
  • 工作与生活如何平衡?

    工作与生活如何平衡 最近忙的有些不像话了 完全没时间可以让自己慢下来思考一些事情 一方面 最近一直感觉自己身体不舒服 一方面 工作上的压力越来越大 要承担的东西也越来越多 生活 发现自己身体体质变差也有一段时间了 从一开始的小腿长时间有酸痛
  • PackageManagerService启动及初始化流程

    PackageManagerService也是有ServerThread启动的 运行在system process进程 我们先来看下PackageManagerService是怎么启动的 PackageManagerService的启动需要
  • 数据结构小白之稀疏数组

    说在前面 这部分笔记是边学习韩顺平老师的图解数据结构与算法边整理出来的 其中也加入了一些拙见 希望2019的暑假可以让自己的编程基础更加扎实 稀疏数组 概念 应用实例 代码 二维数组转稀疏数组 代码 稀疏数组转二维数组 概念 当一个数组中的
  • react 中引入 ant-design

    react 中引入 ant design 一 安装 二 引入 1 全局引入 2 按需加载 手动按需加载 使用 babel plugin import 按需加载 1 运行 npm run eject 暴露出webpack的配置文件 项目会多出
  • 做一个微信小程序的完整流程

    一 引言 最近在帮朋友开发一个小程序 都说今年是小程序快速发展的一年 不懂技术的人 大部分零售店面都开始想做一个小程序帮助推广销售 虽然小程序技术门槛没那么高 但自己独立做一个小程序还是需要了解的内容比较多的 帮朋友做的是一个电商小程序 下
  • android 文件下载

    Download java中放入的是程序的主体 util包中放入的是一些公用的方法 其中FileUtils java放入的是对文件的一些基本操作 HttpDownloader java中是对下载的一些基本操作 第一步 先来看看主程序部分 p
  • 泪目!阿里大佬国庆8天花了50个小时,整理出这份18万字Android-360°性能优化实战解析

    缘起 经过近十年的发展 Android技术优化日新月异 如今Android 10 0 已经发布 Android系统性能也已经非常流畅 可以在体验上完全媲美iOS 到了各大厂商手里 改源码 自定义系统 使得Android原生系统变得鱼龙混杂
  • es AggregationBuilders 聚合查询

    es的聚合查询 聚合的分类 DSL语言实现Bucket聚合 DSL实现Metrics聚合 结合Bucket 在项目中遇到一块关于es的多条件聚合的代码 如下 AggregationBuilders terms agg name field
  • JAVA中String的用法详解

    创建字符串的几种方法 1 直接赋值 String s HelloWord 2 使用构造方法 2 1 根据传入的字符串创建字符串对象 String s new String HelloWord 2 2 根据字符数组创建字符串对象 char v
  • 如何更改ElementUI组件的图标大小以及标签属性

    话不多说 直接上菜 ElementUI提供的Rate评分组件的默认大小是这样的 图标太小了 想设置宽高 行高 尺寸 但代码不起作用 打开浏览器调试 发现是用font size设置才有用 由此代码存在优先级问题 要提高优先级 css中使用 g
  • CMakeLists.txt实例和语法介绍

    帮助文档 1 官方文档 一 实例 1 实例介绍 构建一个简单的加减法运算 需要调用静态库和动态库的实例 将add编译为静态库 sub编译为动态库 目录架构 gt tree LF 2 add add build sh add cpp add
  • urllib.error.URLError: 「urlopen error [Errno 11004] getaddrinfo failed」

    代码 import seaborn as sns anscombe sns load dataset tips print anscombe 报错 urllib error URLError
  • 关于单片机ADC采样参考电压应注意事项

    问题描述 工程和品质部反应现场安装的水表有水量跳变的情况 就是基表上显示0吨 远程抄读水量的时候电子读数是4400 4000 4440等错误的数字 在排除了传感器板本身晶圆损坏的情况下 发现还有几只表总是存在电子读数错误 而且这种错误发生在
  • 使用echarts当数据为空时展示空状态占位图

    在开发echarts的时候我们不得不考虑数据为空的情况 其实有很多种解决办法 我自己是这样做的 有更好的办法请私信我 共同学习 大概长这样 创建你的utils export const setNotopt demo subtext 暂无数据