最近一直比較頭疼，如何實現realtime圖。總結一下需要解決以下問題：
1.如何傳輸自定義數據
2.數據要以什麼格式傳輸
3.是否能夠進行局部刷新，也就是ajax請求或者其他方式
4.同一頁面上是否能夠異步刷新不同的div，如果div多的話，會不會很慢
5.實現realtime圖的機制是什麼，是否可以自定製
一直研究的echarts前不久剛更新adddata的實時數據接口。所以自己單獨抽出來做了個實驗。源代碼如下：
<!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方法用於獲取數據時作爲過渡顯示~
實時圖數據一般不會從數據庫裏面讀取，所以用php做了一個隨機數的生成函數。代碼很簡單不解釋。效果圖如下：
下面的文章會貼上實現的具體代碼。