🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝 ??

效果演示：?文末獲取源碼?

交通分析

輿情分析

矛盾糾紛分析

人口分析

活動情況分析

代碼目錄：

部分代碼實現：

全局CSS樣式：

/****** PLACE YOUR CUSTOM STYLES HERE ******/body {position: fixed;top: 0;bottom: 0;left: 0;right: 0;margin: 0;padding: 0; background:#051655 ;font-family: 微軟雅黑, MicrosoftYahei, sans-serif; color:#fff;}h1, h2, h3, h4, h5, h6, p, ul, ol, pre, table, blockquote, input, button, select,em, textarea {margin: 0; font-weight:normal;margin: 0;padding: 0;list-style: none;font-style: normal; } html,body{ font-family: 微軟雅黑, MicrosoftYahei, sans-serif; color:#fff; background:#00065b url(../img/bg.jpg); background-size: 100% 100%;background-position:0 0; width: 100%; height: 100%; background-repeat: no-repeat;} .wpbox{width: 100%;height: calc(100% - 10px) }.bnt{ height:9%; width: 100%; display: inline-block;} .left1{ width: 18%; height: calc(100% - 10%);float: left; padding-left:2.2%; text-align: center;} .pleft1{width: 18.6%; float: left; padding-left:2.2%; text-align: center;} .puleft{padding-left:2.2%; width: 35.2%;text-align: center; height: 100%} .puleft2{width: 35%; height: 100%; padding-left: .4%} .mr_right{width: 25%; height: 100%} .left2{width: 18%; float: left; height: 100%} .mrbox{float: left; width: 79%; height: 100%} .mrbox.prbox{float: left; width: 60%; height: 100%} .mrbox_bottom{float: left; width: 100%; height: 28%} .mrbox_top_midd{ width: 68%;float: left; height: 100%;} .mrbox_topmidd{float: left; width:76%; padding-left:.2%;height: 100%;} .amidd_bott,.box{ overflow: hidden;} .pmidd_bott{ width: 100%; height: 57.4%;}.mrbox_top_right{ float: right; width: 29.4%; padding-right: 1.4%; height: 100%} .mrbox_top{width: 100%; height:62.4%;} .hdmrbox_top{width: 100%; height:100%;}.lefttime{ background:url(../img/time.png); background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:84%; height:9.3%; margin-left: 6%} .lefttime_text{ padding: 2% 5% 0 5%}.lefttime_text li{ font-size: 12px; color: rgba(255,255,255,.9); width: 20%;float: left; height: 22px; line-height: 22px;text-align: center; border-radius: 4px}.lefttime_text li.bg{ background: rgba(0,183,238,.1);}.lefttime_text li.active{ background: rgba(0,183,238,.6); color: #fff;} */ .lefttoday{background:url(../img/left1box.png);background-repeat: no-repeat;background-position: -3px 2px; width:350px; height:584px;margin: 0 auto;}.lefttoday_tit{ overflow: hidden; padding: 1.9% 5% .2%; height: 6%; position: relative;} .lefttoday_tit.height{height: 12%;} .lefttoday_number{overflow: hidden; height: 74%; width: 91%; margin: 1% 4%;background: rgba(1,202,217,.2);} .lefttoday_tit p.fl{ font-size: 12px; color: rgba(255,255,255,1); position: absolute;left: 5%;top: 22%} .lefttoday_tit p.fr{ font-size: 12px; color: rgba(255,255,255,.6); position: absolute;right: 5%;top: 25%} .lefttoday_tit p.fm{font-size: 12px; color: rgba(255,255,255,1); position: absolute;left: 40%;top: 25%}.lefttoday_tit.height.ht{height: 16%;} .lefttoday_tit.height p.fl{position: absolute;left:5%;top: 15%;} .lefttoday_tit.height p.fr{position: absolute;left:5%;top: 65%; right: auto;}.lefttoday_bar ul{position: relative; width: 100%; height: 100%;} .lefttoday_bar li{ color: #333; position: absolute;border-radius: 50%; font-size: 12px; overflow: hidden; font-weight: normal; text-align: center; line-height: 140%} .lefttoday_bar li span{ padding-top: 30%; display: inline-block;} .c1{ background: #ac3ff2} .c2{ background: #ffff00} .c3{ background: #0078ff} .c4{ background: #9cff00} .c5{ background: #ff6c00} .c6{ background: #77b5fb} .big0{ width: 10px; height: 10px} .big1{ width: 20px; height: 20px} .big2{ width: 30px; height: 30px} .big3{ width: 40px; height: 40px} .big4{ width: 50px; height: 50px} .big5{ width: 60px; height: 60px} .big6{ width: 70px; height: 70px;}.leftclass{background:url(../img/leftb1.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:350px; height:291px;} .leftbox2_table{background:url(../img/leftbox2.png);background-repeat: no-repeat;background-position: -2px -2px; width:354px; height:680px;} .left2_table{ width: 91%; margin-left: 5%; font-size: 12px;height:83.6%; overflow: hidden;} .hdleft2_table{ width: 91%; margin-left: 5%; font-size: 12px;height:91.6%; overflow: hidden;} .left2_table li{background: rgba(1,202,217,.2) url(../img/icosjx.png) no-repeat top left; position: relative;overflow: hidden; padding: 2% 6%; color:rgba(255,255,255,.7); line-height: 150%} .left2_table li b{color:rgba(255,255,255,1); font-weight: normal;} .left2_table li p.fl{ width: 80%; overflow: hidden;} .left2_table li p.fr{ position: absolute; right: 5%; top: -20%;} .yellow{ color: #fff45c} .green{ color: #00c2fd} .left2_table li.bg{ background: rgba(0,255,255,.4) url(../img/icosjx.png) no-repeat top left;} .mrbox_tr_box{background:url(../img/rbox1.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:354px; height:291px;}.mrboxtm-mbox{background:url(../img/midtop.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height: 63.6%;} .mrboxtm-b1{background:url(../img/mbox1.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:460px; height:233px; float: left;} .mrboxtm-b2{background:url(../img/mbox2.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center;width:330px; height:233px;float: right;} /* .mrbox_tr_box{background:url(../img/rbox1.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:350px; height:680px;} */.hdmrboxtm-mbox{background:url(../img/hdbj.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:100%; height: 61.6%;}.rbottom_box1{background:url(../img/b-rbox2.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:33.5%; height:89.4%; float: left;} .rbottom_box2{background:url(../img/bbox2.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:33.5%; height:89.4%;float: left; margin-left:.8%} .rbottom_box3{background:url(../img/b-rbox2.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width:30%; height:89.4%;float: left; margin-left:1%} .prbottom_box1cont{ margin-left: 5.2%; width: 90.6%; height: 82%; margin-top: 1.8%;} .prbottom_box2cont{ margin-left: 5.2%; width: 90.6%; height: 82%; margin-top: 1.8%;} .prbottom_box3cont{ margin-left: 5.2%; width: 90.6%; height: 82%; margin-top: 1.8%;}.tith2{ text-align: center; width: 100%; font-size: 12px; padding-top: 1.9%; font-weight: normal;letter-spacing:2px; font-weight: normal; overflow: hidden;} .fl{ float: left;} .fr{ float: right;} .topbnt_left{width: 33%} .topbnt_left ul{ padding-top: 38px; padding-left: 10%; width: 100%} .topbnt_left li { background:url(../img/bnt.png) center; font-size: 14px; line-height: 33px;background-repeat: no-repeat;width:18%; height:35px;float: left; text-align: center; margin-left: 1%} .topbnt_left li.active,.topbnt_right li.active{background:url(../img/bntactive.png) no-repeat center; } .topbnt_left li a{ text-decoration: none; color: #fff;} .tith1{ width: 33%; text-align: center; padding-top: 16px; font-weight: bold; letter-spacing:8px; font-size: 36px;} .topbnt_right{padding-top: 2%; padding-right:2.5%; width: 27%} .topbnt_right li { background:url(../img/bnt.png) center; font-size: 14px; line-height: 33px;background-repeat: no-repeat;width:22%; height:35px;float: right; text-align: center; margin-right:1%} .topbnt_right li a{ text-decoration: none; color: #fff;} .pt1{padding-top: 1.3%; } .pt2{padding-top: 2.2%; } .pt3{padding-top: 3.3%; } .pt6{padding-top: 6px; } .pt17{ padding-top: 17px;} .pt14{ padding-top: 14px} .pt12{ padding-top: 12px} .pt20{ padding-top: 22px;} /* .box_pad{ margin: 3px 20px; } */.mrboxtm-map{background:url(../img/mapbg.png); background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width: 90%; margin-left: 4%; margin-top: 1%;height: 90%;position: relative;} .hdmrboxtm-map{background:url(../img/hdmap.png);background-size: 100% 100%; background-repeat: no-repeat;background-position: top center; width: 90%; margin-left: 4%; margin-top: 1%;height: 66%; position: relative;} .mrboxtm-map li{ width: 23px; height: 22px; line-height: 22px; color: #fff; text-align: center; background-position: center; background-repeat: no-repeat;font-size: 12px; position: absolute;} ./* 交通分析*/

?活動分析頁面布局：

<div class="bnt"><div class="topbnt_left fl"><ul><li ><a href="#">警情警力</a></li><li ><a href="#">人口分析</a></li><li class="active"><a href="#">活動情況</a></li><li><a href="#">矛盾糾紛</a></li></ul></div><h1 class="tith1 fl">活動情況分析</h1><div class=" fr topbnt_right"><ul><li><a href="#">返回</a></li><li><a href="#">分析報告</a></li><li><a href="#">交通</a></li><li><a href="#">輿情</a></li></ul></div> </div> <!-- bnt end --> <div class="left1 pleft1"><div class="lefttime"><h2 class="tith2">統計時間</h2><div class="lefttime_text"><ul><li class="bg active">今日</li><li></li><li class="bg">本周</li><li></li><li class="bg">本月</li><li></li><li class="bg">本季</li><li></li><li class="bg">本年</li></ul></div></div><div class="plefttoday"><h2 class="tith2">今日活動統計</h2><div class="lefttoday_tit" style=" height:8%"><p class="fl">地區：甘孜</p><p class="fr">2018-06-14</p></div><div class="lefttoday_number"><div class="widget-inline-box text-center fl"><p>活動總數</p><h3 class="ceeb1fd">54</h3><h4 class="text-muted">環比<img src="img/iconup.png" height="16" />2%</h4></div><div class="widget-inline-box text-center fl"><p>佛事活動</p><h3 class="c24c9ff">54</h3><h4 class="text-muted">環比<img src="img/icondown.png" height="16" />3%</h4></div><div class="widget-inline-box text-center fl"><p>民俗活動</p><h3 class="cffff00">4</h3><h4 class="text-muted">環比<img src="img/icondown.png" height="16" />3%</h4></div><div class="widget-inline-box text-center fl"><p>其他活動</p><h3 class="c11e2dd">4</h3><h4 class="text-muted">環比<img src="img/icondown.png" height="16" />3%</h4></div></div><!-- lefttoday_number end --><!-- lefttoday_bar end--></div><div class="lpeftmidbot"><h2 class="tith2">活動占比</h2><div id="lpeftbot" class="lpeftmidbotcont"></div></div><div class="lpeftbot"><h2 class="tith2">活動人員性別分析</h2><div id="lpeftmidbot" class="lpeftbotcont" ></div></div> </div> <!-- left1 end --> <div class="left2"><div class="pleftbox2top"><h2 class="tith2">活動人口名族分析</h2><div id="pleftbox2top" class="pleftbox2topcont"></div></div><div class="pleftbox2midd"><h2 class="tith2">實有人口年齡結構</h2><!-- <div id="pleftbox2midd" class="pleftbox2middcont"></div> --><div class="pvr fl lpeftb2otcont1 hdtop" style=" height:82%;" ><ul><li class="hot1">1</li><li class="hot2">2</li><li class="hot3">3</li><li class="hot4">4</li><li class="hot5">5</li></ul><div id="pleftbox2bott_cont"class="pleftbox2middcont" style=" height:100%;" ></div></div></div><div class="lpeft2bot" ><h2 class="tith2 " >實有人口職業占比TOP5</h2> <div id="prbottom_box1"class="lpeftb2otcont" ></div></div> </div>

作品來自于網絡收集、侵權立刪?

上面的圖片文件以及js文件等需要引入進來

?源碼獲取

大家點贊、收藏、關注、評論我啦 、查看👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻

打卡 文章 更新?56/? 100天

專欄推薦閱讀：

HTML5大作業實戰案例《100套》

Java畢設項目精品實戰案例《100套》

總結

以上是生活随笔為你收集整理的基于Echarts+HTML5可视化数据大屏展示—大数据管理平台中心（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。