学习Echarts:(二)异步加载更新
这部分比较简单,对图表的异步加载和更新,其实只是异步获取数据然后通过setOption传入数据和配置而已。
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
官方虽然给的jquery方法示例,但我们可以用原生ajax或fetch等,这部分跟异步方式没关系,只要在回调中或promise的.then()中再次调用setOption刷新图标即可。
异步任务总会涉及一个问题,就是请求结果返回之前,我们的界面该显示什么?
1.显示空图表
官方给出的一种方案是先显示空的图标表,等数据返回后再填充图表。
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
}); // 异步加载数据
$.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
2.loading动画
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。 myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});
学习Echarts:(二)异步加载更新的更多相关文章
- H5+JS+JQuery+ECharts实现异步加载
这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...
- WPF BackGroundWord 异步加载更新进度条示例
<Window x:Class="AsynchronousLoading.MainWindow" xmlns="http://schemas.microsoft.c ...
- python bottle学习(二)加载配置文件
from bottle import (run, route, get, post, default_app, Bottle) """ 首先获得一个app对象,有两种方法 ...
- jqGrid 学习笔记--数据异步加载方法(转)
var commonQuery = '../importantInfoReport/pageQueryImportantInfoReport.action?type=0'; jQuery(" ...
- 26、首先通过javascript包的异步加载来学习echarts包的结构
1.在这里先写一写前言,今天在公司搞定了一个对于滚动条进行定位的case,明天开始做TestManagement. 首先大家先来一起看一看流行的javascript文件的加载方式,这里采用别人博客上的 ...
- Android学习笔记(二)之异步加载图片
最近在android开发中碰到比较棘手的问题,就是加载图片内存溢出.我开发的是一个新闻应用,应用中用到大量的图片,一个界面中可能会有上百张图片.开发android应用的朋友可能或多或少碰到加载图片内存 ...
- IOS学习之路二十三(EGOImageLoading异步加载图片开源框架使用)
EGOImageLoading 是一个用的比较多的异步加载图片的第三方类库,简化开发过程,我们直接传入图片的url,这个类库就会自动帮我们异步加载和缓存工作:当从网上获取图片时,如果网速慢图片短时间内 ...
- [置顶] iOS学习笔记47——图片异步加载之EGOImageLoading
上次在<iOS学习笔记46——图片异步加载之SDWebImage>中介绍过一个开源的图片异步加载库,今天来介绍另外一个功能类似的EGOImageLoading,看名字知道,之前的一篇学习笔 ...
- Android学习笔记_36_ListView数据异步加载与AsyncTask
一.界面布局文件: 1.加入sdcard写入和网络权限: <!-- 访问internet权限 --> <uses-permission android:name="andr ...
随机推荐
- python工业互联网监控项目实战5—Collector到opcua服务
本小节演示项目是如何从连接器到获取Tank4C9服务上的设备对象的值,并通过Connector服务的url返回给UI端请求的.另外,实际项目中考虑websocket中间可能因为网络通信等原因出现中断情 ...
- ISO及安全业务,机制
ISO 应用层 为应用软件提供接口,使应用程序能够使用网络服务. 各种应用程序协议如HTTP(Web),Telnet(远程控制),FTP(文本传输) 表示层 数据的交换格式.数据加密解密.数据的压缩解 ...
- php的echo 和 return的区别
来源:https://blog.csdn.net/ljfphp/article/details/76718635 项目中碰到的问题,本来是想在控制器直接return $xml的($xml是一段xml格 ...
- Shell中的here文档
1.名词解释: 以下是维基百科解释: here文档[1],又称作heredoc.hereis.here-字串或here-脚本,是一种在命令行shell(如sh.csh.ksh.bash.PowerSh ...
- 自动驾驶汽车数据不再封闭,Uber 开源新的数据可视化系统
日前,Uber 开源了基于 web 的自动驾驶可视化系统(AVS),称该系统为自动驾驶行业带来理解和共享数据的新方式.AVS 由Uber旗下负责自动驾驶汽车研发的技术事业群(ATG)开发,目前该系统已 ...
- 自定义fastjson对枚举类型的序列化及反序列化过程
通常,fastjson在序列化及反序列化枚举时,一般以下几种策略: 1).根据枚举的name值序列化及反序列化(默认) 2).根据枚举的ordinal序列化及反序列化 3).根据枚举的toString ...
- AngularJS学习1-基础知识
Angular并不是适合任何应用的开发,Angular考虑的是构建CRUD应用 但是目前好像也只是用到了angular的一些指令,数据绑定,mvc,http服务而已..... 以前传统的做法就是,通过 ...
- Hyperf基础教程
前提说明 本教程适用于新手.老手,也适用于任何操作系统,包括Windows.linux.MacOS 介绍 Hyperf 是基于 Swoole 4.4+ 实现的高性能.高灵活性的 PHP 协程框架,内置 ...
- CodeForces - 1245A Good ol' Numbers Coloring (思维)
Codeforces Round #597 (Div. 2 Consider the set of all nonnegative integers: 0,1,2,-. Given two integ ...
- 积性函数初步(欧拉$\varphi$函数)
updata on 2020.4.3 添加了欧拉\(\varphi\)函数为积性函数的证明和它的计算方式 1.积性函数 设\(f(n)\)为定义在正整数上的函数,若\(f(1)=1\),且对于任意正整 ...