一、介绍
Echarts 配合使用 Ajax 进行数据的动态加载，主要解决了加载一次页面只能加载一次图表的问题，其次在动态加载时衔接合理。
二、HTML代码
<head>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
</head>
<body style="height: 50%;">
<!-- 用来放图表 -->
<div id="mydiv"></div>
</body>
三、JavaScript代码
<script type="text/javascript">
//创建一个 ECharts 实例
var myChart = echarts.init(document.getElementById("mydiv"));
$.ajax({
url:$$pageContextPath+"test/test!getData.do",
type:'post',
data:{'id':id},
dataType:'json',
success:function(data) {
var option = {
xAxis: {
type: 'category',
data: data[0]
},
yAxis: {
type: 'value'
},
series: [{
data: data[1],
type: 'bar'
}]
};
//设置图表实例的配置项以及数据
if (option != null && typeof option === "object") {
myChart.setOption(option, true);
}
}
});
//定时：每500毫秒向后台请求数据
setInterval(function () {
/*
* 动态数据加载
*
* 方式一：（官网不推荐此种方式，
* 因为在上面使用了myChart.setOption(option, true)时已经将一些项设置上了默认值，
* 再使用下面语句时这些默认项将失效，再重新设置）
* option.xAxis.data=data[0];
* option.series[0].data=data[1];
* myChart.setOption(option, true);
*
*/
//方式二
$.ajax({
url:$$pageContextPath+"test/test!getData.do",
type:'post',
data:{'id':id},
dataType:'json',
success:function(data) {
myChart.setOption({
xAxis: {
data: data[0]
},
series: [{
data: data[1]
}]
});
}
});
}, 500);
</script>
注意：这个 JavaScript 代码需要等 body 加载完才能起作用，因为代码var myChart = echarts.init(document.getElementById("mydiv")); 中 document.getElementById("mydiv");是获取已加载的 DOM；如果没加载完就获取不到，接着之后的代码就无效了。
原创文章 79
获赞 62
访问量 10万+