Echarts异步数据与动画加载

news/2024/5/19 21:49:39/ 标签: echarts, 前端, javascript

目录

简介

头部代码

这段代码是使用 Echarts 绘制图表的关键部分。首先,初始化了一个 Echarts 实例。然后,通过 Ajax 请求获取数据,并基于此设置图表选项。其中包括颜色、背景色、标题、提示框、图例以及饼图的具体配置。

具体解释如下:

开启动画效果

关闭动画效果并且设置时间(比例、1000:1秒)

完整代码

运行图片

vscode下载插件(Live Preview)

浏览器转圈圈不出现图表解决方法

复制到浏览器直接打开


简介

在这篇博客中,我将分享如何使用 Echarts 库来绘制咖啡店各年订单的饼图。通过直观的图表展示异步数据与动画加载,可以更清晰地了解不同年份的销售情况。

使用了echarts.js以及jquery-3.3.1.js需自行下载

这段代码是网页的头部和主体部分,包含了必要的元标签、Echarts 和 jQuery 库的引用,以及一个用于显示图表的 div 元素。

头部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="js/echarts.js"></script><script src="js/jquery-3.3.1.js"></script><div id="main" style="width: 600px;height: 400px;"></div><title>发财糕的异步数据与动画加载</title>
</head>
<body>

这段代码是使用 Echarts 绘制图表的关键部分。首先,初始化了一个 Echarts 实例。然后,通过 Ajax 请求获取数据,并基于此设置图表选项。其中包括颜色、背景色、标题、提示框、图例以及饼图的具体配置。

