echarts數據自我定製（三）--實時數據傳輸，帶回放功能

時間 2020-10-06

標籤 javascript php html java jquery ajax 數據庫數組 echarts ide 欄目系統網絡简体版

原文原文鏈接

需求以下：
javascript

數據回放的動畫展示。php

1.展示過程當中能夠暫停數據，查看數據點的詳細信息。html

2.能夠往回拖java

3.能夠從新動態播放 jquery

4.軸是時間軸，變化的。ajax

先上圖圖數據庫

而後是源代碼：數組

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>area pic</title>
<script  src="js/esl.js"></script>
<script src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
                
require.config({
packages:[
{
name:'echarts',
location:'echarts-master/src',
main:'echarts'
},
{
name:'zrender',
location:'zrender-master/src',
main:'zrender'
}
]
});
            
    //ajax獲取後臺數據，x軸的name從數據庫中讀取
            
    function fetchXname(){
        var arr=new Array();
        $.ajax(
        {
            url:"./control/AjaxService.php?method=GetXaxisname",
            dataType:"text",
            success:function(data)
            {
            //調用函數獲取值，轉換成數組模式
              var ss=eval(data);
              for(var i=0;i<ss.length;i++)
              {
                arr.push(ss[i].name);
              }
             }
            });
                    
        return arr;
                
        }
                
        function dataXRand(){
                    
            var dataarr=new Array();
            $.ajax({
                url:"./control/AjaxService.php?method=RandTest",
                dataType:"text",
                success:function(data)
                {
                     var ss=eval(data);
                     for(var i=0;i<ss.length;i++)
                      {
                        dataarr.push(ss[i]);
                     // alert(dataarr[i]);
                      }
                }          
            });
                        
                return dataarr;        
        }
                
                
function RandFloat(){
    var floatdata;
     $.ajax({
                url:"./control/AjaxService.php?method=RandFloat",
                dataType:"text",
                success:function(data)
                {
                     floatdata=eval(data);
                //   alert(floatdata);
                                     
                }          
            });
                
   return floatdata;   
                
    }
            
          
            
function RandANum(ec){
                            
     $.ajax({
                url:"./control/AjaxService.php?method=RandANum",
                dataType:"text",
                success:function(data)
                {
                            
                     Rdata=eval(data);
                        
                     myChart.addData([
        [
            0,        // 系列索引
            Rdata, // 新增數據
            false,    // 新增數據是否從隊列頭部插入
            false,    // 是否增長隊列長度，false則自定刪除原有數據，隊頭插入刪隊尾，隊尾插入刪隊頭
          //  axisData  // 座標軸標籤
        ]
    ]);
                                         
                }          
            });
            
    }
            
option = {
    title : {
        text: '模擬數據回放功能',
        subtext: '純屬虛構'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['***次數']
    },
     dataZoom : {
        show : true,
        realtime: true,
        height:20,
        backgroundColor: 'rgba(237,237,237,0.5)',
        dataBackgroundColor: 'rgba(247,183,159,0.5)',
        fillerColor: 'rgba(73,139,189,0.8)',
        handleColor: 'rgba(128,43,16,0.8)',
        start : 80,
        end : 100
    },
    calculable : true,
    xAxis : [
            
        {
            type : 'category',
            boundaryGap : true,
            data : (function(){
                var now = new Date();
                var res = [];
                var len = 100;
                while (len--) {
                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                    now = new Date(now - 2000);
                }
                return res;
            })()
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale: true,
            precision:1,
            power:1,
            name : '次數',
            boundaryGap: [0.2, 0.2],
            splitArea : {show : true}
        }
    ],
    series : [
        {
            name:'***次數',
            type:'line',
            smooth:false,
            itemStyle: {
                normal: {
                    areaStyle: {
                        shadowColor : 'rgba(0,0,0,0.4)'
                    }
                }
            },
            data:dataXRand()
        }
    ],
    calculable : false
};
                            
var myChart;
var clickCount=0;
require(
[
'echarts',
'echarts/chart/line'
],
function(ec){
myChart=ec.init(document.getElementById('main'));
myChart.setOption(option);
var timeTicket;
clearInterval(timeTicket);
timeTicket = setInterval(function(){
    RandANum(ec);
    }, 2000);
            
//圖表區域範圍內點擊，中止刷新數據 
$(function(){    
    $("#main").each(function(){ 
        $(this).click(function(event){
                    
                    
              //若是鼠標在規劃範圍內
               var div = $("#main"); 
                
                var x=event.clientX;
                var y=event.clientY;
                        
              var divx1 = $('#main').offset().left+80;
              var divy1 = $('#main').offset().top+60;
                var divx2=$('#main').offset().left-80+$('#main').width();
                var divy2=$('#main').offset().top-60+$('#main').height();
                       
                      
                if((x>divx1)&&(x<divx2)&&(y>divy1)&&(y<divy2) ){
                        clickCount+=1;
                    
                                if(clickCount%2==1)
                                {
                                    clearInterval(timeTicket);
                                }
                                else
                                    {
                                        timeTicket = setInterval(function(){
                                 RandANum(ec);
                                    }, 2000);
                                    }
                           
                }
             
        }); 
    }); 
});
}
)
</script>
</head>
<body>
<div id="main" style="height:500px; border:1px solid #ccc; padding:10px;"></div>
</body>
</html>

提示：出現的請求函數在以前的文章中php文件中有體現哦~echarts