<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style>
.chart{
width: 500px;
height:200px;
}
</style>
</head>
<body style="height: 100%; margin: 0">
<!--<div id="container" style="height: 500px; width: 100%" ></div>-->
<div id = "pchart"></div>
<a href="./page/addapi.html" target="_blank">添加api</a>
<script type="text/javascript" src="js/echarts/echarts.js"></script>
</body>
<script type="text/javascript">
<!--页面刷新的时候执行 -->
$(document).ready(function(){
var dataResult = [];
buildChart();
});
function buildChart(){
$.ajax({
type:"POST",
url : "/list",
contentType: "application/json", //必须这样写
dataType:"json",
success:function(json){
$("#pchart").empty();
var chart = "";
for(var i = 0; i < json.result.length;i++){
const promise = (i)=>{
return new Promise((resolve,reject) => {
chart += "<p id='chart"+i+"' class='chart'></p>";
resolve(i);
})
}
promise(i).then((i)=>{
buildChartJS(i,json.result[i].url,json.result[i].method,json.result[i].params);
})
// chart += "<p id='chart"+i+"' class='chart'></p>";
// buildChartJS(i);
}
$("#pchart").append(chart);
}
})
}
function buildChartJS(i,url,method,params){
var Chart=echarts.init(document.getElementById('chart'+i));//初始化
//用户等待
Chart.showLoading(
{text: 'Loding...' }
);
//自定义变量
// var ids = 1;
getData(Chart,url,method,params); //先执行一次,以防等十秒后才出现图表
// setInterval(function(){//定时器
// getData(Chart, ids);
// }, 10*1000);//每隔10秒刷新一次
}
//获取数据的方法
function getData(Chart,url,method,params){
console.log(url,66666333333333)
var option = {
title: {
text: '心跳检测'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['hello']
},
dataZoom:[{
startValue:new Date()},{
type: 'inside',
show: true,
filterMode: "filter"
}],
xAxis: {
type: 'time',
data:[],
offset: 0, //偏移量 多个y轴的时候用
position: "bottom", //x轴位置
name: "时间",
nameLocation: "end",
nameGap: 15,
nameRotate: null,
min: null,//坐标刻度的最小值
max: null,//坐标刻度的最大值
minInterval: 2
},
yAxis: {
show: true, //是否显示y轴
position: "left",//设置y轴的位置
type: 'value',
},
series : [{
name:"hello",
type:'line',
data:[]
}]
};
Chart.hideLoading();
Chart.setOption(option);
//发送Ajax请求
// "result":[{"id":1,"url":"http://127.0.0.1:8080/say_hello","method":0,"params":"{}"},{"id":2,"url":"http://127.0.0.1:8080/say_hi","method":1,"params":null}],"pager":null,"timestamp":1581947814184}
this.setInterval(function () {
// dataResult
$.ajax({
type:"POST",
url : "/heart-beat",
contentType: "application/json", //必须这样写
dataType:"json",
data:JSON.stringify({}),
// data:{},
success:function(json){//
console.log("获取图表数据");
console.log(json);
var data0 = option.series[0].data;
var x = [new Date(), json.result];
data0.push({ name: x[0], value: x})
//结束
// Chart.hideLoading();
Chart.setOption({ series: option.series });
},
beforeSend: function(xhr) {
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("method", method);
xhr.setRequestHeader("url", url);
}
})
}, 1000)
}
</script>
</html>
04-12
11-20