这部分比较简单,对图表的异步加载和更新,其实只是异步获取数据然后通过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:(二)异步加载更新的更多相关文章

  1. H5+JS+JQuery+ECharts实现异步加载

    这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...

  2. WPF BackGroundWord 异步加载更新进度条示例

    <Window x:Class="AsynchronousLoading.MainWindow" xmlns="http://schemas.microsoft.c ...

  3. python bottle学习(二)加载配置文件

    from bottle import (run, route, get, post, default_app, Bottle) """ 首先获得一个app对象,有两种方法 ...

  4. jqGrid 学习笔记--数据异步加载方法(转)

    var commonQuery = '../importantInfoReport/pageQueryImportantInfoReport.action?type=0'; jQuery(" ...

  5. 26、首先通过javascript包的异步加载来学习echarts包的结构

    1.在这里先写一写前言,今天在公司搞定了一个对于滚动条进行定位的case,明天开始做TestManagement. 首先大家先来一起看一看流行的javascript文件的加载方式,这里采用别人博客上的 ...

  6. Android学习笔记(二)之异步加载图片

    最近在android开发中碰到比较棘手的问题,就是加载图片内存溢出.我开发的是一个新闻应用,应用中用到大量的图片,一个界面中可能会有上百张图片.开发android应用的朋友可能或多或少碰到加载图片内存 ...

  7. IOS学习之路二十三(EGOImageLoading异步加载图片开源框架使用)

    EGOImageLoading 是一个用的比较多的异步加载图片的第三方类库,简化开发过程,我们直接传入图片的url,这个类库就会自动帮我们异步加载和缓存工作:当从网上获取图片时,如果网速慢图片短时间内 ...

  8. [置顶] iOS学习笔记47——图片异步加载之EGOImageLoading

    上次在<iOS学习笔记46——图片异步加载之SDWebImage>中介绍过一个开源的图片异步加载库,今天来介绍另外一个功能类似的EGOImageLoading,看名字知道,之前的一篇学习笔 ...

  9. Android学习笔记_36_ListView数据异步加载与AsyncTask

    一.界面布局文件: 1.加入sdcard写入和网络权限: <!-- 访问internet权限 --> <uses-permission android:name="andr ...

随机推荐

  1. Java 添加、隐藏/显示、删除PDF图层

    本文介绍操作PDF图层的方法.可分为添加图层(包括添加线条.形状.字符串.图片等图层).隐藏或显示图层.删除图层等.具体可参考如下Java代码示例. 工具:Free Spire.PDF for Jav ...

  2. ES6系列-什么是ES6?新手应该怎么理解

    ECMAScript 是什么 很多初学者都很困惑,ECMAScript是什么?它跟JavaScript有什么关系? 大家注意到了吗?从题目中我们就可以看出来了,ECMAScript是JavaScrip ...

  3. <string>头文件常用成员函数

    之前说过 string和vector一样,也是一种顺序容器,并且它也自带成员函数,用法和vector的成员函数差不多,不过它只能用来存放字符,也就是字符串. 在c++中,<string>基 ...

  4. PHP的yield是个什么玩意

    来源:https://segmentfault.com/a/1190000018457194 其实,我并不是因为迭代或者生成器或者研究PHP手册才认识的yield,要不是协程,我到现在也不知道PHP中 ...

  5. 13206抢票代码 py

    抢票代码 https://github.com/Bingshuli/12306Python 谷歌驱动 http://chromedriver.storage.googleapis.com/index. ...

  6. 2019-2020-1 20199326《Linux内核原理与分析》第二周作业

    本周总结:本周的学习内容主要是庖丁解牛Linux的第一章,然后看完书后,又跟着云班课加深学习了一下第一章的内容.第一章主要讲述了linux里的汇编指令的一些指令,比如movl,pushl,popl等等 ...

  7. C语言实现数组循环左移

    c语言实现数组左移: 例如输入: 8 3 1 2 3 4 5 6 7 8 输出: 4 5 6 7 8 1 2 3 #include <stdio.h> int main(int argc, ...

  8. 疫情之下微软收入猛增15%!远程办公产品Teams日活达7500万

    当地时间 2020 年 4 月 29 日,微软公布了截止 2020 年 3 月 31 日的 2020 财年第三季度财报. 这是微软首次在财报中显示新冠疫情的影响——疫情之下,远程办公.远程教育和游戏场 ...

  9. 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)

    最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...

  10. visual stdio 2012快捷键

    为什么80%的码农都做不了架构师?>>>   VS2012变化的快捷键:注释::VS2010是(Ctrl+E,C),VS2012是(Ctrl+K, Ctrl+C),实际操作,按住Ct ...