Echarts异步数据与动画加载

目录

简介

头部代码

这段代码是使用 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.mzph.cn/pingmian/2786.shtml

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

相关文章

Qt——设置布局中特定的两个组件之间的间距

在Qt中&#xff0c;如果你想要设置布局内某两个组件之间的特定间距&#xff0c;你可以使用QSpacerItem来添加一个空白区域&#xff0c;或者使用布局的insertSpacing方法&#xff08;如果可用&#xff09;。 你可以在两个组件之间插入一个QSpacerItem来创建空间。下面是一个例子…

C++中输入输出速度的优化

ios::sync_with_stdio(false);cin.tie(NULL);这两行代码是用于控制 C 输入输出流的同步和缓冲行为的。 1. ios::sync_with_stdio(false); 默认情况下&#xff0c;C 的输入输出流与 C 标准库的输入输出流是同步的&#xff0c;这意味着 C 的输入输出流在每次操作后会调用 C 标准…

excel相同行不同列查询

EXCEL中e列和f列是每一行对应的&#xff0c;我想在d列中找和e列一样的元素&#xff0c;然后获取同一行中f列的值 IFERROR(VLOOKUP(D1, E:F, 2, FALSE), "")

MySQL索引为什么选择B+树,而不是二叉树、红黑树、B树?

12.1.为什么没有选择二叉树? 二叉树是一种二分查找树,有很好的查找性能,相当于二分查找。 二叉树的非叶子节值大于左边子节点、小于右边子节点。 原因: 但是当N比较大的时候,树的深度比较高。数据查询的时间主要依赖于磁盘IO的次数,二叉树深度越大,查找的次数越多,性能…

windows命令行安装wget

有时候下载网页上的大文件&#xff0c;浏览器总是不给力&#xff0c;崩溃&#xff0c;或者中断&#xff0c;影响其他操作&#xff0c;不能像linux一样下载文件很稳定&#xff0c;就希望在windows上也能使用wget&#xff0c;安装如下&#xff1a; 1、下载wget.exe GNU Wget 1.…

python爬虫 - 爬取 json 格式数据(股票行情信息:雪球网,自选股)

文章目录 1. 第一步&#xff1a;安装requests库2. 第二步&#xff1a;获取爬虫所需的header和cookie3. 第三步&#xff1a;获取网页4. 第四步&#xff1a;解析网页5. 第五步&#xff1a;解析 json 结构数据体6. 代码实例以及结果展示 python爬虫五部曲&#xff1a; 第一步&…

157平新中式复式装修,双客厅设计+开放式客餐厅。福州中宅装饰,福州装修

设计亮点 这个户型改造案例的亮点在于户型空间结构的优化。与传统复式户型不同&#xff0c;一层被重新规划为家庭入户门厅及会客厅茶室&#xff1b;而二楼则作为传统的生活区&#xff0c;突破了原有空间限制&#xff0c;为居住者提供更多自由活动空间。 改造亮点&#xff1a; ①…

江开2024年春《大学英语(B)(2) 060052》过程性考核作业4参考答案

答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 单选题 1阅读Passage One&#xff0c;回答C-1C-4个问题。请…

QT中对于QPushButton样式的调整

文章目录 前言1.QPushButton1.1 新建项目导入资源1.2 添加Push Button并定义样式1.3 调整样式1.4 实际需求情况1.5 背景色和边框 2. 一些概念理解2.1 图片2.2 边距 总结 前言 前段时间在调软件的样式&#xff0c;学到了些新的东西&#xff0c;也碰到了些问题&#xff0c;这里做…

LC 239.滑动窗口最大值

239.滑动窗口最大值 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输入&#xff1a; nums [1,3,-…

4.26日学习记录

[湖湘杯 2021 final]Penetratable SUID提权 SUID是一种对二进制程序进行设置的特殊权限&#xff0c;可以让二进制程序的执行者临时拥有属主的权限 SUID具有一定的限制&#xff1a; 1.仅对于二进制有效&#xff1b; 2.执行者在程序中有可以执行的权限&#xff1b; 3.权限仅在程序…

Linux 深入理解Linux文件系统与日志分析

在Linux系统中&#xff0c;文件名和文件数据是分开存储的 文件数据包含 元信息(即不包含文件名的文件属性) 和 实际数据 文件元信息存储在 inode(索引节点)里&#xff0c; 文件实际数据存储在 block(块)里; 文件名存储在目录块里 查看文件的元信息 stat 文件名 [ro…

数据结构习题--回文链表

数据结构习题–回文链表 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 要求&#xff1a; 时间复杂度为O(n) 空间复杂度为O(1) 方法&#xff1a;反转后半链表 分析 因为要求…

【期末复习向】智能信息系统前4章梳理

第四章 不确定性推理 [了解即可]4.1 不确定性概述 不确定性推理概念 所谓推理&#xff0c;就是从已知事实出发&#xff0c;运用相关的知识&#xff08;或规则&#xff09;逐步推出结论或者证明某个假设成立或不成立的思维过程。 不确定性方法分类 1.模型方法 a&#xff0…

芒果YOLOv8改进组合161:动态标签分配ATSS+新颖轻量化非对称多级压缩LADH检测头组合改进,LADH作为原创可以发表SCI顶刊论文,小目标高效涨点

💡本篇内容:【芒果YOLOv8改进ATSS标签分配策略|第四集】芒果YOLOv8改进组合161:动态标签分配ATSS+新颖轻量化非对称多级压缩LADH检测头组合改进,小目标高效涨点 💡🚀🚀🚀本博客 标签分配策略ATSS改进+ 新颖轻量化非对称多级压缩LADH检测头组合改进,适用于 YOLOv…

Centos7系统下安装Nginx并配置域名转发实现域名访问

感谢李天健同学辛苦创作&#xff0c;对于Nginx配置未完成的同学请移步他的博客。 传送门&#xff1a;Centos7系统下安装Nginx并配置域名转发实现域名访问 传送门2&#xff1a;1.24.0

Ubuntu查看端口状态

完蛋了&#xff0c;好像动心了&#xff0c;近一周吃啥东西都索然无味&#xff0c;这可如何是好&#xff01;&#xff01;&#xff01;不知道在期待什么&#xff0c;恐惧与窃喜—— 在Ubuntu系统中&#xff0c;查看某个端口是否被放行&#xff08;即允许流量通过&#xff09;&am…

C++左值引用与右值引用

首先&#xff0c;我们需要知道什么是值语义&#xff0c;什么是引用语义。 值语义&#xff1a; 值语义意味着对象在被传递、赋值或拷贝时&#xff0c;会复制其整个数据。当使用值语义时&#xff0c;对对象进行操作不会影响原始对象&#xff0c;因为操作会在副本上进行。传统的…

WIFISKY 7层流控路由器 confirm.php RCE漏洞复现

0x01 产品简介 WIFISKY-7层流控路由器是一款可用于家庭或办公环境的无线路由器,具备流控功能以优化网络流量和提供更稳定的网络连接。该路由器采用了7层流控技术,能够依据网络数据包的内容进行智能管理,从而实现对网络流量的精细化控制和优化。这种技术可以提升网络的整体性…

营业执照OCR接口在电商行业中的具体应用

在当今快速发展的电子商务时代&#xff0c;营业执照OCR接口技术的应用为电商行业带来了深远的影响。这项技术通过自动识别和提取营业执照图像中的文字信息&#xff0c;不仅极大提高了数据处理的速度和准确性&#xff0c;而且还为电商平台的风险管理和用户体验优化提供了强有力的…