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);    //载入图表
}