echarts系列:echarts增加loading

背景

最近在大屏项目研发时,存在多个echarts图表,有些接口获取数据较慢,需要加loading样式;

解决方案

翻阅api,找到showLoading可进行设置

参考: 加载动画效果

显示加载动画效果。可以在加载数据前手动调用该接口显示加载动画,在数据加载完成后调用 hideLoading 隐藏加载动画。

参数:
type
可选,加载动画类型,目前只有一种’default’

opts
可选,加载动画配置项,跟type有关,下面是默认配置项:

default: {text: 'loading',color: '#c23531',textColor: '#000',maskColor: 'rgba(255, 255, 255, 0.8)',zlevel: 0,// 字体大小。从 `v4.8.0` 开始支持。fontSize: 12,// 是否显示旋转动画(spinner)。从 `v4.8.0` 开始支持。showSpinner: true,// 旋转动画(spinner)的半径。从 `v4.8.0` 开始支持。spinnerRadius: 10,// 旋转动画(spinner)的线宽。从 `v4.8.0` 开始支持。lineWidth: 5,// 字体粗细。从 `v5.0.1` 开始支持。fontWeight: 'normal',// 字体风格。从 `v5.0.1` 开始支持。fontStyle: 'normal',// 字体系列。从 `v5.0.1` 开始支持。fontFamily: 'sans-serif'
}

