项目中难免遇到将数据绑定至图表,这时候就可以使用echarts控件。
博主近期在项目中,需要将服务器CPU和内存使用率做成一张折线图,要用到绑定动态数据,于是在网上查阅后发现echarts官网中的实例都是死数据,问题解决后写了这篇博客分享给大家。
内含绑定动态数据,toolbox的使用,x轴绑定当前时间,设置多长时间刷新,y轴刻度百分比,多条折线显示隐藏等,尽可能写全一些。
实现的效果和任务管理器性能中的CPU内存使用率相似,如下
实现的服务器CPU和内存使用率效果图如下
echarts插件可以到官网下载,附上传送门,博主下载的是2.2M的源代码,下载完成后解压引用。
<script src="~/Scripts/echarts.js">script>
博主这里先在html页面写上折线图表参数,x轴y轴的数据留空,在创建的封装js中使用异步加载设置参数赋值绑定。
在html页面先图表的基本属性设置好,x轴y轴数据留空。
emmmm,这里加上比较详细的注释,方便大家理解。
//初始化echarts对象,使id为totalRun
var myChart = echarts.init(document.getElementById('totalRun'));
//选项
option = {
//设置背景颜色
backgroundColor: '#00cccc',
//标题
title: {
text: '服务器运行情况监测',
textStyle: {
//设置主标题颜色
color: '#ff0000'
}
},
//提示框
tooltip: {
trigger: 'axis'//当trigger为’item’时只会显示该点的数据,为’axis’时显示该列下所有坐标轴所对应的数据
},
//图例
legend: {
data: arrtitle
},
//工具栏,内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
toolbox: {
show: true,
//toolbox的配置项
feature: {
//辅助线的开关
mark: { show: true },
//数据视图
dataView: {
show: true,
readOnly: false
},
//动态类型切换
magicType: {
show: true,
//line为折线图,bar为柱状图
type: ['line', 'bar']
},
//配置项还原
restore: { show: true },
//将图标保存为图片
saveAsImage: { show: true }
}
},
//可计算特性
calculable: true,
//x轴样式
xAxis: [
{
//设置类别
type: 'category',
//数值起始和结束两端空白策略
boundaryGap: false,
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff',//左边线的颜色
width: '4'//坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#fff'//x轴刻度数值颜色
}
},
data: xdata
}
],
//y轴样式
yAxis: [
{
//设置类别
type: 'value',
//y轴刻度
axisLabel: {
//设置y轴数值为%
formatter: '{value} %',
textStyle: {
color: '#fff'//y轴刻度数值颜色
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff',//y轴坐标轴颜色
width: '4'//坐标轴宽度
}
}
}
],
//数据系列,一个图表可能包含多个系列,每一个系列可能包含多个数据
series: ydata
};
//为echarts对象加载数据
myChart.setOption(option);
yAxis:[
{
axisLabel:{
formatter:'{value} %'
}
}
]
toolbox: {
show: true,
//toolbox的配置项
feature: {
//辅助线的开关
mark: { show: true },
//数据视图
dataView: {
show: true,
readOnly: false
},
//动态类型切换
magicType: {
show: true,
//line为折线图,bar为柱状图
type: ['line', 'bar']
},
//配置项还原
restore: { show: true },
//将图标保存为图片
saveAsImage: { show: true }
}
}
使用toolbox可以使图表出多工具栏,具有多项功能。
toolbox的样式也可以进行更改。
这里的toolbox总共使用了四项:数据视图dataView,动态类型切换magicType,配置项还原restore,图表保存为图片savaAsImage。
数据视图dataView,可以将折线图图表的数据以数字列表形式显示到视图模块中,方便记录数值查看。
动态类型切换magicType,可以改变图表类型,比如将折线图转化为柱状图,这个属性博主在接触到的时候感觉很是神奇2333.
line为折线图,bar为柱状图
图表保存为图片savaAsImage,点击下载按钮,可以将当前图表下载保存为图片到电脑上。
基本图表设置完后,便该进入到创建的封装js中使用异步加载设置参数赋值绑定
前面我们在html页面的基本图表中 data: xdata , series: ydata 和 data: arrtitle,使xy轴数据留空,现在就在新建的js页面中进行设置
//y轴
//这里定义了两条折线,一条CPU,一条内存
var ydata = [
{
name: '服务器CPU平均值',
//line为折线类型
type: 'line',
data: [0],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '服务器内存平均值',
type: 'line',
data: [0],
//设置折线颜色
itemStyle: {
normal: {
lineStyle: {
color: '#8A8A8A'
}
}
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
}
];
//x轴
//定义数组
var xdata = new Array();
var arrtitle = ['服务器CPU平均值', '服务器内存平均值'];//标题
var now = new Date();//获取当前时间
//随机数
var value = [
{ "name": "aaa", "value": 4 },
{ "name": "bbb", "value": 3 }
]
x轴上绑定当前时间其实很简单,只需要一句,重要的是写对位置。
var now = new Date();//获取当前时间
x轴y轴参数设置好后,该进行最后的赋值绑定了
emmmm,这里也会注释好帮助理解 -.-
//赋值
function randomData() {
//debugger用来网页F12调试错误
debugger;
//定义CPU MEMORY内存为null
var CPU = null;
var MEMORY = null;
//这里获取token值,token值是为了判断用户的登录状态,
var tokens = $.parseJSON(getCookie(sessionCookie));
//判断
if (tokens == null || tokens == "null") {
window.location.href = backUrl;
return false;
}
var token = tokens.TOKEN;
$.ajax({
type: "GET",
dataType: "json",
cache: false,
ContentType: "application/json",
//方法里只有一个参数token
data: {
strToken: token
},
//博主项目是封装好的方法,这里的url地址输入你们项目的得到服务器CPU内存的方法的路径就好了。
url: qpjk_host + "控制器名/GetServiceCPUMEMORY",
success: function (data) {
var result = data;
//判断status值,是1就赋值给前面定义CPU和MEMORY,否则为0
if (result[0]._status == 1 || result[0]._status == "1") {
CPU = result[1][0].SERVERCPU;
MEMORY = result[1][0].SERVERMEMORY;
} else {
CPU = 0;
MEMORY = 0;
}
now = new Date();
if (xdata.length >= 10) {
xdata.shift();
}
xdata.push(now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());
//循环服务器
//循环服务器:服务器在同一个时刻只可以响应一个客户端的请求
for (var i = 0; i < arrtitle.length; i++) {
if (ydata[i].data.length >= 10) {
ydata[i].data.shift();
}
if (ydata[i].name == '服务器CPU平均值') {
ydata[i].data.push(CPU);
}
else if (ydata[i].name == '服务器内存平均值') {
ydata[i].data.push(MEMORY);
}
}
},
error: function (msg) {
for (var i = 0; i < arrtitle.length; i++) {
if (ydata[i].data.length >= 10) {
ydata[i].data.shift();
}
if (ydata[i].name == '服务器CPU平均值') {
ydata[i].data.shift(0);
}
else if (ydata[i].name == '服务器内存平均值') {
ydata[i].data.push(0);
}
}
}
});
}
//这里做定时器,用setInterval可以实现定时循环刷新
setInterval(function () {
randomData();
//这里是前面html页面中的'Main'
var myChart = echarts.init(document.getElementById('Main'));
//传入前面xdata,ydata的赋值
myChart.setOption({
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xdata
}
],
series: ydata
});
}, 1000 * 5);//5秒钟一刷新
1000*5是 1000毫秒=1秒 *5,
一分钟是1000*60
一小时是1000*60*60
一天是1000*60*60*24
以此类推
legend属性可以设置折线的显示与隐藏
//图例
legend: {
data: ['服务器CPU平均值', '服务器内存平均值']
}
点击最上方副标题中‘服务器内存平均值’隐藏,则折线图只显示‘服务器CPU平均值’,再次点击显示。
如果有理解不对的地方,欢迎指出一起进步!(:з」∠)