01
EFFECT DRAWWING
效果图
02
LANGUAGES
代码语言
1、vue2+echarts+china.json静态图表
2、可根据所需要的柱状折线饼图单独抽出使用，每个图表数据耦合
3、支持标准大屏1920px*1080px，
依赖命令如下：
npm i
运行命令如下：
npm run serve
打包命令如下：
npm run build
03
CONSTRUCTION
文件目录结构
可能产生的问题是常见的node版本和sass-loader、scss，可以根据自身电脑的node版本使用sass-loader和scss。
04
DOCUMENTS
DOM部分
<template>
<div class="main">
<!--头部导航 GO-->
<div class="titbar">
<div class="title">人防创新大数据中心</div>
<div class="time">{{nowTime }}</div>
</div>
<!--主内容区 GO-->
<div class="maincont">
<!--顶部 区域 GO-->
<div class="m-top">
<div class="area area1">
<div class="item">
<div class="all-tit">
数据统计
</div>
<div class="datas">
<div class="data-item">
<div class="txt">9999</div>
<div class="tit">巡检总数</div>
</div>
<div class="data-item">
<div class="txt">9999</div>
<div class="tit">维修总数</div>
</div>
<div class="data-item">
<div class="txt">999</div>
<div class="tit">项目总数</div>
</div>
<div class="data-item">
<div class="txt">9999</div>
<div class="tit">巡检维保人员数</div>
</div>
<div class="data-item">
<div class="txt">999</div>
<div class="tit">设备总数</div>
</div>
<div class="data-item">
<div class="txt">99</div>
<div class="tit">维保/物业单位数</div>
</div>
</div>
</div>
</div>
</div>
<!--中部 区域 GO-->
<div class="m-center">
<!--左区域 GO-->
<div class="cont-left">
<!--左1 GO-->
<div class="area area2">
<div class="all-tit">维修巡检近12个月概况</div>
<div class="chart" id="chart2"></div>
</div>
<!--左2 GO-->
<div class="area area3">
<div class="all-tit">
设备巡检
</div>
<div class="chart" id="chart3"></div>
</div>
</div>
<!--中区域 GO-->
<div class="cont-center">
<div class="area area4">
<div class="adv">张工 2023-8-22 14:12:58 巡检了 ****设备。</div>
<div class="map-box">
<div class="mymap" id="mymap"></div>
</div>
</div>
</div>
<!--右区域 GO-->
<div class="cont-right">
<!--右1 GO-->
<div class="area area5">
<div class="all-tit">
巡检维保人员排行
</div>
<div class="chart" id="chart5"></div>
</div>
<!--右2 GO-->
<div class="area area6">
<div class="all-tit">
巡检维保人员最新数据
</div>
<div class="items">
<div class="item">
张工 2023-8-22 14:12:58 巡检了 ****设备。
</div>
<div class="item">
李工 2023-8-22 14:12:58 巡检了 ****设备。
</div>
<div class="item">
王工 2023-8-22 14:12:58 巡检了 ****设备。
</div>
<div class="item">
朱工 2023-8-22 14:12:58 巡检了 ****设备。
</div>
<div class="item">
卓工 2023-8-22 14:12:58 巡检了 ****设备。
</div>
<div class="item">
兆工 2023-8-22 14:12:58 巡检了 ****设备。
</div>
<div class="item">
卓工 2023-8-22 14:12:58 巡检了 ****设备。
</div>
<div class="item">
兆工 2023-8-22 14:12:58 巡检了 ****设备。
</div>
</div>
</div>
</div>
</div>
<!--底部 区域 GO-->
<div class="m-bottom">©copyright for demo 备案号：闽13000000000-1</div>
</div>
</div>
</template>05
Cascading Style Sheet
CSS部分
.css3 {
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}
//公共标题
.all-tit {
width: calc(100% - 36px);
color: #1ac9ff;
font-size: 18px;
position: relative;
height: 40px;
line-height: 40px;
padding-left: 36px;
&::before {
width: 10px;
height: 10px;
background: #1ac9ff;
content: '';
display: block;
position: absolute;
border-radius: 5px;
top: 50%;
left: 20px;
margin-top: -5px;
}
}
//区块公共背景
.area {
margin-bottom: 12px;
position: relative;
overflow: hidden;
border: 1px solid rgba(25, 186, 139, .2);
}
.main {
width: 100vw;
min-height: 100vh;
overflow: hidden;
position: relative;
background: #00083d url("../assets/bg.jpg");
//头部标题 GO
.titbar {
width: 100%;
position: relative;
height: 87px;
background: url("../assets/head_bg.png");
.title {
font-size: 30px;
text-align: center;
line-height: 87px;
color: #b5f3ff;
}
.time {
position: absolute;
right: 30px;
height: 40px;
line-height: 40px;
top: 0;
color: #ffffff;
}
}
.maincont {
overflow: hidden;
.m-top {
overflow: hidden;
padding: 0 10px;
.area1 {
width: 100%;
padding-bottom: 10px;
.datas {
width: calc(100% - 20px);
display: flex;
justify-content: space-evenly;
margin-right: 20px;
.data-item {
width: calc(100% / 6);
height: 100px;
border-radius: 8px;
margin-left: 20px;
border: 1px solid rgba(7, 118, 181, .5);
box-shadow: inset 0 0 10px rgba(7, 118, 181, .4);
text-align: center;
.txt {
color: #1ac9ff;
font-size: 30px;
margin-top: 20px;
}
.tit {
color: #ffffff;
}
}
}
}
}
.m-center {
display: flex;
.cont-left {
width: calc(30% - 10px);
margin-left: 10px;
overflow: hidden;
.area2 {
height: 295px;
.chart {
width: 100%;
height: 280px;
}
}
.area3 {
height: 420px;
.chart {
width: 100%;
height: 400px;
}
}
}
.cont-center {
width: calc(50% - 20px);
margin: 0 10px;
overflow: hidden;
.area4 {
background-size: 100% 100%;
position: relative;
.adv {
width: 500px;
border-radius: 8px;
line-height: 40px;
padding: 0 10px;
color: #ffffff;
margin: 10px auto;
background: rgba(1, 132, 213, .4);
}
.map-box {
height: 670px;
.mymap {
width: 100%;
height: 670px;
}
}
}
}
.cont-right {
width: calc(20% - 10px);
margin-right: 10px;
overflow: hidden;
.area5 {
width: calc(100% - 2px);
height: 360px;
.chart {
width: 100%;
height: 360px;
}
}
.area6 {
width: calc(100% - 2px);
height: 356px;
.items {
.item {
margin: 0 10px 10px;
cursor: pointer;
line-height: 41px;
padding: 0 10px;
color: #1ac9ff;
border: 1px solid rgba(7, 118, 181, .5);
box-shadow: inset 0 0 10px rgba(7, 118, 181, .4);
}
.item:hover {
border: 1px solid #1ac9ff;
background: #1ac9ff;
color: #ffffff;
}
}
}
}
}
.m-bottom {
width: 100%;
height: 60px;
line-height: 60px;
color: #999999;
text-align: center;
background: url("../assets/head_bg.png");
}
}
}06
JAVASCRIPT
JS部分
比较长，展示一个示例，可以下载例子包支持下作者，谢谢。
登录情况对已下载过的代码包可以重复下载。如果未登录支付下载，想二次下载，可通过右侧公众号联系客服，绑定登录账号下载。
©软件著作权归平台所有。本站所有软件均来源于本平台开发团队手写代码，供学习使用！
代码使用的结构为开源的VUE+开源的echartJS。
转载请注明出处： codding » 大数据可视化前端模板006
){kind=link}