这里我就直接上代码了:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>监控</title>
<!-- 引入 ECharts 文件 -->
<script src="/js/echarts/echarts.min.js"></script>
<script src="/js/jquery.min.js-v=2.1.4.js" ></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
//显示标题，图例和空的坐标轴
var option = {
//设置标题
title: {
text: "CPU/内存百分比",
padding:[2,0,0,70]
},
//设置顶部图列说明
legend: {
data:["CPU","内存"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
//设置工具栏
toolbox: {
feature: {
//下载图标
saveAsImage: {}
}
},
//设置X轴内容
xAxis: {
//设置类型曲线
type: "category",
boundaryGap: false,
data:[]
},
//设置y轴
yAxis: {
type: "value",
name:"百分比",
nameLocation:"center",
nameGap:40,
min:0,
max:100,
interval:10,
silent:true,
axisLabel: {
show: "true",
interval: "auto",
formatter: "{value}%"
},
show: "true"
},
//设置缩放条
dataZoom: [
{
//设置可鼠标拉动
type: "slider",
//设置开始百分比
start: "0",
//设置结束百分比
end: "100"
},
{
//设置可鼠标滚轮可用在图标中和进行缩放
type: "inside",
start: "0",
end: "100"
}
],
//设置图标中的数据
"series": [
{
"name":"CPU",
"type":"line",
"stack": "%",
"data":'.$cpu.'
},
{
"name":"内存",
"type":"line",
"stack": "%",
"data":'.$memory.'
}
]
};
myChart.setOption(option,true);
// 异步加载数据
$.get("https://www.32e.top").done(function (data) {
var option = {
title: {
text: "CPU/内存百分比",
padding:[2,0,0,70]
},
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var htmlStr = '';
for(var i=0;i<params.length;i++){
var param = params[i];
var xName = param.name;//x轴的名称
var seriesName = param.seriesName;//图例名称
var value = param.value;//y轴值
var color = param.color;//图例颜色
if(i===0){
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr +='<div>';
// 具体显示的数据【字段名称：seriesName，值：value】
// 这里判断一下name，如果是我们需要特殊处理的，就处理
if(seriesName === '进程Top 10'){
// 前面一条线，后面一条线【具体样式自己写】
htmlStr += '<div style="border: 1px solid #FFEB3B"></div>';
htmlStr += seriesName +':<br />' + value;
}else{
// 正常显示的数据，走默认
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
htmlStr += seriesName + '：' + value + '%';
}
htmlStr += '</div>';
}
return htmlStr;
}
},
legend: {
data:["CPU","内存"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: "true"
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
data: data.map(function (item) {
return item[0];
})
},
yAxis: {
type: "value",
name:"百分比",
nameLocation:"center",
nameGap:40,
min:0,
max:100,
interval:10,
silent:true,
axisLabel: {
show: "true",
interval: "auto",
formatter: "{value}%"
},
show: "true"
},
dataZoom: [
{
type: "slider"
},
{
type: "inside"
}
],
series: [
{
name:"CPU",
type:"line",
data:data.map(function (item) {
return item[1];
}),
},
{
name:"内存",
type:"line",
data:data.map(function (item) {
return item[2];
})
},
{
name:"进程Top 10",
type:"line",
data:data.map(function (item) {
return item[3];
})
},
]
}
// 填入数据
myChart.setOption(option,true);
});
</script>
</body>
</html>
代码里面基本都有注释所以不用解释太多，上面我进行了两次填入数据，第一次是为了先把坐标画好，第二次是从后台请求数据以后再吧数据填充以后再重绘。可以达到比较顺滑的目的。对了说一下，后台返回的是json数据类似:[[1,2,3],[1,2,3],[1,2,3]]
好了教程就到此为止。先忙其他的去了。
除特别注明外，本站所有文章均为博文家原创，转载请注明出处来自https://www.32e.top/develop/js/article-105.html
暂无评论