🍅 作者主頁：Java李楊勇
🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? 簡歷模板、學習資料、面試題庫【關注我，都給你】
🍅文末免費獲取原始碼🍅
臨近學期結束，還是畢業設計，你還在做java程式網路編程，期末作業，前端網頁設計、老師的作業要求覺得大了嗎?不知道畢業設計該怎么辦?網頁功能的數量是否太多?沒有合適的型別或系統?等等，這里，你想解決的問題，在這專欄👇🏻👇🏻👇🏻👇🏻
java專案精品實戰案例分享
web前端期末大作業網頁實戰
ECharts+html大資料模板
都能滿足你的需求，原始Jsp、SSM、SpringBoot、以及HTML+CSS+JS頁面設計, web大學生網頁設計作業原始碼等等都可以參考得到解決，話不多說直接程式員全國分布大資料統計來舉例
動圖演示：文末白嫖原始碼
&&&&
代碼目錄
主要代碼實作：
主頁index.html布局
<header>
<h1>程式員全國分布大資料統計頁面</h1>
<div class="showTime">當前時間：2020年8月<span></span></div>
</header>
<section class="mainbox">
<div class="column">
<div class="panel bar">
<h2>
柱狀圖-各行業程式員數量 <a href="javascript:;">2019</a>
<a href="javacript:;"> 2020</a>
</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel line">
<h2>折線圖-學習變化</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel pie">
<h2>餅形圖-工程師年齡分布</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
</div>
<div class="column">
<div class="no">
<div class="no-hd">
<ul>
<li>125811</li>
<li>104563</li>
</ul>
</div>
<div class="no-bd">
<ul>
<li>程式員需求人數</li>
<li>程式員供應人數</li>
</ul>
</div>
</div>
<div class="map">
<div class="chart"></div>
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
</div>
</div>
<div class="column">
<div class="panel bar1">
<h2>柱狀圖-開發技能</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel line1">
<h2>折線圖-公司人員流動</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel pie1">
<h2>餅形圖-各地區程式員占比</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
</div>
時間格式化處理：
(function(fn) {
fn();
setInterval(fn, 1000);
})(function() {
var dt = new Date();
document.querySelector(".showTime span").innerHTML =
dt.getDate() + "日-" +
dt.getHours() + "時" +
dt.getMinutes() + "分" +
dt.getSeconds() + "秒";
});// 柱狀圖1模塊 --資料模擬--指定配置和資料：
// 實體化物件
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 指定配置和資料
var option = {
color: ["#2f89cf"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐標軸指示器，坐標軸觸發有效
type: "shadow" // 默認為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: [{
type: "category",
data: [
"旅游行業",
"教育培訓",
"游戲行業",
"醫療行業",
"電商行業",
"社交行業",
"金融行業"
],
axisTick: {
alignWithLabel: true
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisLine: {
show: false
}
}],
yAxis: [{
type: "value",
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
}
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
// width: 1,
// type: "solid"
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}],
series: [{
name: "直接訪問",
type: "bar",
barWidth: "35%",
data: [200, 300, 300, 900, 1500, 1200, 600],
itemStyle: {
barBorderRadius: 5
}
}]
};頁面css布局：
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-color: #06164A;
background-size: cover;
/* è??é????ˉ?-—??“1.15?€ */
line-height: 1.15;
}
header {
position: relative;
height: 1.25rem;
background: url(../images/head_bg.png) no-repeat top center;
background-size: 100% 100%;
}
header h1 {
font-size: 0.475rem;
color: #fff;
text-align: center;
line-height: 1rem;
}
header .showTime {
position: absolute;
top: 0;
right: 0.375rem;
line-height: 0.9375rem;
font-size: 0.25rem;
color: rgba(255, 255, 255, 0.7);
}
.mainbox {
min-width: 1024px;
max-width: 1920px;
padding: 0.125rem 0.125rem 0;
display: flex;
}
.mainbox .column {
flex: 3;
}
.mainbox .column:nth-child(2) {
flex: 5;
margin: 0 0.125rem 0.1875rem;
overflow: hidden;
}
.panel {
position: relative;
height: 3.875rem;
border: 1px solid rgba(25, 186, 139, 0.17);
background: rgba(255, 255, 255, 0.04) url(../images/line\(1\).png);
padding: 0 0.1875rem 0.5rem;
margin-bottom: 0.1875rem;
}
.panel::before {
position: absolute;
top: 0;
left: 0;
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
border-radius: 20%;
}作品來自于網路收集、侵權立刪
獲取完整原始碼：
大家點贊、收藏、關注、評論啦 、查看下方👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻
打卡 文章 更新 74/ 100天
專欄推薦閱讀：
Java畢設專案精品實戰案例《100套》
HTML5大作業實戰案例《100套》
Web大作業前端網頁實戰《100套》
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/307362.html
標籤：其他