您的位置：首页 > 其它

Echarts使用心得总结——异步数据加载

2017-07-16 00:41 776 查看

异步加载

Echarts的数据一般是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要使用ajax等异步获取数据后通过 setOption 填入数据就行。

实例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Echarts使用心得总结——异步数据加载和更新</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
</head>
<bod
4000
y>
<div id="myChart" style="width:400px;height:300px;margin:auto;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('myChart'));

$.get('data.json').done(function (resule) {

resule = JSON.parse(resule);//把string字符串转换为json数组

myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: resule.name
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: resule.value
}]
});
});
</script>
</body>
</html>

data.json文件

{"name":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
"value":[5, 20, 36, 10, 10, 20]}

也可以先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。

var myChart = echarts.init(document.getElementById('myChart'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});

// 异步加载数据
$.get('data.json').done(function (resule) {
resule = JSON.parse(resule);//把string字符串转换为json数组

myChart.setOption({
xAxis: {
data: resule.name
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: resule.value
}]
});
});

如下：

loading 动画

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

myChart.showLoading();
$.get('data.json').done(function (resule) {
myChart.hideLoading();

resule = JSON.parse(resule);//把string字符串转换为json数组

myChart.setOption(...);
});

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax 数据异步 Echarts

相关文章推荐

新的分享

章节导航