ECharts:显示暂无数据

        ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求,实现各种炫酷的统计图表效果。

        如上图所示,有数据的时候固然好看,但是当它没有数据的时候,就是光秃秃的一片,所以很多时候会有显示“暂无数据”的需求。具体如何实现呢?

实现思路

逻辑误区

在结合Vue、React等前端框架开发时,很容易陷入到v-show/v-if解决这种条件渲染的思维逻辑中,所以很容易会想到,使用两个DOM元素,一个作为ECharts图表的绘制容器;另一个作为“暂无数据”文字的承载容器,然后将两者的CSS样式设置为相同的,最后使用v-show或者v-if进行“条件渲染”即可。

        这种思路其实是不可取的,先来分析一下存在的问题:

【1】v-show:底层是对display:“none”的实现,只是简单的基于CSS的条件渲染,并没有真正意义上的销毁DOM元素,换句话说:DOM元素依旧还占据着原来的位置,从页面布局上来讲就是不合理的;

【2】v-if:底层是基于DOM API对元素本身的添加append和卸载remove操作,存在一个局部性的装载/卸载的过程,逻辑上是行得通的;但是DOM元素来回的加载和卸载,存在更高的性能消耗。并且,v-if和echarts图表一起使用,稍有不慎就会遇到找不到DOM容器的报错。

ECharts:借助setOption()万能接口实现

在进行ECharts的数据替换或者说是图表刷新时,我们经常性的回去重置options配置对象。

        以上操作的可借鉴之处在于:options本身就决定了图表本身显示的内容,可以直接替换掉原来的options,让它只显示四个文字“暂无数据”即可。

        ECharts称setOption方法为“万能方法”,

(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
or
(option: Object, opts?: {
    notMerge?: boolean;
    replaceMerge?: string | string[];
    lazyUpdate?: boolean;
})

        有一个关键的注意点:ECharts图标实例会自动合并前后设置进去的options对象,所以,我们还要想办法让它不合并。

设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

setOption可选参数

 

        ECharts官网文档给出了解释:

①notMerge:设置为true,就可以避免多个options配置项之间的自动合并。

②lazyUpdate:避免同步更新,延迟到下一帧画面采取更新,暂时将其归属到性能优化的范畴。

示例代码:

        整理完思路之后,我们来写一个示例代码,

const dataList = [];
const flag = Array.isArray(dataList) && dataList.length != 0;
const containerDom = document.getElementById(containerId);
if (!!containerDom === false) return;
var myChart = echarts.init(containerDom);
//options配置项
let options = {}
if(flag){
    //如果有数据,设置options(可以在data里面定义一个全局的模板,只做局部替换即可)
    options = {
        //TODO:图表配置,略...
    }
}else{
    //没有数据或者数据不合法,显示暂无数据
    option = {
          title: {
            text: '暂无数据',
            x: 'center',
            y: 'center',
            textStyle: {
              fontFamily: 'Manteka',
              fontSize: '12',
              fontWeight: 'normal',
              color: '#fff'
            }
          }
        }
      }
}       
// 使用刚指定的配置项和数据显示图表-参数2设置为true,避免多个版本的options自动合并
myChart.setOption(option, true);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/139530.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【SpringBoot3+Vue3】一【基础篇】

目录 一、Spring Boot概述 1、Spring Boot 特性 1.1 起步依赖 1.2 自动配置 1.3 其他特性 1.3.1 内嵌的Tomcat、Jetty (无需部署WAR文件) 1.3.2 外部化配置 1.3.3 不需要XML配置(properties/yml) 二、Spring Boot入门 1、一个入门程序需求 2、步骤 2.1 创建Maven工…

朋友圈折叠·怎么办?

1.定时发圈 编辑好内容选定不同时间自动发送,防止太集中发好几条或者忘记发圈。在右侧选择要发圈的号和自定义时间。 2.自动跟圈 系统折叠朋友圈很大一部分原因就是检测到这段话是复制粘贴的文字。 设置跟圈后,可以让您系统上的微信,自动转…

郑州大学2020级信息安全专业——保研小结

最终上岸 夏令营: 夏令营开始的时间一般比较早,在期末考试之前就已经开始了,需要提前联系导师,有的学校是弱com,导师愿意要你入营的概率和优营的概率就会比较大,因此要提前联系导师,复习好项目…

rhcsa-权限

文件目录 r 读取权限 可以列出目录下的文件 w 修改权限 可以进行创建和删除等操作 x 执行权限 能进入到该目录/切换到该目录 - 没有权限 没有权限 chmod change mod 作用:修改文件或目录的权限 语法&…

【MySQL】事务(上)

文章目录 事务概念什么是事务?为什么要有事务?事务的版本支持事务的提交方式事务常见操作方式基本操作 事务概念 mysql 本身内部采用 多线程的方式,来实现数据存储 相关的工作 就注定对数据 有并发访问的场景 为了解决这类问题,就…

