echarts realtime图实现

时间 2020-10-06

标签 javascript php html java jquery web ajax 数据库 json 数组栏目 JavaScript 繁體版

原文原文链接

最近一直比较头疼，如何实现realtime图。总结一下须要解决如下问题：javascript

1.如何传输自定义数据php

2.数据要以什么格式传输html

3.是否可以进行局部刷新，也就是ajax请求或者其余方式java

4.同一页面上是否可以异步刷新不一样的div，若是div多的话，会不会很慢jquery

5.实现realtime图的机制是什么，是否能够自定制web

一直研究的echarts前不久刚更新adddata的实时数据接口。因此本身单独抽出来作了个实验。源代码以下：ajax

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mix 2 个图表的效果</title>
<script src="js/esl.js"></script>
<script src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
/**
实验 2个动态图展现，变化方式不一样
*/
require.config({
packages:[
{
name:'echarts',
location:'echarts-master/src',
main:'echarts'
},
{
name:'zrender',
location:'zrender-master/src',
main:'zrender'
}
]
});
var option1 = {
  title : {
    text: '上季度温度变化',
    subtext: '纯属虚构'
  },
  tooltip : {
    trigger: 'axis'
  },
  legend: {
    data:['平均气温']
  },
  calculable : true,
  xAxis : [
    {
      type : 'category',
      boundaryGap : false,
      data : (function(){
        var res = [];
        var len = 100;
        while (len--) {
          res.push(len + 1);
        }
        return res;
      })()
    }
  ],
  yAxis : [
    {
      type : 'value',
      axisLabel : {
        formatter: '{value} °C'
      },
      splitArea : {show : true}
    }
  ],
  series : [
    {
      name:'平均气温',
      type:'line',
      smooth:false,
      itemStyle: {
        normal: {
 color:'#00fa9a',
          areaStyle: {
            shadowColor : 'rgba(0,0,0,0.4)'
          }
        }
      },
      data:dataXRand()
    }
  ]
};
var option2 = {
  title : {
    text: '本季度温度变化化',
    subtext: '纯属虚构'
  },
  tooltip : {
    trigger: 'axis'
  },
  legend: {
    data:['最高气温']
  },
  calculable : true,
  xAxis : [
    {
      type : 'category',
      boundaryGap : false,
      data : (function(){
        var res = [];
        var len = 100;
        while (len--) {
          res.push(len + 1);
        }
        return res;
      })()
    }
  ],
  yAxis : [
    {
      type : 'value',
      axisLabel : {
        formatter: '{value} °C'
      },
      splitArea : {show : true}
    }
  ],
  series : [
    {
      name:'最高气温',
      type:'line',
      smooth:false,
      itemStyle: {
        normal: {
          areaStyle: {
            shadowColor : 'rgba(0,0,0,0.4)'
          }
        }
      },
      data:dataXRand()
    }
  ]
};
var myChart1;
var myChart2;
require(
[
'echarts',
'echarts/chart/line'
],
function(ec){
myChart1=ec.init(document.getElementById('main1'));
myChart1.setOption(option1);
var timeTicket1;
clearInterval(timeTicket1);
timeTicket1 = setInterval(function(){
RandANum1(ec);
}, 300);
myChart2=ec.init(document.getElementById('main2'));
myChart2.setOption(option2);
var timeTicket2;
clearInterval(timeTicket2);
timeTicket2 = setInterval(function(){
RandANum2(ec);
}, 100);
}
)
function RandANum1(ec){
 $.ajax({
url:"./control/AjaxService.php?method=RandANum",
dataType:"text",
success:function(data)
{
 Rdata=eval(data);
 myChart1.addData([
    [
      0,    // 系列索引
      Rdata, // 新增数据
      false,  // 新增数据是否从队列头部插入
      false,  // 是否增长队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
     // axisData // 坐标轴标签
    ]
  ]);
}
});
}
function RandANum2(ec){
 $.ajax({
url:"./control/AjaxService.php?method=RandANum2",
dataType:"text",
success:function(data)
{
 Rdata=eval(data);
 myChart2.addData([
    [
      0,    // 系列索引
      Rdata, // 新增数据
      false,  // 新增数据是否从队列头部插入
      false,  // 是否增长队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
     // axisData // 坐标轴标签
    ]
  ]);
}
});
}
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;
}
</script>
</head>
<body>
<div id="main1" style="height:220px; border:1px solid #ccc; padding:10px;"></div>
<div id="main2" style="height:220px; border:1px solid #ccc; padding:10px;"></div>
</body>
</html>

针对上述5个问题的回答以下：数据库

数据能够存在数据库或者在线，as you like，能够经过AJAX或者jquery库等得到JSON数据而后转成数组,传输给echarts。通常最经常使用的是json格式。无论是ajax、jsonp甚至websocket均可以做为获取数据的方式，这是数据层面的事情不会附加到图表中，你固然能够经过ajax获取数据后展示，咱们的实际应用中基本都是ajax数据~图表提供了loading方法用于获取数据时做为过渡显示~json

实时图数据通常不会从数据库里面读取，因此用php作了一个随机数的生成函数。代码很简单不解释。效果图以下：数组

下面的文章会贴上实现的具体代码。