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....");
                        }, //加载执行方法

            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使用的依旧是以前的值）。