Echarts图表通过Ajax动态更新数据

由于业务需求需要做一个可视化的展示Demo，这个Demo需要前后端的共同支撑，所以思路大致是：首先我们想到的是用ajax动态请求服务端获取到json文件后，然后将其解析为可以直接使用的数据，最后把这些数据更新到Echarts中去。

简单的代码实现如下：

HTML：

<div id="myId"><div/>

var myChart = echarts.init(document.getElementById('myId'));   // 初始化

var dispute,traffice,criminal,fire,public_sercurity;     //纠纷，交通，犯罪，火情，公共安全
var receive = [];                // Echarts中data使用的更新数据数组

function getCategoryPolice(){
$.ajax({
type:"GET",
url:"http://10.x.x.11:8080/SSH_Backstage/demoAction",
dataType:'json',
async:true,

beforeSend: function(){
//                     alert("loading....");

4000
}, //加载执行方法

error: function(){
alert("error");
},  //错误执行方法

success: function(CategoryCon){
// 这里弹出某几项验证一下是否获取到了数据或者正确与否
/*
alert("纠纷："+CategoryCon.list[0].dispute);
alert("交通:"+CategoryCon.list[0].traffice);
alert("刑事:"+CategoryCon.list[0].criminal);
alert("火情:"+CategoryCon.list[0].fire);
alert("治安:"+CategoryCon.list[0].public_sercurity);
*/
// 解析数据并赋值给事先声明好的变量
dispute = CategoryCon.list[0].dispute;
traffice = CategoryCon.list[0].traffice;
criminal = CategoryCon.list[0].criminal;
fire = CategoryCon.list[0].fire;
public_sercurity = CategoryCon.list[0].public_sercurity;

receive = [];
// 将使用的数组置空，因为我做demo时在声明数组时有实际测试的数据
// 也可以这样置空数组:receive.splice(0，receive.length);
// 将解析好的json数据push到数组中，当然你也可以使用其他办法，我们这里为了简单明了，是写的直接push的方法。
receive.push(parseInt(dispute));
receive.push(parseInt(traffice));
receive.push(parseInt(criminal));
receive.push(parseInt(fire));
receive.push(parseInt(public_sercurity));

receive.push(parseInt(dispute));
receive.push(parseInt(dispute));
console.log(receive); //此处可以打印数组

//myChart.hideLoading();    //隐藏加载动画
myChart.setOption(
{
backgroundColor: "rgb(7,14,45)",     //背景色
title: {
text: 'police',
// 标题样式
textStyle: {
color: '#fff'
}
},
tooltip: {},
legend: {
data:['人数',"sex"],
textStyle: {
color: '#fff'     // legend字体颜色
}
},
xAxis: {
data: ["罗湖","福田","南山","盐田","宝安","龙华","龙岗"],
axisLabel: {                      // x轴的字体样式
show: true,
textStyle: {
fontSize:12,          // xAxis fontSize
color: '#fff'
}
},
// x轴的颜色和宽度
axisLine:{
lineStyle:{
color:'#fff',
width:1,                  //这里是坐标轴的宽度
}
}
},

yAxis: {
// y轴的字体样式
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
// y轴的颜色和宽度
axisLine:{
lineStyle:{
color:'#fff',
width:1,                  //这里是坐标轴的宽度
}
}
},
series: [{
name: '人数',
type: 'bar',
data: receive             // 需要更新的数据在这里
}]
}

);  // setOption

} //成功执行方法
}) //ajax
} // ajax外面的方法

// setInterval(function(){getCategoryPolice()}, 6*1000);    // 间歇执行
getCategoryPolice();

由于一个问题，中间思考了一下，比如之前把setOption放在了ajax的外面，每次请求到正确的json数据，解析好push到声明好的数组中，数组是okay的，把它使用在Echarts的data处就是毫无反应（这里指的是我们之前声明的是有数据的数组，而并非是一个空数组），Echarts表使用的仍然时最初我们声明数组时的数据，原因是数组的值被改变了，但是没有把传给Echarts图表的值刷新（echarts使用的依旧是以前的值）。