炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – 异步载数据

ECharts 异步加载数据

概述

在之前的例子中的数据是在初始化后setOption中直接填入的,但是很多时候可能数据需要异步加载后再填入。

ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

json

我们以使用json 数据为例

效果图

data.json 数据格式

{
"data_pie" : [
{"value":235, "name":"视频广告"},
{"value":274, "name":"联盟广告"},
{"value":310, "name":"邮件营销"},
{"value":335, "name":"直接访问"},
{"value":400, "name":"搜索引擎"}
]
}

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<script src="https://www.shulanxt.com/visualization/echarts/data-load/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://www.shulanxt.com/visualization/echarts/data-load/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json', function (data) {
myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie',    // 设置图表类型为饼图
radius: '55%',  // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
data:data.data_pie
}
],
title: {
text:'树懒课堂流量访问来源统计图',
subtext:'纯属虚构',
}
})
}, 'json')
</script>
</body>
</html>

异步加载的等待动画

概述

  • 异步加载需要一段时间
  • 如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。
  • 我们可以添加 loading 效果,ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画

效果图

等待提示

等待动画

等待完成后出现的图表

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<script src="https://www.shulanxt.com/visualization/echarts/data-load/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://www.shulanxt.com/visualization/echarts/data-load/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();  // 开启 loading 效果
$.get('data.json', function (data) {
alert("可以看到 loading 字样。"); // 测试代码,用于查看 loading 效果
myChart.hideLoading();  // 隐藏 loading 效果
myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie',    // 设置图表类型为饼图
radius: '55%',  // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
data:data.data_pie
}
] ,
title:{
text:"树懒课堂访问来源分析",
subtext:'数据纯属虚构',
}
})
}, 'json');
</script>
</body>

炫意HTML5 » ECharts – 异步载数据

Java基础教程Android基础教程