项目中难免遇到将数据绑定至图表，这时候就可以使用echarts控件。
博主近期在项目中，需要将服务器CPU和内存使用率做成一张折线图，要用到绑定动态数据，于是在网上查阅后发现echarts官网中的实例都是死数据，问题解决后写了这篇博客分享给大家。
内含绑定动态数据，toolbox的使用，x轴绑定当前时间，设置多长时间刷新，y轴刻度百分比，多条折线显示隐藏等，尽可能写全一些。
实现的效果和任务管理器性能中的CPU内存使用率相似，如下
实现的服务器CPU和内存使用率效果图如下
一、首先需要引用echarts插件
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);y轴百分比刻度
yAxis:[
{
axisLabel:{
formatter:'{value} %'
}
}
]toolbox的使用
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。
1、数据视图
数据视图dataView，可以将折线图图表的数据以数字列表形式显示到视图模块中，方便记录数值查看。
2、动态类型切换
动态类型切换magicType，可以改变图表类型，比如将折线图转化为柱状图，这个属性博主在接触到的时候感觉很是神奇2333.
line为折线图，bar为柱状图
3、配置还原顾名思义没什么好说的
4、图表保存为图片
图表保存为图片savaAsImage，点击下载按钮，可以将当前图表下载保存为图片到电脑上。
基本图表设置完后，便该进入到创建的封装js中使用异步加载设置参数赋值绑定
三、设置x轴y轴参数
前面我们在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轴绑定当前时间
x轴上绑定当前时间其实很简单，只需要一句，重要的是写对位置。
var now = new Date();//获取当前时间
12点该吃饭了…
四、使用ajax进行赋值绑定
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平均值’，再次点击显示。
最终效果图展示
如果有理解不对的地方，欢迎指出一起进步！(:з」∠)
