前言
🚀 基于 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"
}
}); ![基于HTML美食文化網頁設計與實作——html+css+javascript+jquery+bootstarp響應式西餐廳美食網站[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)