学习Echarts：（二）异步加载更新
2024-10-18 21:39:20
这部分比较简单，对图表的异步加载和更新，其实只是异步获取数据然后通过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(...);
});
最新文章
- multiple merge document
- Error Domain=ASIHTTPRequestErrorDomain Code=8 "Failed to move file from"xxx/xxx"to"xxx/xxx"
- webpack配置备份
- BZOJ3172[Tjoi2013]单词 题解
- Delphi 2010错误 ＂displayNotification: 内存不够＂
- MongoDB(3):小的细节问题
- pyqt中QDateTimeEdit/QDateEdit相关使用方法
- function overloading/ declare function
- 【C++】智能指针详解(一):智能指针的引入
- webpack+babel+transform-runtime, IE下提示Promise未定义？
- org.springframework.web.servlet.PageNotFound
- React（上）
- 将自己的SpringBoot应用打包发布到Linux下Docker中
- 实验楼-高级Bash脚本编程指南
- spss缺失值填充步骤
- SVN服务器搭建和使用教程
- ovs-appctl 命令合集
- Jenkins 在mac平台的安装与配置
- Java volatile 的测试（Java代码实战-004）
- ORTP编译为静态库的问题