Jenkins在Linux环境下的安装与配置

Jenkins是一个开源软件项目,是基于Java开发的一种持续集成(CI)工具,用于解决持续重复的部署、监控工作;它一个开放易用的软件平台,大大简化软件的持续集成。 安装Jenkins 1.使用docker安装 2.本地下载je…

网易有道上线“易魔声” 开源语音合成引擎 用户可免费下载使用

网易有道上线“易魔声” 开源语音合成引擎 用户可免费下载使用 刚刚,我们上线了「易魔声」开源语音合成(TTS)引擎!🎉🎉🎉 「易魔声」,是一款有道自研TTS引擎,目前支持中…

ACM练习——第一天

因为最近要去农大参加他们的算法邀请赛,然后赛制是ACM赛制的,所以我就直接很迷茫。 然后我就找到了牛客的ACM练习题,好好的练习一下ACM写法,而且我还要被迫写C,哭了。 开始钻研 1.从Java过度到C 题目源于牛客网&…

MTK手机平台充电原理

EPT GPIO初始化文件 bsp_gpio_ept_config.c 1 知识点总结 1.1 Official 参考充电电路 Figure 1-1 参考电路 VCHG:USB正极 VCDT:VCHG Charger Detect充电电压检测脚 ISENSE:充电电流检测电阻的正极 BATSNS:充电电流检测电阻的负极 …

洗地机哪个牌子最好用?洗地机怎么选?2023洗地机选购推荐

家里有小孩或者是养有宠物的都有一个深刻的体验,那就是房子每天都很乱,隔三岔五就得做一次卫生清理、地板杀菌等。如果是房屋面积太大的话,只靠自己手动清洁是非常的耗时间并且还很劳累。洗地机的出现可谓是造福人类,解脱了家庭劳…

多个微信快速同步发圈

做营销最重要的任务是什么? 毋庸置疑,就是发布朋友圈。 为什么要发圈呢? 现在社交媒体中,微信不管在生活上、工作上都是不可或缺的工具,而朋友圈是微信中社交场景之一,也是很多企业作为推广产品和服务的重…

copilot 产生 python工具函数并生成单元测试

stock.py 这个文件,我只写了注释(的开头),大部分注释内容和函数都是copilot # split a string and extract the environment variable from it # input can be , pathabc, pathabc;pathdef, pathabc;pathdef;pathghi # output i…

电商平台api接口,淘宝/天猫、1688、拼多多、亚马逊等电商数据平台api接口演示案例

API简单来说是一种数据的传输方式,使用已经开发好的API接口可以缩短项目时间,减少开发成本。 比如说数据宝平台提供的实名认证API接口,像这种实名认证类的API接口是无法自行开发的,如果自行对接部委,能否成功不说&…

利用LangChain实现RAG

检索增强生成(Retrieval-Augmented Generation, RAG)结合了搜寻检索生成能力和自然语言处理架构,透过这个架构,模型可以从外部知识库搜寻相关信息,然后使用这些信息来生成response。要完成检索增强生成主要包含四个步骤…

Android权限动态申请(包括悬浮窗)

目录 效果图 一、环境配置 二、新建工具类 三、开始使用 备注(一):用户手动设置权限 手动设置效果图 备注(二):在Fragment中如何调用动态权限申请 备注(三):悬浮窗…

软件外包开发的需求表达方法

软件开发需求的有效表达对于项目的成功至关重要。无论选择哪种需求表达方法,清晰、详细、易于理解是关键。与开发团队建立良好的沟通渠道,确保他们对需求有充分的理解,并随着项目的推进及时调整和更新需求文档。以下是一些常用的需求表达方法…

CMT2300A超低功耗127-1020MHz Sub-1GHz全频段SUB-1G 射频收发芯片

CMT2300A超低功耗127-1020MHz Sub-1GHz全频段SUB-1G 射频收发芯片 Sub-1GHz,是指小于1GHz频率的统称。Sub-1GHz无线电频段应用的主要特点:(1)频率较低波长较长,传输距离远,穿透性强;&#xff0…

互联网Java工程师面试题·微服务篇·第一弹

目录 ​编辑 1、您对微服务有何了解? 2、微服务架构有哪些优势? 3、微服务有哪些特点? 4、设计微服务的最佳实践是什么? 5、微服务架构如何运作? 6、微服务架构的优缺点是什么? 7、单片&#xff0c…

本地PHP搭建简单Imagewheel私人云图床,在外远程访问——“cpolar内网穿透”

文章目录 1.前言2. Imagewheel网站搭建2.1. Imagewheel下载和安装2.2. Imagewheel网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar临时数据隧道3.2.Cpolar稳定隧道(云端设置)3.3.Cpolar稳定隧道(本地设置) 4.公网访问测…
最新文章