Echars,動態數據實時刷新

//調用

setInterval(function (){
            $.post("${ctx}/eelect/meter/eqmeter",
                    {},
                    function(result) {
                        var tems=[];        //溫度數組（存放服務器返回的所有溫度值）
                         var hums=[];        //溼度數組
                         var pas=[];        //壓強數組
                         var dates=[];
                           if (result != null && result.length > 0) {
                                for(var i=0;i<result.length;i++){       
                                   tems.push(result[i].ygz);        //挨個取出溫度、溼度、壓強等值並填入前面聲明的溫度、溼度、壓強等數組
                                   hums.push(result[i].jian);
                                    pas.push(result[i].feng);
                                   dates.push(result[i].dt);
                                }
                                lineEchars(dates,tems,hums,pas)
                         }else {
                             //返回的數據爲空時顯示提示信息
                             alert("圖表請求數據爲空，可能服務器暫未錄入近五天的觀測數據，您可以稍後再試！");
                               myChart.hideLoading();
                         }
                        
                    });
        },10000)

//標籤

  <div style="height:100%;width: 100%;background: #eee" id="main"></div>    
      

//js

function lineEchars(dates,tems,hums,pas){
    // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定圖表的配置項和數據
    var option = {
        title: {    //圖表標題
            text: '過去五天數據圖表'
        },
        tooltip: {
            trigger: 'axis', //座標軸觸發提示框，多用於柱狀、折線圖中
            /*
             控制提示框內容輸出格式
            formatter: '{b0}<br/><font color=#FF3333>&nbsp;●&nbsp;</font>{a0} : {c0} ℃ ' +
                           '<br/><font color=#53FF53>●&nbsp;</font>{a1} : {c1} % ' +          
                           '<br/><font color=#68CFE8>&nbsp;●&nbsp;</font>{a3} : {c3} mm ' +
                           '<br/><font color=#FFDC35>&nbsp;●&nbsp;</font>{a4} : {c4} m/s ' +
                           '<br/><font color=#B15BFF>&nbsp;&nbsp;&nbsp;&nbsp;●&nbsp;</font>{a2} : {c2} hPa '
            */
        },
        dataZoom: [
             {
                 type: 'slider',    //支持鼠標滾輪縮放
                 start: 0,            //默認數據初始縮放範圍爲10%到90%
                 end: 100
             },
             {
                 type: 'inside',    //支持單獨的滑動條縮放
                 start: 0,            //默認數據初始縮放範圍爲10%到90%
                 end: 100
             }
        ],
        legend: {    //圖表上方的類別顯示               
            show:true,
            data:['溫度（℃）','溼度（%）','雨量（mm）','風速（m/s）','壓強（hPa）']
        },
        color:[
               '#FF3333',    //溫度曲線顏色
               '#53FF53',    //溼度曲線顏色
               '#B15BFF',    //壓強圖顏色
               '#68CFE8',    //雨量圖顏色
               '#FFDC35'    //風速曲線顏色
               ],
        toolbox: {    //工具欄顯示             
            show: true,
            feature: {                
                saveAsImage: {}        //顯示“另存爲圖片”工具
            }
        },
        xAxis:  {    //X軸           
            type : 'category',
            data : dates   //先設置數據值爲空，後面用Ajax獲取動態數據填入
        },
        yAxis : [    //Y軸（這裏我設置了兩個Y軸，左右各一個）
                    {
                        //第一個（左邊）Y軸，yAxisIndex爲0
                         type : 'value',
                         name : '溫度',
//                           max: 120,
//                          min: -40,
                         axisLabel : {
                             formatter: '{value} ℃'    //控制輸出格式
                         }
                     },
                     {
                        //第二個（右邊）Y軸，yAxisIndex爲1
                         type : 'value',
                         name : '壓強',
                         scale: true,
                         axisLabel : {
                             formatter: '{value} hPa'
                         }
                     }
                 
        ],
        series : [    //系列（內容）列表                      
                    {
                        name:'溫度（℃）',
                        type:'line',    //折線圖表示（生成溫度曲線）
                        symbol:'emptycircle',    //設置折線圖中表示每個座標點的符號；emptycircle：空心圓；emptyrect：空心矩形；circle：實心圓；emptydiamond：菱形                        
                        data:tems       //數據值通過Ajax動態獲取
                    },
                    
                    {
                        name:'溼度（%）',
                        type:'line',
                        symbol:'emptyrect',
                        data:hums
                    },
                    
                    {
                        name:'壓強（hPa）',
                        type:'line',
                        symbol:'circle',    //標識符號爲實心圓
                        yAxisIndex: 1,        //與第二y軸有關
                        data:pas
                    }
        ]
    };
    
//     myChart.showLoading();    //數據加載完之前先顯示一段簡單的loading動畫
         myChart.setOption(option);    //載入圖表
}