700字范文 > 基于Echarts实现可视化数据大屏物流云大数据看板页面HTML模板

基于Echarts实现可视化数据大屏物流云大数据看板页面HTML模板

时间：2022-03-03 03:58:30

前言

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作，可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

文章目录

前言一、Echart是什么二、ECharts入门教程三、作品演示四、代码实现1.HTML2.CSS3.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>

<a href="scanboard.html" class="animsition-link submit">登录</a></form>

</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"

}

});

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。