山东网站建设网站,我国网站开发,全国中小企业网,旺道seo软件技术#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 #x1f… 作者主页Java李杨勇 简介Java领域优质创作者、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我都给你】 欢迎点赞 收藏 ⭐留言 动图演示 文末获取源码 代码目录 主要代码实现 主页HTML布局 /scripttitleTIZA STAR大数据运维总览图/title/headbodydiv classmaindiv idlayer02 classlayer styleheight:15%;div idlayer02_01 stylewidth:20%;div classlayer02-dataspan stylefont-size:26px;400000/spanspan stylefont-size:16px;台/span/divcanvas width200 height100/canvas/divdiv idlayer02_02 stylewidth:20%;div classlayer02-dataspan stylefont-size:26px;400000/spanspan stylefont-size:16px;KB/span/divcanvas width200 height100/canvas/divdiv idlayer02_03 stylewidth:21%;div classlayer02-dataspan stylefont-size:26px;31457280/spanspan stylefont-size:16px;MB/span/divcanvas width200 height100/canvas/divdiv idlayer02_04 stylewidth:12%;div classlayer02-dataspan stylefont-size:26px;50/spanspan stylefont-size:16px;PB/span/divcanvas width120 height100/canvas/divdiv idlayer02_05 stylewidth:12%;div classlayer02-dataspan stylefont-size:26px;25/spanspan stylefont-size:16px;个/span/divcanvas width120 height100/canvas/divdiv idlayer02_06 stylewidth:12%;div classlayer02-dataspan stylefont-size:26px;5/spanspan stylefont-size:16px;个/span/divcanvas width120 height100/canvas/div/divdiv idlayer03 classlayer styleheight:40%;div idlayer03_left stylewidth:48%; classlayer03-paneldiv idlayer03_left_label01 classlayer03-left-label接入机型占比/div!--div idlayer03_left_label02 classlayer03-left-label(左)在线数量 (右)上线率/div--div idlayer03_left_01 classlayer03-left-chart stylewidth:16%;canvas width100 height200 stylemargin:30px 0 0 20px;/canvas/divdiv idlayer03_left_02 classlayer03-left-chart stylewidth:80%;/div!--div idlayer03_left_03 classlayer03-left-chart stylewidth:80%;/div--/divdiv idlayer03_right stylewidth:50%; classlayer03-paneldiv idlayer03_right_label存储/divdiv idlayer03_right_chart01 classlayer03-right-chartcanvas width130 height150 stylemargin:40px 0 0 20px;/canvasdiv classlayer03-right-chart-labelHdfs/div/divdiv idlayer03_right_chart02 classlayer03-right-chartcanvas width130 height150 stylemargin:40px 0 0 20px;/canvasdiv classlayer03-right-chart-labelRdbms/div/divdiv idlayer03_right_chart03 classlayer03-right-chartcanvas width130 height150 stylemargin:40px 0 0 20px;/canvasdiv classlayer03-right-chart-labelRdies/div/div/div/divdiv idlayer04 classlayer styleheight:30%;div idlayer04_left classlayer04-paneldiv idlayer04_left_label classlayer04-panel-label30天日均线流量趋势/divdiv idlayer04_left_chart classlayer04-panel-chart/div/divdiv idlayer04_right classlayer04-paneldiv idlayer04_right_label classlayer04-panel-labelspan集群性能//spanspan stylecolor:#00A09A;近一个小时/span/divdiv idlayer04_right_chart classlayer04-panel-chart/div/div
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%;}
作品来自于网络收集、侵权立删
上面的图片文件以及js文件等需要引入进来 源码获取 大家点赞、收藏、关注、评论啦 、查看微信公众号获取 打卡 文章 更新 58/ 100天 专栏推荐阅读 EChartsHTML5大数据模板《100套》 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
