由於業務需求需要做一個視覺化的展示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使用的依舊是以前的值）。