admin 管理员组文章数量: 1184232
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="ECharts">
<title>CPU page</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/echarts2/esl.js"></script>
<script type="text/javascript" src="js/echarts2/echarts-original.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:450px ; width: 95%;"></div>
<script type="text/javascript" >
var myChart;
var eCharts;
var cpu_r = 100;
var cpu_y= '85%';
var cpu_title = '-25%';
var cpu_detail =21;
require([ 'echarts', 'echarts/chart/line' //按需加载图表关于线性图、折线图的部分
], DrawEChart //异步加载的回调函数绘制图表
);
//创建ECharts图表方法
function DrawEChart(ec) {
eCharts = ec;
myChart = eCharts.init(document.getElementById('main'));
myChart.showLoading({
text : "图表数据正在努力加载...",
effect :'whirling',//'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
textStyle : {
fontSize : 20
}
});
//定义图表options
var options = {
backgroundColor: 'white',
title : {
text : "最近10次CPU采样结果",
itemGap :270,
subtext : "当前CPU采样",
subtextStyle :{
fontSize: 15, fontWeight: 'bolder', color: '#333'
},
sublink : ""
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ "空闲率","系统使用率","用户使用率","I/O等待率","告警阀值" ]
},
toolbox : {
show : true,
feature : {
//mark : {show : true},
//dataView : {show : true,readOnly : false},
magicType : {
show : true,type : [ 'line', 'bar' ]
},
//restore : {show : true},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
boundaryGap : false,
data : [ '第1次采样', '第2次采样', '第3次采样', '第4次采样', '第5次采样', '第6次采样', '第7次采样', '第8次采样', '第9次采样', '第10次采样' ]
} ],
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value} %'
},
splitArea : {
show : true
}
} ],
grid 版权声明：本文标题：Echarts大揭秘：打造有温度的折线仪表盘与图例混搭，让数据可视化更有深度！ 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1772446272a3556026.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论