<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body{background-image: url(images/nybj.png);background-size:100% 100%;font-weight:bold;font-family:苹方;overflow: hidden;}
.main{width:1024px;height:768px;position:relative;margin:auto;}
div{border:0px solid white;margin:1px;}
.layer{position:relative;width:100%;}
#layer01{}
#layer01 img{text-align: center;display: block;height: 35px;padding-top: 35px;margin: auto;}
#layer02 > div{height:100%;float:left;position:relative;}
.layer02-data{position: absolute;width: auto;height: 100px;color: white;top: 45px;left: 65px;}
.layer03-panel{height:100%;position:relative;float:left;}
.layer03-left-label{position:absolute;}
#layer03_left_label01{top:10px;left:10px;color:white;height:20px;width:200px;font-weight: bold;}
#layer03_left_label02{right:10px;top:10px;color:#036769;height:20px;width:200px;}
.layer03-left-chart{position:relative;float:left;height:100%;}
#layer03_right_label{position:absolute;top:10px;left:10px;color:white;height:20px;width:100px;}
.layer03-right-chart{position:relative;float:left;height:100%;width:32%;}
.layer03-right-chart-label{color: white;text-align: center;position: absolute;bottom: 60px;width: 100%;}
.layer04-panel{position:relative;float:left;height:100%;width:48%;}
.layer04-panel-label{width:100%;height:15%;color:white;padding-top:5px;}
.layer04-panel-chart{width:100%;height:85%;}
</style>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script src="monitor.js"></script>
<script type="text/javascript">
$(function(){
drawLayer02Label($("#layer02_01 canvas").get(0),"接入终端数量",80,200);
drawLayer02Label($("#layer02_02 canvas").get(0),"今日接入数据数量",80,300);
drawLayer02Label($("#layer02_03 canvas").get(0),"今日新增存储数据",80,400);
drawLayer02Label($("#layer02_04 canvas").get(0),"总存储数据",50,200);
drawLayer02Label($("#layer02_05 canvas").get(0),"当前任务个数",40,200);
drawLayer02Label($("#layer02_06 canvas").get(0),"当前集群数",50,200);
renderLegend();
//饼状图
renderChartBar01();
//renderChartBar02();
//存储
renderLayer03Right();
//30天日均线流量趋势
renderLayer04Left();
//集群性能
renderLayer04Right();
});
</script>
<title>TIZA STAR大数据运维总览图</title>
</head>
<body>
<div class="main">
<div id="layer02" class="layer" style="height:15%;">
<div id="layer02_01" style="width:20%;">
<div class="layer02-data">
<span style="font-size:26px;">400000</span>
<span style="font-size:16px;">台</span>
</div>
<canvas width="200" height="100"></canvas>
</div>
<div id="layer02_02" style="width:20%;">
<div class="layer02-data">
<span style="font-size:26px;">400000</span>
<span style="font-size:16px;">KB</span>
</div>
<canvas width="200" height="100"></canvas>
</div>
<div id="layer02_03" style="width:21%;">
<div class="layer02-data">
<span style="font-size:26px;">31457280</span>
<span style="font-size:16px;">MB</span>
</div>
<canvas width="200" height="100"></canvas>
</div>
<div id="layer02_04" style="width:12%;">
<div class="layer02-data">
<span style="font-size:26px;">50</span>
<span style="font-size:16px;">PB</span>
</div>
<canvas width="120" height="100"></canvas>
</div>
<div id="layer02_05" style="width:12%;">
<div class="layer02-data">
<span style="font-size:26px;">25</span>
<span style="font-size:16px;">个</span>
</div>
<canvas width="120" height="100"></canvas>
</div>
<div id="layer02_06" style="width:12%;">
<div class="layer02-data">
<span style="font-size:26px;">5</span>
<span style="font-size:16px;">个</span>
</div>
<canvas width="120" height="100"></canvas>
</div>
</div>
<div id="layer03" class="layer" style="height:40%;">
<div id="layer03_left" style="width:48%;" class="layer03-panel">
<div id="layer03_left_label01" class="layer03-left-label">接入机型占比</div>
<!--
<div id="layer03_left_label02" class="layer03-left-label">(左)在线数量 (右)上线率</div>
-->
<div id="layer03_left_01" class="layer03-left-chart" style="width:16%;">
<canvas width="100" height="200" style="margin:30px 0 0 20px;"></canvas>
</div>
<div id="layer03_left_02" class="layer03-left-chart" style="width:80%;"></div>
<!--
<div id="layer03_left_03" class="layer03-left-chart" style="width:80%;"></div>
-->
</div>
<div id="layer03_right" style="width:50%;" class="layer03-panel">
<div id="layer03_right_label">存储</div>
<div id="layer03_right_chart01" class="layer03-right-chart">
<canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
<div class="layer03-right-chart-label">Hdfs</div>
</div>
<div id="layer03_right_chart02" class="layer03-right-chart">
<canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
<div class="layer03-right-chart-label">Rdbms</div>
</div>
<div id="layer03_right_chart03" class="layer03-right-chart">
<canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
<div class="layer03-right-chart-label">Rdies</div>
</div>
</div>
</div>
<div id="layer04" class="layer" style="height:30%;">
<div id="layer04_left" class="layer04-panel">
<div id="layer04_left_label" class="layer04-panel-label">30天日均线流量趋势</div>
<div id="layer04_left_chart" class="layer04-panel-chart"></div>
</div>
<div id="layer04_right" class="layer04-panel">
<div id="layer04_right_label" class="layer04-panel-label">
<span>集群性能/</span><span style="color:#00A09A;">近一个小时</span>
</div>
<div id="layer04_right_chart" class="layer04-panel-chart"></div>
</div>
</div>
</div>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
基于echarts后台统计图首页
共37个文件
png:32个
js:4个
html:1个
4星 · 超过85%的资源 需积分: 50 29 下载量 13 浏览量
2018-07-18
11:31:32
上传
评论 1
收藏 498KB ZIP 举报
温馨提示
echarts后台统计图首页,有折线图、饼图、等.......................
资源推荐
资源详情
资源评论
收起资源包目录
echarts.zip (37个子文件)
echarts
monitor.js 10KB
echarts_4.1.0.rc2_echarts.min.js 701KB
jquery-3.1.0.min.js 84KB
citystore.js 49KB
images
jx6.png 384B
gy-tt.png 3KB
gy-lk.png 608B
jdian.png 179B
wl-tt.png 4KB
jx5.png 385B
yw-tt.png 6KB
gy-rt1.png 579B
gy-kgx.png 574B
jx2.png 359B
gy-rt.png 573B
wg.png 146B
gy-taix.png 688B
ss.png 902B
jk.png 2KB
jx4.png 379B
nybj.png 54KB
gy-bj.png 134KB
cc.png 438B
jx7.png 364B
gy-scx.png 247B
cdian.png 179B
w-lx.png 342B
jx1.png 379B
yw-x.png 539B
jh.png 3KB
bj.png 1KB
zj.png 6KB
lx.png 951B
jx3.png 367B
xx.png 996B
gy-lk1.png 614B
index.html 6KB
共 37 条
- 1
资源评论
- cdandvcd2020-05-08非常好用,解决了大问题
白了个黑
- 粉丝: 0
- 资源: 5
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功