基于Echarts实现可视化数据大屏物流云大数据看板页面HTML模板
生活随笔
收集整理的這篇文章主要介紹了
基于Echarts实现可视化数据大屏物流云大数据看板页面HTML模板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
🚀 基于 Echarts 實現可視化數據大屏響應式展示效果的源碼,，基于html+css+javascript+echarts制作， 可以在此基礎上重新開發。
本項目中使用的是echarts圖表庫，ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
文章目錄
- ??前言??
- ??一、Echart是什么??
- ??二、ECharts入門教程??
- ??三、作品演示??
- ??四、代碼實現??
- ??1.HTML??
- ??2.CSS??
- ??3.JavaScript??
- ??五、更多干貨??
一、Echart是什么
ECharts是一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器(IE8/9/10/11，Chrome，Firefox，Safari等)，底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
二、ECharts入門教程
??5 分鐘上手ECharts??
三、作品演示
四、代碼實現
1.HTML
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>看板登錄</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/scanboardLogin.css" />
<link rel="stylesheet" type="text/css" href="css/animsition.css" />
</head>
<body>
<div class="wp animsition">
<div class="boardLogin"><a href="#" class="logo"><img src="images/loginLogo.png"></a>
<form>
<div class="inpGroup"><span class="loginIco1"></span><input type="text" name="" placeholder="請輸入您的用戶名"></div>
<div class="prompt">
<p class="error">用戶名錯誤或不存在</p>
</div>
<div class="inpGroup"><span class="loginIco2"></span><input type="password" name="" placeholder="請輸入您的密碼"></div>
<div class="prompt">
<p class="success">輸入正確</p>
</div>
<!-- <button class="submit">登錄</button>--><a href="scanboard.html" class="animsition-link submit">登錄</a></form>
</div>
</div>
<div id="particles-js"></div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.animsition.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">$(".animsition").animsition({
inClass: 'fade-in',
outClass: 'fade-out',
inDuration: 800,
outDuration: 1000,
linkElement: '.animsition-link',
loading: false,
loadingParentElement: 'body',
loadingClass: 'animsition-loading',
unSupportCss: ['animation-duration', '-webkit-animation-duration', '-o-animation-duration'],
overlay: false,
overlayClass: 'animsition-overlay-slide',
overlayParentElement: 'body'
});</script>
</html>
2.CSS
body,button,
input,
select,
textarea {
font-size: 14px;
line-height: 1.5;
font-family: Arial, 'Microsoft Yahei';
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
em {
font-style: normal;
}
ul,
ol {
list-style: none;
}
input,
button {
background: none;
border: none;
outline: none;
-webkit-appearance: none;
}
textarea {
resize: none;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: none;
color: #ffd220;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
img {
border: 0px;
outline-width: 0px;
vertical-align: top;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.hide {
display: none;
}
3.JavaScript
particlesJS("particles-js", {particles: {
number: {
value: 40,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffffff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
},
image: {
src: "img/github.svg",
width: 100,
height: 100
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 5,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 3,
direction: "none",
random: false,
straight: false,
out_mode: "out",
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "repulse"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true,
config_demo: {
hide_card: false,
background_color: "#b61924",
background_image: "",
background_position: "50% 50%",
background_repeat: "no-repeat",
background_size: "cover"
}
});
總結
以上是生活随笔為你收集整理的基于Echarts实现可视化数据大屏物流云大数据看板页面HTML模板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 再梳理一下seqtoseq，encode
- 下一篇： Spark 的情感分析