var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.get("js/咖啡店各年订单.json",function(data){myChart.setOption({color: ['#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8','#4586d8', '#4f68d8',],backgroundColor: '#d6ecf0', // 配置背景色,rgba 设置透明度 0.1title: {text: '咖啡店年销',x:'center'},tooltip: {trigger: 'axis',axisPointer:{type:'shadow'}},legend: {height:20,width:2,type: 'croll',//过多类型时自适应分页显示width:'50%',orient: 'horizontal',//方向 horizontal 水平显示,vertical 垂直显示bottom: 'bottom',//图片底部 left: 'top',左上, right: 'top' 右上,icon: 'circle',data: ['2017 年','2018 年', '2019 年', '2020 年', '2021 年', '2022 年'],},series: [{          name:'咖啡年销量',type:'pie',radius:'66%',//center:['58%','55%'],orient: 'horizontal',colockWise:true,data:data.data}]});
});
setTimeout(function(){myChart.hideLoading();
},1000)
</script>

具体解释如下:

  • color:定义了饼图的颜色。
  • backgroundColor:设置背景色及其透明度。
  • title:指定图表标题和位置。
  • tooltip:确定提示框的触发方式和指针类型。
  • legend:配置图例的各项属性,如高度、宽度、显示类型、位置等。
  • series:定义饼图的名称、类型、半径、方向等,并传入数据。

开启动画效果

myChart.showLoading();

关闭动画效果并且设置时间(比例、1000:1秒)

setTimeout(function(){myChart.hideLoading();
},1000)

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="js/echarts.js"></script><script src="js/jquery-3.3.1.js"></script><div id="main" style="width: 600px;height: 400px;"></div><title>发财糕的异步数据与动画加载</title>
</head>
<body><script text="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));myChart.showLoading();$.get("js/咖啡店各年订单.json",function(data){myChart.setOption({color: ['#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8','#4586d8', '#4f68d8',],backgroundColor: '#d6ecf0', // 配置背景色,rgba设置透明度0.1title: {text: '咖啡店年销',x:'center'},tooltip: {trigger: 'axis',axisPointer:{type:'shadow'}},legend: {height:20,width:2,type: 'scroll',//过多类型时自适应分页显示width:'50%',orient: 'horizontal',//方向horizontal水平显示,vertical垂直显示bottom: 'bottom',//图片底部 left: 'top',左上, right: 'top' 右上,icon: 'circle',data: ['2017年','2018年', '2019年', '2020年', '2021年', '2022年'],},series: [{          name:'咖啡年销量',type:'pie',radius:'66%',//center:['58%','55%'],orient: 'horizontal',colockWise:true,data:data.data}]});});    setTimeout(function(){myChart.hideLoading();},1000)</script>
</body>
</html>

运行图片

vscode下载插件(Live Preview)

这样就可以在Vscode下实时观看运行效果了

浏览器转圈圈不出现图表解决方法

复制如图本地文件链接

复制到浏览器直接打开

通过以上步骤,我们成功地将咖啡店每年的订单数据以饼图形式展现出来,实现了数据的可视化。

希望这篇博客能为您提供帮助!如有任何疑问或建议,欢迎随时留言。


http://www.ppmy.cn/news/1434677.html

相关文章

《智能前沿:应对ChatGPT算力挑战》

在全球人工智能热潮中&#xff0c;以 ChatGPT 为代表的 AIGC 技术引发了广泛关注。人工智能和机器学习等技术对数据规模及处理速度等提出了更高要求。在数据成为主要生产要素的当下和未来&#xff0c;如何跟上时代的发展步伐&#xff0c;构建适应 AI 需求的数据中心&#xff0c…

学习c语音的自我感受

因为是自学&#xff0c;所以走过不少弯路。去年&#xff0c;受知乎“python性能弱”风潮的影响&#xff0c;学过go,rust。 在学习这些新语言的时候&#xff0c;由衷感受到&#xff0c;或是本身侧重方向的原因&#xff08;如go侧重服务器&#xff09;&#xff0c;或是语言太新不…

使用Python Tkinter创建文件生成工具

我们将使用Python的Tkinter模块创建一个简单的文件生成工具。这个工具可以用来创建Excel、文本、Python脚本和Word文档等不同类型的文件。 1、准备工作 首先&#xff0c;确保你已经安装了Python和所需的第三方库&#xff1a;Tkinter、openpyxl和python-docx。你可以使用pip来…

SpringMVC基础篇(一)

文章目录 1.基本介绍1.特点2.SpringMVC跟SpringBoot的关系 2.快速入门1.需求分析2.图解3.环境搭建1.创建普通java工程2.添加web框架支持3.配置lib文件夹1.导入jar包2.Add as Library3.以后自动添加 4.配置tomcat1.配置上下文路径2.配置热加载 5.src下创建Spring配置文件applica…

【深度学习】DDoS-Detection-Challenge aitrans2024 入侵检测,基于机器学习(深度学习)判断网络入侵

当了次教练&#xff0c;做了个比赛的Stage1&#xff0c;https://github.com/AItransCompetition/DDoS-Detection-Challenge&#xff0c;得了100分。 一些记录&#xff1a; 1、提交的flowid不能重复&#xff0c;提交的是非入侵的数量和数据flowid,看check.cpp可知。 2、Stage…

开源大模型 Llama 3

开源大模型Llama 3是一个在多个领域都展现出卓越性能的大模型。下面将为您介绍Llama 3的特性和一些简单的使用案例。 一、Llama 3介绍 Llama 3在Meta自制的两个24K GPU集群上进行预训练,使用了超过15T的公开数据,其中5%为非英文数据,涵盖30多种语言。这个训练数据集是前代L…

达梦(DM)数据库管理表

达梦DM数据库管理表 管理表管理表的准则表的存储空间上限表的存储位置 创建表创建普通表指定表的聚集索引查询建表更改表删除表清空表查看表定义查看表空间使用 表是数据库中数据存储的基本单元&#xff0c;是对用户数据进行读和操纵的逻辑实体&#xff0c;表由列和行组成&…

SpringCloud系列(14)--Eureka服务发现(Discovery)

前言&#xff1a;在上一章节中我们说明了一些关于服务信息的配置&#xff0c;在本章节则介绍一些关于Discovery的知识点及其使用 1、Discovery是什么&#xff0c;有什么用 Discovery&#xff08;服务发现&#xff09;是eureka的功能和特性&#xff0c;有时候微服务可能需要对外…

mpu6050姿态解算与卡尔曼滤波(5)可应用于51单片机的卡尔曼滤波器

博客4中给出的滤波器状态维数为4维&#xff0c;测量量为3维&#xff0c;每次滤波需要做不少矩阵乘法和求逆运算。如果想在51单片机上实现&#xff0c;计算耗时会比较长。考虑应用场合可以对滤波器适当做一些简化&#xff0c;计算量会大大减小。 首先&#xff0c;陀螺和加速度计…

【论文阅读】互连网络的负载平衡路由算法 (RLB RLBth)

前言Oblivious Load Balancing 不经意路由负载平衡 1. oblivious routing 不经意/无关路由的背景知识 1. oblivious routing, adaptive routing & minimal/non-minimal routing algorithms 2. Balancing a 1-Dimensional ring: RLB and RLBth 一维 ring 的 RLB and RLBth 1…

[MoeCTF-2022]Sqlmap_boy

title:[MoeCTF 2022]Sqlmap_boy 查看网页源代码&#xff0c;得到提示 <!-- $sql select username,password from users where username".$username." && password".$password.";; --> 用万能密码绕过&#xff0c;用’"闭合 爆数据库…

C++笔记:类和对象(一)->封装

类和对象 认识类和对象 先来回忆一下C语言中的类型和变量&#xff0c;类型就像是定义了数据的规则&#xff0c;而变量则是根据这些规则来实际存储数据的容器。类是我们自己定义的一种数据类型&#xff0c;而对象则是这种数据类型的一个具体实例。类就可以理解为类型&#xff0c…

B树(B-tree)

B树(B-tree) B树(B-tree)是一种自平衡的多路查找树&#xff0c;主要用于磁盘或其他直接存取的辅助存储设备 B树能够保持数据有序&#xff0c;并允许在对数时间内完成查找、插入及删除等操作 这种数据结构常被应用在数据库和文件系统的实现上 B树的特点包括&#xff1a; B树为…

【数据库】Redis

文章目录 [toc]Redis终端操作进入Redis终端Redis服务测试切换仓库 String命令存储字符串普通存储设置存储过期时间批量存储 查询字符串查询单条批量查询 Key命令查询key查询所有根据key首字母查询判断key是否存在查询指定的key对应的value的类型 删除键值对 Hash命令存储hash查…

【ARMv9 DSU-120 系列 -- Mapping for address target groups to CHI bus master ports】

文章目录 Mapping for address target groups to CHI bus master ports映射决定过程示例CHI id bit settingMapping for address target groups to CHI bus master ports 在DSU-120(DynamIQ™共享单元-120)中,地址目标组与总线主端口之间的映射关系是通过在复位时决定哪些总…

春秋云镜 CVE-2023-51048

靶标介绍&#xff1a; S-CMS v5.0 被发现存在SQLI。 开启靶场 根据题目查找S-CMS v5.0漏洞&#xff0c;百度没有查询到&#xff0c;使用必应搜索S-CMS v5.0 查找到githubCVE-2023-51052的描述 S-CMS v5.0 was discovered to contain a SQL injection... CVE-2023-51052 Git…

阿斯达年代记三强争霸开服 游戏下载安装+账号注册教程一览

阿斯达年代记国际服是一款MMORPG手游&#xff0c;游戏支持自由交易是一款可以搬砖的游戏&#xff0c;游戏目前开放的4个职业&#xff0c;战士&#xff0c;弓箭手&#xff0c;祭司&#xff0c;斗士&#xff0c;其中战士是拉剑盾为主的职业&#xff0c;主T&#xff0c;由于这1款游…

7.Eureka注册中心

将user-service服务注册到eureka 将order-service服务注册到eureka eureka:client:service-url:defaultZone: http://localhost:10086/eureka/ <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix…

视频评价工具AVQT介绍

AVQT介绍 AVQT(Advanced Video Quality Tool)是一个用于评估压缩视频感知质量的工具。它通过模拟人类如何评价压缩视频的质量来进行工作。AVQT 是是苹果在 WWDC 21 上推出的一款评估视频感知质量的工具。AVQT可以用于计算视频的帧级和片段级得分,其中片段通常持续几秒钟。这…

OpenCV 如何实现边缘检测器

返回:OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;OpenCV如何实现拉普拉斯算子的离散模拟 下一篇 :OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 目标 在本教程中&#xff0c;您将学习如何&#xff1a; 使用 OpenCV 函数…