前言
🚀 基于 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"
}
});