代码部分

		  const myChart = this.$echarts.init(chart)myChart.showLoading({text: 'loading',color: 'rgba(20, 149, 247, 0.7)',	//设置加载颜色textColor: '#000',maskColor: 'rgba(255, 255, 255, 0.2)',zlevel: 0})setTimeout(() => {// setOption前隐藏loading事件myChart.hideLoading()myChart.setOption(option, true)window.addEventListener('resize', function () {myChart.resize()})this.$on('hook:destroyed', () => {window.removeEventListener('resize', function () {myChart.resize()})})}, 1000)

实现效果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

10个优秀的Github开源项目

1Panel 是一个现代化、开源的 Linux 服务器运维管理面板 EX-chatGPT-精准搜索工具 feishu-chatgpt-飞一般的工作体验工具 Knife4j-是一个集Swagger2 和 OpenAPI3为一体的增强解决方案 Kooder 是 Gitee 团队开发的一个代码搜索系统 mtbird 是一款低代码可视化页面生成器 S…

docker一键部署若依前后端分离版本

比如这里把文件放到/xin/docker/jiaoZ/的目录下,jar包和下面的配置文件都放在这个文件夹下。 注意要把jar端口改为你实际启动的,映射端口也可以改为你想要的。 这里的映射端口为:nginx监听80端口,jar在8620端口,mysq…

Emotion Prompt-LLM能够理解并能通过情感刺激得以增强

Large Language Models Understand and Can be Enhanced by Emotional Stimuli 情感智能对我们的日常行为和互动产生了显著的影响。尽管大型语言模型(LLMs)被视为向人工通用智能迈进的一大步,在许多任务中表现出色,但目前尚不清楚…

matlab 条件数的倒数

目录 一、概述1、算法概述2、主要函数3、参考文献二、条件设置错误的矩阵的敏感度三、求解单位矩阵的条件四、参考链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、概述 1、算法概述

.locked勒索病毒是什么,企业数据被加密了如何恢复?

.locked勒索病毒介绍 .locked勒索病毒是一种恶意软件,它利用加密技术锁定用户的数据或系统,并以此进行勒索。用户一旦感染此病毒,将无法访问其重要文件,病毒会要求用户支付一笔赎金以获取解密密钥。这种病毒通常使用强大的加密算法…

PMP证书可以挂靠?

PMP项目管理是由美国项目管理协会(PMI)提出的,针对项目管理专业人士的资格认证。它被公认为全球项目管理领域含金量最高的认证,与MBA、MPA并列为三大就业金字招牌。PMP认证在全球190多个国家及地区得到高度认可。通过PMP认证考试可…

面试常问:为什么 Vite 速度比 Webpack 快

前言 最近作者在学习 webpack 相关的知识,之前一直对这个问题不是特别了解,甚至讲不出个123....,这个问题在面试中也是常见的,作者在学习的过程当中总结了以下几点,在这里分享给大家看一下,当然最重要的是…

什么是Java语言的反射机制?

什么是反射 反射(Reflection)主要是指程序可以访问、检测和修改它本身状态或行为的一种能力。(就像照镜子反射一样) Java反射机制是指在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法&…

docker -compose运行时端口被占用异常

解决方法:在docker-compose.yml文件中去掉端口的配置(去掉下图圈住部分),我们要启动5个,配置了端口我们只能启动一个,所以就会报错

Android Studio实现内容丰富的安卓教学学习平台

获取源码请点击文章末尾QQ名片联系,源码不免费,尊重创作,尊重劳动 项目编号088 1.开发环境 android stuido3.6 jak1.8 eclipse mysql tomcat 2.功能介绍 安卓端: 1.注册登录 2.查看教学视频资料 3.播放教学视频 4.浏览作业&#…

超清gif怎么制作?教你制作gif动图的小窍门

Gif动画作为当下非常受欢迎的一种图片格式,在各种社交软件中也经常的常见。而制作gif动图也没有大家想象的那么难,只需要使用gif动态图片制作(https://www.gif.cn/)工具,不用下载软件。上传jpg、png格式的图片&#xf…

奶瓶哪个品牌质量比较好?五大热销奶瓶实力全解析

相信每个宝妈宝爸在选奶瓶的时候都犹豫住了,市面上的款式和品牌五花八门,完全不知道怎么选。而且还有很多商家为了减少成本花销,开始采用大量不耐高温、不防腐蚀的材料进行加工,如果选到这种没有经过优化过的产品带回家&#xff0…

AcWing 796. 子矩阵的和

这个题的重点是仿照一维的数组,所以a[N][N]也是从1索引开始的。画个图举个例子就非常清晰了 之所以不好理解是因为没画格子,一个格子代表一个点,就很好理解了。 java代码: import java.io.*; public class Main{static int N 1…

C语言经典算法-5

文章目录 其他经典例题跳转链接26.约瑟夫问题(Josephus Problem)27.排列组合28.格雷码(Gray Code)29.产生可能的集合30.m元素集合的n个元素子集 其他经典例题跳转链接 C语言经典算法-1 1.汉若塔 2. 费式数列 3. 巴斯卡三角形 4. …

如何在 Postman 中执行断言测试?

在当今的软件构建流程中,应用程序编程接口,简称 API,起到了不可或缺的作用,它们使得不同的软件应用能够互相沟通和交换数据。随着应用程序的不断演进变得越发复杂,保障API的可靠性及其稳定性显得格外关键。正因如此&am…

【NLP】关于Transformer模型的一些认知

目录 一. Transformer模型简介 二. Transformer模型的架构 1. 编码器: 2. 解码器: 三. Transformer模型中残差连接层的作用 四. Transformer模型中, 输入部分的位置编码(PisitionalEncoding)矩阵为什么要使用三角函数对奇数…

人脸聚类原理和算法解释

人脸聚类是指将大量人脸图像根据它们的相似性分组到不同的群集中的过程。人脸聚类通常利用人脸的特征向量表示来度量人脸之间的相似性,并将相似的人脸图像聚集在一起。 以下是人脸聚类的一般原理: 人脸特征提取:对每张人脸图像提取特征向量。…

美摄科技剪同款SDK解决方案全面升级

视频内容已成为企业宣传、品牌塑造和市场营销的重要载体。然而,如何快速、高效地制作出高质量的视频内容,成为摆在众多企业面前的一大难题。针对这一挑战,美摄科技凭借深厚的技术积累和创新能力,推出了全新的剪同款SDK解决方案&am…

亮数据Bright Data,跨境电商一站式解决方案

目录 一、跨境电商的瓶颈1、技术门槛2、语言问题3、网络稳定性4、验证码处理和自动识别5、数据安全6、法律法规 二、机不可失三、动态住宅代理1、网络代理2、动态住宅代理3、动态住宅代理的主要优点 四、动态住宅代理的使用场景五、如何使用亮数据动态代理1、开始使用2、添加新…

上海王梓标准件制造有限公司隆重参加上海紧固件专业展

随着全球工业制造业的高速发展,标准件行业做为基础部件的供应链环节越来越受到重视。标准件,这类微不足道的小零件,在维护工业世界的稳定和发展中是至关重要的。在这样一个紧要关头,上海王梓标准件制造有限公司(下称“…