前言
🚀 基于 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入门教程
三、作品演示
四、代码实现
1.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts大数据图表样式demo www.bootstrapmb.com</title>
<link rel="stylesheet" href="icon/iconfont.css">
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
</head>
<body>
<div class="container-header">
<ul class="nowTime">
<li></li>
<li></li>
</ul>
<div class="location">
<i class="icon iconfont icon-buoumaotubiao23"></i>
<span class="areaName"></span>
</div>
<h3>echarts大数据图表样式demo</h3>
</div>
<div class="container-content">
<div class="top">
<div class="count-base">
<div class="com-count-title">资源总量构成</div>
<div class="com-screen-content">
<div id="main1" style="width:100%;height:300px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
<div class="count-resource q1">
<div class="com-count-title">资源总量统计</div>
<div class="com-screen-content2">
<ul class="use-data">
<li>
<p class="data-count">15681 </p>
<span class="data-name">数据总量</span>
</li>
<li>
<p class="data-count"> 1731</p>
<span class="data-name">更新量</span>
</li>
<li>
<p class="data-count">11753</p>
<span class="data-name">共享次数</span>
</li>
</ul>
<div class="com-screen-content">
<div id="main2" style="margin-top:10px;width:100%;height:240px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
</div>
<div class="count-resource q2">
<div class="com-count-title">基础库统计</div>
<div class="com-screen-content">
<ul class="data-label">
<li class="active" data-type="1">法人库</li>
<li data-type="2">人口库</li>
<li data-type="3">电子证照库</li>
</ul>
<ul class="use-data"></ul>
<div id="main3" style="margin-top:10px;width:100%;height:240px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
</div>
<div class="mid">
<div class="count-share w1">
<div class="com-count-title">数据共享次数</div>
<div class="com-screen-content">
<div class="topRec_List">
<dl>
<dd>资源名称</dd>
<dd>调用方</dd>
<dd>调用时间</dd>
</dl>
<div class="maquee">
<ul>
<li>
<div>审计局主要职责</div>
<div>审计局</div>
<div>08:20:26 </div>
</li>
<li>
<div>残联主要职责</div>
<div>残联</div>
<div>08:20:36 </div>
</li>
<li>
<div>委老干部局主要职责</div>
<div>老干部局</div>
<div>08:20:46 </div>
</li>
<li>
<div>公安局主要职责</div>
<div>公安局</div>
<div>08:20:56</div>
</li>
<li>
<div>民政局主要职责</div>
<div>民政局</div>
<div>08:21:04</div>
</li>
<li>
<div>交通运输局主要职责</div>
<div>交通运输局</div>
<div>08:21:07</div>
</li>
</ul>
</div>
</div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
<div class="count-share w2">
<div class="com-count-title">数据共享次数</div>
<div class="com-screen-content">
<div id="main5" style="width:100%;height:300px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
</div>
<div class="bottom">
<div class="count-topic e1">
<div class="com-count-title">主题库统计</div>
<div class="com-screen-content">
<div id="main6" style="width:100%;height:300px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
<div class="count-topic e2">
<div class="com-count-title">主题库共享次数</div>
<div class="com-screen-content">
<div id="main7" style="width:100%;height:300px;"></div>
</div>
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
</div>
</div>
<div class="clearfix"></div>
</div>
<script type="text/javascript">
//根据不同的分辨率调用不同的css和js
if (window.screen.width >= 1600) {
document.write("<link href='css/test-1920.css' rel='stylesheet' type='text/css'>");
document.writeln("<script type=\"text/javascript\" src=\"js/test-1920.js\"><\/script>");
} else if (window.screen.width < 1600 && window.screen.width >= 1280) {
document.write("<link href='css/test-1280.css' rel='stylesheet' type='text/css'>");
document.writeln("<script type=\"text/javascript\" src=\"js/test-1280.js\"><\/script>");
} else {
document.write("<link href='css/test-1024.css' rel='stylesheet' type='text/css'>");
document.writeln("<script type=\"text/javascript\" src=\"js/test-1024.js\"><\/script>");
}
</script>
<script type="text/javascript">
function autoScroll(obj) {
$(obj).find("ul").animate({
marginTop: "-39px"
}, 500, function() {
$(this).css({
marginTop: "0px"
}).find("li:first").appendTo(this);
})
}
$(function() {
setInterval('autoScroll(".maquee")', 2000);
})
</script>
</body>
</html>2.CSS
body {
background: #081325 url(../images/interact.png) center no-repeat;
background-size: cover;
}
div {
box-sizing: border-box;
}
.clearfix {
clear: both;
}
.container-header {
width: 100%;
height: 74px;
text-align: center;
box-sizing: border-box;
}
.container-header .nowTime {
position: absolute;
left: 20px;
top: 41px;
font-size: 0;
}
.container-header .nowTime li {
display: inline-block;
width: 140px;
height: 40px;
font-size: 30px;
color: #fff;
}
.nowTime li {
display: inline-block;
float: left;
/*font-weight: 800;*/
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nowTime li div {
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 16px;
text-align: left;
}
.nowTime li p {
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 16px;
}
.container-header .location {
position: absolute;
right: 17px;
top: 46px;
}
.location i {
font-size: 18px;
font-weight: 800;
color: #7e9bc6;
}
.location span {
font-size: 20px;
line-height: 30px;
color: #168fcd;
}
.container-header h3 {
line-height: 74px;
font-size: 2.5vw;
font-weight: 800;
color: #fff;
}
/* 边角 */
.left-top,
.right-top,
.left-bottom,
.right-bottom {
position: absolute;
width: 13px;
height: 13px;
}
.left-top {
left: 0;
top: 0;
border-left: solid 2px #045291;
border-top: solid 2px #045291;
}
.right-top {
right: 0;
top: 0;
border-right: solid 2px #045291;
border-top: solid 2px #045291;
}
.left-bottom {
left: 0;
bottom: 0;
border-left: solid 2px #045291;
border-bottom: solid 2px #045291;
}
.right-bottom {
right: 0;
bottom: 0;
border-right: solid 2px #045291;
border-bottom: solid 2px #045291;
}
.resource-right .com-count-title {
font-size: 16px;
margin-left: 10px;
}
.com-count-title {
color: #1bb4f9;
padding: 20px;
font-size: 22px;
}
.com-screen-content {
width: 100%;
height: auto;
}
.com-screen-content2 {
width: 100%;
height: auto;
}
.filter-type {
font-size: 0;
}
.filter-type li:hover {
cursor: pointer;
}
.filter-type li {
display: inline-block;
width: 120px;
line-height: 40px;
font-family: myFirstFont;
font-size: 20px;
text-align: center;
color: #024f9b;
border: solid 1px #075797;
background: #0d2343;
}
.filter-type li.active {
color: white;
background: #0c182d;
border: solid 1px #1bb9f9;
}
.container-content {
padding: 10px 20px;
box-sizing: border-box;
}
.count-base,
.count-resource,
.count-share,
.count-topic {
position: relative;
padding: 20px;
margin-top: 10px;
box-sizing: border-box;
}
.com-count-title {
color: #1bb4f9;
font-size: 18px;
padding: 0;
}
.count-base {
margin-left: 10px;
float: left;
/*浮动*/
width: 32%;
height: 350px;
background: url('../images/left-top3.jpg') center no-repeat;
background-size: cover;
}
.count-resource {
margin-left: 10px;
float: left;
width: 32%;
height: 350px;
background: url('../images/left-top3.jpg') center no-repeat;
background-size: cover;
}
.count-share {
margin-left: 10px;
float: left;
width: 48.4%;
height: 350px;
background: url('../images/left-bottom2.jpg') center no-repeat;
background-size: cover;
}
.count-topic {
margin-left: 10px;
float: left;
width: 48.4%;
height: 350px;
background: url('../images/left-bottom2.jpg') center no-repeat;
background-size: cover;
}
.data-label {
position: absolute;
top: 20px;
right: 10px;
}
.data-label li {
float: left;
width: 120px;
text-align: center;
font-size: 18px;
color: #828c9d;
}
.data-label li:hover,
.data-label li.active {
color: #fff;
background: url("../images/choose-item.png") center no-repeat;
}
@charset "utf-8";
/* author lyc */
* {
margin: 0px;
padding: 0px;
font-family: '微软雅黑';
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
li {
list-style: none
}
img {
border: none
}
a {
text-decoration: none;
}
.topRec_List dl,
.maquee {
width: 90%;
overflow: hidden;
margin: 0 auto;
color: #f0ece2
}
.topRec_List dd {
float: left;
text-align: left;
border-bottom: 1px solid #1B96EE;
color: #1B96EE;
font-size: 14px;
}
.topRec_List dl dd:nth-child(1) {
width: 50%;
height: 40px;
line-height: 40px;
}
.topRec_List dl dd:nth-child(2) {
width: 30%;
height: 40px;
line-height: 40px;
}
.topRec_List dl dd:nth-child(3) {
width: 20%;
height: 40px;
line-height: 40px;
}
.maquee {
height: 195px;
}
.topRec_List ul {
width: 100%;
height: 195px;
}
.topRec_List li {
width: 100%;
height: 38px;
line-height: 38px;
text-align: left;
font-size: 12px;
color: #76dbd1
}
/*.topRec_List li:nth-child(2n){ background:#077cd0}*/
.topRec_List li div {
float: left;
}
.topRec_List li div:nth-child(1) {
width: 50%;
}
.topRec_List li div:nth-child(2) {
width: 30%;
}
.topRec_List li div:nth-child(3) {
width: 20%;
}
.use-data {
text-align: center;
padding: 2px 0;
margin-top: 3%;
height: 5%;
background: url(../images/resource-use-data.jpg) center no-repeat;
background-size: cover;
border: solid 1px #093552;
border-right: 0px;
border-left: 0;
}
.use-data li {
width: 30%;
font-size: 0;
display: inline-table;
border-right: solid 1px #1f4191;
}
.use-data li:last-child {
border-right: 0;
}
.use-data .data-count {
color: #fff;
font-family: myFirstFont;
height: 1%;
font-size: 16px;
}
.use-data .data-name {
color: #1bb9f9;
font-size: 16px;
}3.JavaScript
/****** PLACE YOUR CUSTOM STYLES HERE ******/
var legal_person_data = {
"uploadData": [{
"count": 630
}, {
"count": 986
}, {
"count": 792
}, {
"count": 642
}, {
"count": 521
}, {
"count": 573
}, {
"count": 832
}, {
"count": 747
}, {
"count": 983
}, {
"count": 836
}, {
"count": 831
}, {
"count": 633
}],
"updateData": [{
"count": 110
}, {
"count": 181
}, {
"count": 123
}, {
"count": 197
}, {
"count": 123
}, {
"count": 173
}, {
"count": 123
}, {
"count": 151
}, {
"count": 101
}, {
"count": 152
}, {
"count": 101
}, {
"count": 177
}],
"viewData": [{
"count": 651
}, {
"count": 842
}, {
"count": 223
}, {
"count": 223
}, {
"count": 221
}, {
"count": 812
}, {
"count": 928
}, {
"count": 219
}, {
"count": 613
}, {
"count": 254
}, {
"count": 981
}, {
"count": 301
}]
};
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
