之前数据是在初始化后setOption
中直接填入的,但是很多时候可能数据需要异步加载后再填入。ECharts
中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption
填入数据和配置项就行。
可以先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。
前端代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Simple jsp page</title></head>
<!-- 引入 ECharts 文件 -->
<script src="plug_in/js/echarts/echarts.js"></script>
<script src="plug_in/js/jquery/jquery-1.9.1.js"></script>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<input type="button" onclick="fetchData()" value="加载数据"/>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
// data: [12, 24, 1, 10, 2, 4]
data:[]
}]
});
myChart.showLoading(); //展示loading 动画
function fetchData(cb) {
// 异步加载数据
$.get('mainTest.do?test2').done(function (jsonData) {
// 填入数据
var data = $.parseJSON(jsonData);
myChart.hideLoading(); //隐藏loading 动画
myChart.setOption({
series: [{
name: '销量',
type: 'bar',
data: data
// data:[5, 10, 36, 10, 10, 20]
}]
});
});
}
</script>
</html>
后端代码:
@ResponseBody
@RequestMapping(params = "test2")
public String test2(HttpServletRequest request, HttpServletResponse response, Model model) {
//1、使用JSONObject
Object json = JSONArray.toJSON(new Integer[]{5, 10, 36, 10, 10, 20});
System.out.println(json.toString());
return json.toString();
}
测试项目运行之后的页面展示效果:
点击按钮之后展示效果: