项目中难免遇到将数据绑定至图表,这时候就可以使用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: [
{
//设置类别