q:'SELECT sum("value_sum") / 30 FROM "[KNI]link_pending" WHERE time >= now() - 6h GROUP BY time(30s) fill(0);SELECT sum("value_sum") / 30 FROM "[KNI]link_unknown" WHERE time >= now() - 6h GROUP BY time(30s) fill(0);SELECT sum("value_sum") / 30 FROM "[KNI]link_asym" WHERE time >= now() - 6h GROUP BY time(30s) fill(0);SELECT sum("value_sum") / 30 FROM "[KNI]link_intercept" WHERE time >= now() - 6h GROUP BY time(30s) fill(0);SELECT sum("value_sum") / 30 FROM "[KNI]link_whitelist" WHERE time >= now() - 6h GROUP BY time(30s) fill(0);SELECT sum("value_sum") / 30 FROM "[KNI]link_not_hit" WHERE time >= now() - 6h GROUP BY time(30s) fill(0)'
q:'SELECT mean("50_percentile_sum") FROM "[FP]ssl_down(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(linear);SELECT mean("60_percentile_sum") FROM "[FP]ssl_down(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(linear);SELECT mean("90_percentile_sum") FROM "[FP]ssl_down(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(linear);SELECT mean("mean_sum") FROM "[FP]ssl_down(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(linear);SELECT mean("upper_sum") FROM "[FP]ssl_down(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(linear)'
q:'SELECT mean("50_percentile_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none);SELECT mean("60_percentile_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none);SELECT mean("90_percentile_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none);SELECT mean("99_percentile_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none);SELECT mean("mean_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none);SELECT mean("upper_sum") FROM "[FP]ssl_up(ms)" WHERE time >= now() - 6h GROUP BY time(20s) fill(none)'
}
},
};
function renderChart(systemId){
var influxdb = influxdbSource[systemId];
var addr = influxdb.addr;
var $templateClone = $("#template").clone();
$templateClone.attr("id",systemId);
$templateClone.find(".addr").html(addr);
$("#container").append($templateClone);
$.each(queryInfo,function(key,info){
var $part = $templateClone.find("."+key);
var title = info.title;
var data = info.data;
var yAxisName = info.yAxisName;
var legengData = data.legend;
var series = [];
$.each(legengData,function(i,n){
series.push({
name: n,
symbol:"none",
type: 'line',
data: []
});
});
var Chart=echarts.init($part[0]);//初始化
Chart.showLoading({text : "loading..."});
var option = {
title: {
text: title ,left:"49%"
},
tooltip: {
trigger: 'axis',
formatter: function(params){
var dateTime ;
var result = "";
$.each(params,function(i,n){
console.log(n);
if(!dateTime){
dateTime = (new Date(n.value[0])).Format("yyyy-MM-dd hh:mm:ss");//n.value[0];
}
result += "<br/>" +n.marker + n.seriesName +": " + (n.value[1]?n.value[1].toFixed(0):"");
});
return dateTime + result;
}
},
legend: {
data:legengData,
left:20,
bottom:5
},
xAxis: {
type: 'time',
timeFormat: 'hh:mm',
splitNumber:6
},
yAxis: {
type: 'value',
name:yAxisName,
nameLocation:"middle",
nameTextStyle:{
padding:30
}
},
series: series
};
Chart.setOption(option);
});
}
//刷新数据
function refreshData(){
$("#container > .section").each(function(i,n){
var $section = $(this);
var systemId = $section.attr("id");
var influxdb = influxdbSource[systemId];
$.each(queryInfo,function(key,info){
var $part = $section.find("."+key);
var title = info.title;
var data = info.data;
var legengData = data.legend;
$.ajax({//ajax请求获取数据
type : "POST",
url : influxdb.url,
crossDomain:true,//请求偏向外域
data:{
db:data.db,//查询的数据库名
q:data.q //查询语句
},
dataType : "json",
success : function(data) {
var results = data.results;//返回的result为json格式的数据
var series = [];
$.each(results, function(index, result) {
var s = result["series"];
var values = s ? s[0].values : [];
series.push({
name: legengData[index],
type: 'line',
data: values
});
});
var Chart=echarts.getInstanceByDom($part[0]);//获取echarts实例
Chart.showLoading({text : "loading..."});
var option = { series: series };
Chart.setOption(option);
Chart.hideLoading();
}
});
});
});
}
$(function(){
if(systemId == '-1'){//显示所有地区的图表
$.each(influxdbSource,function(key,value){
renderChart(key);
});
}else{//只显示当前登录的图表
renderChart(systemId);
}
//首次加载数据
refreshData();
//定时刷新功能
setInterval(function(){
refreshData();
}, refreshInterval);
});
// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
