统计分析

src/views/bigdata/bigdata.vue

@@ -1,216 +1,178 @@
 <!--一体化首页-->
 <template>
-	<div class="bigdata-con">
-		<!-- 头部B -->
-		<div class="header">
-			<!-- title -->
-			<div class="header-left"><img class="logo" src="@/assets/images/integrated/logo-small.png" />
-				<h3 class="title">数字四平态势感知监管平台-数字林业-统计分析</h3></div>
-			<div class="bignav">
-				<img src="@/assets/images/integrated/bigdata-header-nav-left.png" />
-        <router-link v-for="(navbar,index) in navbar " :key="index" :to="navbar.path" class="bignav-list" :class="index===navbar.length-1?'on':''" exact>
+  <div class="bigdata-con">
+    <!-- 头部B -->
+    <div class="header">
+      <!-- title -->
+      <div class="header-left"><img class="logo" src="@/assets/images/integrated/logo-small.png" />
+        <h3 class="title">数字四平态势感知监管平台-数字林业-统计分析</h3>
+      </div>
+      <div class="bignav">
+        <img src="@/assets/images/integrated/bigdata-header-nav-left.png" />
+        <router-link v-for="(navbar,index) in navbar " :key="index" :to="navbar.path" class="bignav-list"
+                     :class="index===navbar.length-1?'on':''" exact>
           {{navbar.name}}
         </router-link>
-				<img src="@/assets/images/integrated/bigdata-header-nav-right.png" />
-			</div>
-		</div>
-		<!-- 头部E -->
-
-		<div class="bigdata-body">
-			<!-- 第一纵向-->
-			<div class="bigdata-list wid-li-1">
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>事件类型、分布统计</span>
-					</div>
-					<div class="twins">
-						<div class="count">
-							<div class="count-z m-l-15">事件总数<span>{{total}}</span></div>
-							<div class="count-z m-l-15">未处理<span> {{untreated}}</span></div>
-							<div class="count-z m-l-15">处理中<span> {{processing}}</span></div>
-						</div>
-						<chartEvent></chartEvent>
-					</div>
-				</div>
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>人口分布统计</span>
-					</div>
-					<chartPopulation></chartPopulation>
-				</div>
-				<div class="b-con">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>企业分布统计</span>
-					</div>
-					<chartEnterprise></chartEnterprise>
-				</div>
-			</div>
-			<!-- 第二纵向-->
-			<div class="bigdata-list wid-li-2 m-l-15">
-				<div class="bigdata-map mg-b-20">
-
-				</div>
-				<tabbar></tabbar>
-			</div>
-			<!-- 第三纵向-->
-			<div class="bigdata-list wid-li-1 m-l-15">
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>隐患分布统计</span>
-					</div>
-					<chartDanger></chartDanger>
-				</div>
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>林场分布统计</span>
-					</div>
-					<chartForestFarm></chartForestFarm>
-				</div>
-				<div class="b-con">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>矿坑分布统计</span>
-					</div>
-					<chartPit></chartPit>
-				</div>
-			</div>
-			<!-- 第四纵向-->
-			<div class="bigdata-list wid-li-1 m-l-15">
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>散养户分布统计</span>
-					</div>
-					<chartFreelyraise></chartFreelyraise>
-				</div>
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>养殖场分布统计</span>
-					</div>
-					<chartFarm></chartFarm>
-				</div>
-				<div class="b-con">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>散养户、养殖场养殖种类布统计</span>
-					</div>
-					<chartFarmtype></chartFarmtype>
-				</div>
-			</div>
-			<!-- 第五纵向-->
-			<div class="bigdata-list wid-li-1 m-l-15">
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>收集点分布统计</span>
-					</div>
-					<chartCollection></chartCollection>
-				</div>
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>水鹤分布统计</span>
-					</div>
-					<chartCaterCrane></chartCaterCrane>
-				</div>
-				<div class="b-con">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>处理中心分布统计</span>
-					</div>
-					<chartProcessing></chartProcessing>
-				</div>
-			</div>
-			<!-- 第六纵向-->
-			<div class="bigdata-list wid-li-1 m-l-15">
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>消火栓分布统计</span>
-					</div>
-					<chartHydrant></chartHydrant>
-				</div>
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>泡沫液分布统计</span>
-					</div>
-					<chartFoam></chartFoam>
-				</div>
-				<div class="b-con">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>取水口分布统计</span>
-					</div>
-					<chartWaterIntake></chartWaterIntake>
-				</div>
-			</div>
-			<!-- 第七纵向-->
-			<div class="bigdata-list wid-li-1 m-l-15">
-				<div class="b-con mg-b-20 taller">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>摄像头分布、类型、型号统计</span>
-					</div>
-					<chartCamera></chartCamera>
-				</div>
-			</div>
-			<!-- 第八纵向-->
-			<div class="bigdata-list wid-li-1 m-l-15">
-				<div class="b-con mg-b-20 tall">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>探测器分布、类型统计</span>
-					</div>
-					<chartDetector></chartDetector>
-				</div>
-				<div class="b-con mg-b-20">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>消防力量分布统计</span>
-					</div>
-					<chartFireControl></chartFireControl>
-				</div>
-			</div>
-		</div>
-
-	</div>
+        <img src="@/assets/images/integrated/bigdata-header-nav-right.png" />
+      </div>
+    </div>
+    <!-- 头部E -->
+
+    <div class="bigdata-body">
+      <!-- 第一纵向-->
+      <div class="bigdata-list wid-li-1">
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>事件来源，类型统计</span>
+          </div>
+          <chartEvent></chartEvent>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>林场分布统计</span>
+          </div>
+          <chartForestFarm></chartForestFarm>
+        </div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>设备类型统计</span>
+          </div>
+          <chartEquipmentType></chartEquipmentType>
+        </div>
+      </div>
+      <!-- 第二纵向-->
+      <div class="bigdata-list wid-li-2 m-l-15">
+        <div class="bigdata-map mg-b-20">
+          <!-- 地图 -->
+          <bigdataSupermap ref="bigdataSupermap" style="width: 100%;height: 59vh;" class="indexSupermapClass"
+                           :mapDiv="'bigdataMap'" dynamicPlotting="false" :mapSite="{doubleClickZoom:false}"
+                           :codes="['9fa5']" :isSideBySide="false" />
+        </div>
+        <tabbar></tabbar>
+      </div>
+      <!-- 第三纵向-->
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>起火原因统计</span>
+          </div>
+          <chartFireCause></chartFireCause>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>设备上报事件数量</span>
+          </div>
+          <chartDeviceReportingEvents></chartDeviceReportingEvents>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>重点区域</span>
+          </div>
+          <chartKeyArea></chartKeyArea>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>珍惜古树</span>
+          </div>
+          <chartAncientTree></chartAncientTree>
+        </div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>事件趋势</span>
+          </div>
+          <chartEventTrend></chartEventTrend><strong></strong>
+        </div>
+      </div>
+      <!-- 第四纵向-->
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20 tall">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>网格分布</span>
+          </div>
+          <chartGridDistribution></chartGridDistribution>
+        </div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>天气趋势</span>
+          </div>
+          <chartWeatherTrends></chartWeatherTrends>
+        </div>
+      </div>
+      <!-- 第五纵向-->
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20 tall">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>网格人员</span>
+          </div>
+          <chartGridStaff></chartGridStaff>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>防火队</span>
+          </div>
+          <chartFireBrigade></chartFireBrigade>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>气象站</span>
+          </div>
+          <chartWeatherStation></chartWeatherStation>
+        </div>
+      </div>
+      <!-- 第六纵向-->
+      <div class="bigdata-list wid-li-1 m-l-15">
+        <div class="b-con mg-b-20 taller">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>设备分布</span>
+          </div>
+          <chartEquipmentDistribution></chartEquipmentDistribution>
+        </div>
+      </div>
+    </div>
+
+  </div>
 </template>
 
 <script>
-	import tabbar from './tabbar.vue' //区域切换
-
-	//echarts
-	import chartEvent from './chart-event.vue' //1  事件
-	import chartPopulation from './chart-population.vue' //2  人口
-	import chartEnterprise from './chart-enterprise.vue' //3  公司
-	import chartDanger from './chart-danger.vue' //4  隐患
-	import chartForestFarm from './chart-forestfarm.vue' //5  林场
-	import chartPit from './chart-pit.vue' //6  矿坑
-	import chartFreelyraise from './chart-freelyraise.vue' //7  散养户
-	import chartFarm from './chart-farm.vue' //8  养殖场
-	import chartFarmtype from './chart-farmtype.vue' //9  散养户、养殖场-养殖种类
-	import chartCollection from './chart-collection.vue' //10 收集点
-	import chartCaterCrane from './chart-watercrane.vue' //11 水鹤
-	import chartProcessing from './chart-processing.vue' //12 处理中心
-	import chartHydrant from './chart-hydrant.vue' //13 消火栓
-	import chartFoam from './chart-foam.vue' //14 泡沫液
-	import chartWaterIntake from './chart-waterintake' //15 取水口
-	import chartCamera from './chart-camera' //16 摄像头
-	import chartDetector from './chart-detector' //17 探测器
-	import chartFireControl from './chart-firecontrol' //18 消防力量
-
-
-	export default {
-		components: {
-			tabbar,
-			chartEvent,
-			chartPopulation,
-			chartEnterprise,
-			chartDanger,
-			chartForestFarm,
-			chartPit,
-			chartFreelyraise,
-			chartFarm,
-			chartFarmtype,
-			chartCollection,
-			chartCaterCrane,
-			chartProcessing,
-			chartHydrant,
-			chartFoam,
-			chartWaterIntake,
-			chartCamera,
-			chartDetector,
-			chartFireControl
-		},
+import tabbar from './tabbar.vue' //区域切换
+import bigdataSupermap from '@/components/supermap' //超图
+
+//echarts
+import chartEvent from './chart-event.vue' //1  事件、、
+import chartForestFarm from './chart-forestFarm.vue' //2  林场分布、、
+import chartEquipmentType from './chart-equipmentType.vue' //3  公司、、
+import chartFireCause from './chart-fireCause.vue' //4  起火原因、、
+import chartDeviceReportingEvents from './chart-deviceReportingEvents.vue' //5  设备上报数量、、
+import chartEventTrend from './chart-eventTrend.vue' //6  事件趋势、、
+import chartKeyArea from './chart-keyArea.vue' //7  重点区域、、
+import chartAncientTree from './chart-ancientTree.vue' //8  珍惜古树、、
+import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
+import chartGridDistribution from './chart-gridDistribution.vue' //10 网格分布、、
+import chartFireBrigade from './chart-fireBrigade.vue' //12 防火队、、
+import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
+import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
+import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
+
+
+export default {
+  components: {
+    bigdataSupermap,
+    tabbar,
+    chartEvent,
+    chartForestFarm,
+    chartEquipmentType,
+    chartFireCause,
+    chartDeviceReportingEvents,
+    chartEventTrend,
+    chartKeyArea,
+    chartAncientTree,
+    chartWeatherTrends,
+    chartGridDistribution,
+    chartFireBrigade,
+    chartGridStaff,
+    chartWeatherStation,
+    chartEquipmentDistribution,
+  },
 		data() {
 
 			return {
@@ -271,228 +233,240 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-	@import '@/assets/styles/base.scss';
-
-
-	.bigdata-con {
-		width: -webkit-fit-content;
-		height: 100%;
-		background: #01020c;
-
-		.el-loading-mask {
-			background: none;
-		}
-
-		.header {
-			height: 3rem;
-			display: flex;
-			align-items: center;
-
-			.header-left {
-				position: fixed;
-				left: 10px;
-				top: 5px;
-				display: flex;
-				align-items: center;
-				color: $inBlue;
-				font-family: $fontFk;
-
-				.title {
-					margin: 0 auto;
-					text-align: center;
-					background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
-					-webkit-background-clip: text;
-					-webkit-text-fill-color: transparent;
-					color: #fff;
-					font-size: 21px;
-				}
-			}
-
-			.bignav {
-				height: 40px;
-				position: fixed;
-				left: 50%;
-				transform: translateX(-50%);
-				top: 0;
-				z-index: 1000;
-				border-radius: 5px;
-				display: flex;
-				justify-content: cetner;
-				align-items: center;
-
-				.bignav-list {
-					background: url(../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
-					float: left;
-					display: flex;
-					justify-content: cetner;
-					align-items: center;
-					color: #fff;
-					height: 40px;
-					font-size: 12px;
-					padding: 0 23px;
-					cursor: pointer;
-					-webkit-transform: translateY(0);
-					transform: translateY(0);
-					transition: all 0.3s ease-in-out;
-				}
-
-				.router-link-active,
-				.bignav-list:hover {
-					filter: brightness(2.3);
-					-webkit-transform: translateY(2px);
-					transform: translateY(2px);
-					color: $inBlueHover;
-					border-bottom: 1px solid $inBlueHover;
-					transition: all 0.3s ease-in-out;
-
-				}
-			}
-
-
-		}
-
-		.bigdata-body {
-			margin: 15px;
-			display: flex;
-			align-items: top;
-			// justify-content: center;
-
-		}
-
-		.bigdata-list {
-			display: flex;
-			flex-direction: column;
-			flex-wrap: wrap;
-
-			.twins-con {
-				width: 100% !important;
-			}
-
-			.b-con {
-				width: 100%;
-				height: 28.5vh;
-
-				box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
-					-0 -0 30px rgba($color: #163696, $alpha: .5) inset;
-
-				// display: flex;
-				// flex-direction: column;
-				.b-tit {
-					width: 100%;
-					display: flex;
-					align-items: center;
-					padding: 10px;
-
-					span {
-						font-size: 15px;
-						color: #00ceec;
-						margin-left: 5px;
-						text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
-							-0 -0 10px rgba($color: #41fff8, $alpha: .9);
-					}
-				}
-
-				.twins {
-					width: 100%;
-					display: flex;
-					position: relative;
-
-					.count {
-						width: 100%;
-						color: #fff;
-						font-size: 12px;
-						position: absolute;
-						display: flex;
-						align-items: center;
-						left: 1rem;
-						top: 9px;
-						z-index: 100;
-
-						.count-z {
-							display: flex;
-							margin: 0 .5rem;
-
-							span {
-								margin-left: .4rem;
-								font-size: 1rem;
-								color: #2ee0fb !important;
-								font-weight: bolder;
-							}
-						}
-
-
-					}
-				}
-
-			}
-
-			.tall {
-				height: 59vh !important;
-			}
-
-			.taller {
-				height: 89.5vh !important;
-			}
-
-			.three {
-				display: flex;
-				flex-direction: column;
-			}
-
-			.el-row {
-				width: 100%;
-			}
-
-
-			.bigdata-map {
-				width: 100%;
-				height: 59vh;
-				position: relative;
-				background: #00101f;
-
-				.event-count {
-					color: #fff;
-					font-size: 14px;
-					font-weight: bolder;
-					padding: 10px;
-					background-color: #000000;
-					position: absolute;
-					top: 10px;
-					left: 10px;
-					z-index: 1000;
-
-					span {
-						font-size: 16px;
-						color: #d50000;
-					}
-				}
-
-			}
-
-		}
-
-		.wid-li-1 {
-			width: 396px;
-		}
-
-		.wid-li-2 {
-			width: 760px;
-		}
-
-		.wid-li-3 {
-			width: 850px;
-		}
-
-		.wid-li-4 {
-			width: 304px;
-		}
-
-		.mg-b-20 {
-			margin-bottom: 2vh;
-		}
-
-		.m-l-15 {
-			margin-left: .5%;
-		}
-	}
+@import '@/assets/styles/base.scss';
+
+
+.bigdata-con {
+  width: -webkit-fit-content;
+  height: 100%;
+  background: #01020c;
+
+  .el-loading-mask {
+    background: none;
+  }
+
+  .header {
+    height: 3rem;
+    display: flex;
+    align-items: center;
+
+    .header-left {
+      position: fixed;
+      left: 10px;
+      top: 5px;
+      display: flex;
+      align-items: center;
+      color: $inBlue;
+      font-family: $fontFk;
+
+      .title {
+        margin: 0 auto;
+        text-align: center;
+        background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        color: #fff;
+        font-size: 20px;
+      }
+    }
+
+    .bignav {
+      height: 40px;
+      position: fixed;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 0;
+      z-index: 1000;
+      border-radius: 5px;
+      display: flex;
+      justify-content: cetner;
+      align-items: center;
+
+      .bignav-list {
+        background: url(../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
+        float: left;
+        display: flex;
+        justify-content: cetner;
+        align-items: center;
+        color: #fff;
+        height: 40px;
+        font-size: 12px;
+        padding: 0 23px;
+        cursor: pointer;
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+        transition: all 0.3s ease-in-out;
+      }
+
+      .router-link-active,
+      .bignav-list:hover {
+        filter: brightness(2.3);
+        -webkit-transform: translateY(2px);
+        transform: translateY(2px);
+        color: $inBlueHover;
+        border-bottom: 1px solid $inBlueHover;
+        transition: all 0.3s ease-in-out;
+
+      }
+    }
+
+
+  }
+
+  .bigdata-body {
+    margin: 15px;
+    display: flex;
+    align-items: top;
+    // justify-content: center;
+
+  }
+
+  .flex-r {
+    display: flex;
+    flex-direction: row !important;
+    align-content: flex-start;
+    justify-content: space-between
+  }
+
+  .bigdata-list {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+
+    .twins-con {
+      width: 100% !important;
+    }
+
+    .b-49 {
+      width: 49% !important;
+    }
+
+    .b-con {
+      width: 100%;
+      height: 28.5vh;
+
+      box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
+      -0 -0 30px rgba($color: #163696, $alpha: .5) inset;
+
+      // display: flex;
+      // flex-direction: column;
+      .b-tit {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        padding: 10px;
+
+        span {
+          font-size: 15px;
+          color: #00ceec;
+          margin-left: 5px;
+          text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
+          -0 -0 10px rgba($color: #41fff8, $alpha: .9);
+        }
+      }
+
+      .twins {
+        width: 100%;
+        display: flex;
+        position: relative;
+
+        .count {
+          width: 100%;
+          color: #fff;
+          font-size: 12px;
+          position: absolute;
+          display: flex;
+          align-items: center;
+          left: 1rem;
+          top: 9px;
+          z-index: 100;
+
+          .count-z {
+            display: flex;
+            margin: 0 .5rem;
+
+            span {
+              margin-left: .4rem;
+              font-size: 1rem;
+              color: #2ee0fb !important;
+              font-weight: bolder;
+            }
+          }
+
+
+        }
+      }
+
+    }
+
+    .tall {
+      height: 59vh !important;
+    }
+
+    .taller {
+      height: 89.5vh !important;
+    }
+
+    .three {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .el-row {
+      width: 100%;
+    }
+
+
+    .bigdata-map {
+      width: 100%;
+      height: 59vh;
+      position: relative;
+      background: #00101f;
+
+      .event-count {
+        color: #fff;
+        font-size: 14px;
+        font-weight: bolder;
+        padding: 10px;
+        background-color: #000000;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        z-index: 1000;
+
+        span {
+          font-size: 16px;
+          color: #d50000;
+        }
+      }
+
+    }
+
+  }
+
+  .wid-li-1 {
+    width: 396px;
+  }
+
+  .wid-li-2 {
+    width: 760px;
+  }
+
+  .wid-li-3 {
+    width: 850px;
+  }
+
+  .wid-li-4 {
+    width: 304px;
+  }
+
+  .mg-b-20 {
+    margin-bottom: 2vh;
+  }
+
+  .m-l-15 {
+    margin-left: .5%;
+  }
+}
 </style>
+

src/views/bigdata/chart-camera.vue

@@ -1,393 +0,0 @@
-<!-- **************************************NO.16 摄像头*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="camera1" style="width: 100%; height:25vh; ">
-		</div>
-		<div id="camera2" style="width: 100%; height:30vh; ">
-		</div>
-		<div id="camera3" style="width: 100%; height:30vh; ">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'camera',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts1();
-			this.myEcharts2();
-			this.myEcharts3();
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
-			myEcharts1() {
-				var chartDom = document.getElementById('camera1');
-				var myChart = echarts.init(chartDom);
-				var option;
-				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
-				option = {
-					dataset: {
-						dimensions: ['name', '摄像头'],
-						source: [{
-								name: '双辽市',
-								'摄像头': 50
-							},
-							{
-								name: '梨树县',
-								'摄像头': 40
-							},
-							{
-								name: '伊通县',
-								'摄像头': 30
-							},
-							{
-								name: '铁东区',
-								'摄像头': 20
-							},
-							{
-								name: '铁西区',
-								'摄像头': 30
-							}
-						]
-					},
-					tooltip: {
-						trigger: 'item',
-						position: function(point, params, dom, rect, size) {
-							const x = point[0];
-							const y = point[1];
-				 		const viewWidth = size.viewSize[0];
-							const viewHeight = size.viewSize[1];
-							const boxWidth = size.contentSize[0];
-				 		const boxHeight = size.contentSize[1];
-							let posX = 0;
-							let posY = 0;
-				 		if (x < boxWidth) {
-								// 左边放不开
-								posX = 5;
-							} else {
-								// 左边放的下
-								posX = x - boxWidth;
-							}
-							if (y < boxHeight) {
-								// 上边放不开
-								posY = 5;
-							} else {
-								// 上边放得下
-								posY = y - boxHeight;
-							}
-							return [posX, posY];
-						},
-					},
-					angleAxis: {
-						max(value) {
-							return value.max * 1.1;
-						},
-						axisLabel: {
-							show: false
-						},
-						axisTick: {
-							show: false
-						},
-				  axisLine: {
-							show: false
-						},
-						splitLine: {
-							show: false
-						},
-						startAngle: 270
-					},
-					radiusAxis: {
-						type: 'category',
-						minorTick: {
-							show: false
-						},
-						axisLine: {
-							show: false
-						},
-						axisTick: {
-							show: false
-						},
-						axisLabel: {
-							show: false
-						},
-					},
-					polar: {
-				 	radius: ['40%', '90%'],
-				 },
-					// angleAxis:{
-					//     clockwise:false
-					// },
-					series: [{
-						type: 'bar',
-						coordinateSystem: 'polar',
-						itemStyle: {
-				  	color(params) {
-								const idx = params.dataIndex;
-								return dfColor[idx];
-							},
-						},
-						barWidth: 5,
-						roundCap: true,
-						showBackground: true,
-						backgroundStyle: {
-							color: 'RGBA(0, 69, 117, 0.5)',
-						},
-					}],
-				};
-				option && myChart.setOption(option);
-			},
-
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=pAD_0lcRq_zOGf_k
-			myEcharts2() {
-				var chartDom = document.getElementById('camera2');
-				var myChart = echarts.init(chartDom);
-				var option;
-				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
-				option = {
-					dataset: {
-						source: [
-							["类型1", 1200],
-							["类型2", 1000],
-							["类型3", 746],
-							["类型4", 636],
-							["类型5", 581],
-							["类型6", 426],
-							["类型7", 326]
-						],
-					},
-					tooltip: {
-						trigger: 'item',
-
-					},
-					grid: {
-						top: "10%",
-						left: "6%",
-						// right: "4%",
-						bottom: "5%",
-						width: '75%',
-						containLabel: true,
-					},
-					xAxis: {
-						show: false,
-						type: "value",
-					},
-					yAxis: {
-						type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
-						inverse: true,
-						axisLabel: {
-							show: true,
-							textStyle: {
-								color: '#5deaff',
-								fontSize: '12'
-							}
-						},
-				  splitLine: {
-							show: false
-						},
-						axisTick: {
-							show: false
-						},
-						axisLine: {
-							show: false
-						},
-					},
-
-					series: [{
-
-						type: "bar",
-						animationCurve: "easeOutBack",
-						barWidth: 5,
-						label: {
-							show: true,
-							position: "right",
-							offset: [0, 0],
-							color: "#88dfd5",
-							// fontSize: "12",
-							style: {
-				   	fill: "#fff"
-							},
-						},
-						backgroundBar: {
-							show: true,
-							style: {
-								fill: "rgba(97,152,255,0.30)",
-							},
-						},
-						barStyle: {
-							stroke: "rgba(41,244,236,1)",
-						},
-						gradient: {
-							color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
-						},
-						itemStyle: {
-							label: {
-								show: true
-							},
-							labelLine: {
-								show: false,
-							},
-							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-				 				offset: 0,
-									color: "rgba(41,244,236,0)"
-								},
-								{
-									offset: 1,
-									color: "rgba(41,244,236,1)"
-								},
-							]),
-							borderColor: "#a2f9f7",
-							shadowBlur: 16,
-							shadowColor: "#a2f9f7",
-						},
-					}, ],
-				};
-				option && myChart.setOption(option);
-			},
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=ELjN7o3m72tLtmbv
-			myEcharts3() {
-				var chartDom = document.getElementById('camera3');
-				var myChart = echarts.init(chartDom);
-				var option;
-				option = {
-					color: ['#3D91F7', '#61BE67'],
-					tooltip: {},
-					legend: {
-						show: true,
-						icon: "circle",
-						bottom: 30,
-						center: 0,
-						itemWidth: 14,
-						itemHeight: 14,
-						itemGap: 21,
-						orient: "horizontal",
-						data: ['a', 'b'],
-						textStyle: {
-							color: '#8C8C8C'
-						},
-					},
-
-					radar: {
-						// shape: 'circle',
-						radius: '80%',
-						triggerEvent: true,
-						name: {
-							textStyle: {
-								color: '#fff',
-								fontSize: '10',
-								borderRadius: 3,
-								padding: [3, 5]
-							}
-						},
-						nameGap: '2',
-						indicator: [{ //[4300, 10000, 28000, 35000, 50000, 19000, 21000]
-								name: '型号1',
-								max: 6500
-							},
-							{
-								name: '型号2',
-								max: 16000
-							},
-							{
-								name: '型号3',
-								max: 30000
-							},
-							{
-								name: '型号4',
-								max: 38000
-							},
-							{
-								name: '型号5',
-								max: 52000
-							},
-							{
-								name: '型号6',
-								max: 25000
-							},
-							{
-								name: '型号7',
-								max: 25000
-							}
-						],
-						splitArea: {
-							areaStyle: {
-								color: [
-									'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
-									'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
-									'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
-								].reverse()
-							}
-						},
-						// axisLabel:{//展示刻度
-						//     show: true
-						// },
-						axisLine: { //指向外圈文本的分隔线样式
-							lineStyle: {
-								color: 'rgba(0,0,0,0)'
-							}
-						},
-						splitLine: {
-							lineStyle: {
-								width: 2,
-								color: [
-									'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
-									'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
-									'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
-								].reverse()
-							}
-						},
-
-					},
-
-					series: [{
-						name: '型号统计',
-						type: 'radar',
-						//areaStyle: {normal: {}},
-						areaStyle: {
-							normal: {
-								color: 'rgba(252,211,3, 0.3)'
-							}
-						},
-						symbolSize: 0,
-						lineStyle: {
-							normal: {
-								color: 'rgba(252,211,3, 1)',
-								width: 1
-				  	}
-						},
-						data: [{
-							value: [4300, 10000, 28000, 35000, 50000, 19000, 21000],
-							name: '型号统计',
-
-
-
-						}]
-					}]
-				};
-				option && myChart.setOption(option);
-			},
-
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-		flex-direction: column;
-	}
-</style>

src/views/bigdata/chart-collection.vue

@@ -1,137 +0,0 @@
-<!-- **************************************NO.10 收集点*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="collection" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'collection',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=UDNqxg4NZdRORp80
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('collection');
-				var myChart = echarts.init(chartDom);
-				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
-				var option;
-				let bgColor = '#fff';
-				let title = '总量';
-				let echartData = [
-				    {
-				        name: '双辽市',
-				        value: '3720',
-				    },
-				    {
-				        name: '梨树县',
-				        value: '2920',
-				    },
-				    {
-				        name: '伊通县',
-				        value: '2200',
-				    },
-				    {
-				        name: '铁东区',
-				        value: '1420',
-				    },
-					{
-					    name: '铁西区',
-					    value: '1620',
-					},
-				];
-				
-				let formatNumber = function (num) {
-				    let reg = /(?=(\B)(\d{3})+$)/g;
-				    return num.toString().replace(reg, ',');
-				};
-				let total = echartData.reduce((a, b) => {
-				    return a + b.value * 1;
-				}, 0);
-				
-				option = {
-				    color: color,
-				    series: [
-				        {
-				            type: 'pie',
-				            radius: ['50%', '70%'],
-				            center: ['50%', '50%'],
-				            data: echartData,
-				            hoverAnimation: false,
-				            itemStyle: {
-				                normal: {
-				                    borderWidth:1,
-				                },
-				
-				                emphasis: {
-				                    borderColor: bgColor,
-				                    borderWidth: 2,
-				                         shadowBlur: 8,
-				                borderColor: "#00ffff",
-				                shadowColor: "#00ffff",
-				                },
-				            },
-				            labelLine: {
-				                normal: {
-				                    length: 20,
-				                    length2:10,
-				                    lineStyle: {
-				                        color: '#356781',
-				                    },
-				                },
-				            },
-				            label: {
-				                normal: {
-				                    formatter: (params) => {
-				                        return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}';
-				                    },
-				                    rich: {
-				                        icon: {
-				                            fontSize: 10,
-				                        },
-				                        name: {
-				                            fontSize:10,
-				                            padding: [0, 3, 0, 4],
-				                            color: '#23c9ea',
-				                        },
-				                        value: {
-				                            fontSize: 10,
-				                            color: '#ffffff',
-				                        },
-				                    },
-				                },
-				            },
-				        },
-				    ],
-				};
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/chart-danger.vue

@@ -1,289 +0,0 @@
-<!-- **************************************NO.4 隐患*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="danger" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'danger',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
-
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('danger');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
-				var option;
-				let data = [582, 421, 622, 625, 265]
-				let indicator = [{
-						name: '双辽市',
-						max: 1000
-					},
-					{
-						name: '梨树县',
-						max: 1000
-					},
-					{
-						name: '伊通县',
-						max: 1000
-					},
-					{
-						name: '铁东区',
-						max: 1000
-					},
-					{
-						name: '铁西区',
-						max: 1000
-					},
-				]
-
-				option = {
-
-					radar: {
-						center: ['50%', '50%'],
-						radius: '89%',
-						name: {
-							formatter: function(name, indicator) {
-								let arr;
-								//   if(name=='开卡绑定数'||name=='渠道批量办理业务'){
-								//         arr = [
-								//         '{a|'+name+'}{b|'+indicator.value+'万}'
-								//     ]
-								//   }else{
-								arr = [
-									'{a|' + name + '}'
-								]
-								//   }
-
-								return arr.join('\n')
-							},
-							textStyle: {
-								rich: { //根据文字的组设置格式
-									a: {
-										color: '#13ffdc',
-										fontSize: 12,
-										fontFamily: 'Source Han Sans CN',
-									},
-									// b:{
-									//     fontSize:14,
-									//     verticalAlign:'top',
-									//     width:57,
-									//     color:'#8E88FE',
-									//     fontWeight:600,
-									//     align:'center'
-									// },
-								}
-
-							}
-						},
-						nameGap: 0,
-						indicator: indicator,
-						splitLine: {
-							show: false
-
-						},
-						splitArea: {
-							show: false
-						},
-						axisLine: {
-							show: false
-						}
-					},
-					series: [{
-							// name: '家庭融合包',
-							type: 'radar',
-							data: [data],
-							// value:14,
-							label: {
-								show: true,
-								formatter: function(params) {
-									console.log(params)
-									return params.value ;
-								},
-								color: '#ffffff',
-								// position:[-20,-10,-10,-10],
-								align: 'right',
-								distance: 10,
-								align: 'right'
-							},
-							symbolSize: [6, 6],
-							lineStyle: { //边缘颜色
-								width: 0
-							},
-							itemStyle: {
-								borderWidth: 1,
-								color: '#fff',
-								borderColor: '#F2F063',
-							},
-							areaStyle: {
-								color: '#7D77F1',
-								opacity: 0.6
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[1000, 1000, 1000, 1000, 1000, 1000],
-							],
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
-
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.06
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[900, 900, 900, 900, 900, 900],
-							],
-
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#2C72C8'
-							},
-
-							areaStyle: {
-								color: '#2C72C8',
-								opacity: 0.12
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[800, 800, 800, 800, 800, 800]
-							],
-
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
-
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.18
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[700, 700, 700, 700, 700, 700]
-							],
-
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
-
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.19
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[600, 600, 600, 600, 600, 600],
-							],
-
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
-
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.17
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[500, 500, 500, 500, 500, 500],
-							],
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
-
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.16
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[400, 400, 400, 400, 400, 400],
-							],
-
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
-
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.13
-							}
-						},
-					]
-				};
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/chart-detector.vue

@@ -1,213 +0,0 @@
-<!-- **************************************NO.17 探测器*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="detector1" style="width: 100%; height:25vh; ">
-		</div>
-		<div id="detector2" style="width: 100%; height:30vh; ">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'detector',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts1();
-			this.myEcharts2();
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=gK9VdA5_F06NTrpr
-			myEcharts1() {
-				var chartDom = document.getElementById('detector1');
-				var myChart = echarts.init(chartDom);
-				var option;
-				 option = {
-				    tooltip: {
-				        trigger: 'item',
-				    },
-				    color: ['#f7c778', '#d77169', '#c14f60', '#4d9564', '#215b85', ],
-				  
-				    series : [
-				        {
-				            name:'探测器分布',
-				            type:'funnel',
-				            x: '10%',
-				            y: 15,
-				            //x2: 80,
-				            y2: 15,
-				            width: '80%',
-				            // height: {totalHeight} - y - y2,
-				            min: 0,
-				            max: 100,
-				            minSize: '40%',
-				            maxSize: '100%',
-				            sort : 'descending', // 'ascending', 'descending'
-				            gap :0,
-				            data:[
-				                {value:60, name:'双辽市'},
-				                {value:40, name:'梨树县'},
-				                {value:20, name:'伊通县'},
-				                {value:80, name:'铁东区'},
-				                {value:100, name:'铁西区'}
-				            ].sort(function (a, b) { return a.value - b.value}),
-				            roseType: true,
-				            label: {
-				                normal: {
-				                    color:'#fff',
-				                    formatter:'{b} {c}',
-				                    position: 'center',
-				                    rich:{
-				                        style:{
-				                            fontSize:'20px',
-											color:'#ffffff',
-				                        },
-				                      
-				                    }
-				                }
-				            },
-				            itemStyle: {
-				                normal: {
-				                    borderWidth: 0,
-				                    shadowBlur: 30,
-				                    shadowOffsetX: 0,
-				                    shadowOffsetY: 10,
-				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-				                }
-				            }
-				            
-				        }
-				        
-				    ]
-				};
-				option && myChart.setOption(option);
-			},
-
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=APfCRAFKxpN_qWeq
-			myEcharts2() {
-				var chartDom = document.getElementById('detector2');
-				var myChart = echarts.init(chartDom);
-				var option;
-				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
-				let dataArray = {
-				    xdataName: ['类型1', '类型1', '类型3', '类型3', '类型4', '类型5', '类型6'],
-				    contractnum: [9999, 8888, 7777, 6666, 5555, 4444, 3333]
-				}
-				
-				
-				let color2 = [
-				    [{ offset: 0, color: '#ff8881' }, { offset: 0.15, color: '#ff564c' },{ offset: 1, color: 'rgba(255,86,76, 0.08)' }],
-				    [{ offset: 0, color: '#fff9e1' }, { offset: 0.15, color: '#ffe376' },{ offset: 1, color: 'rgba(255,209,26, 0.08)' }],
-				    [{ offset: 0, color: '#f7ff98' }, { offset: 0.15, color: '#efff37' },{ offset: 1, color: 'rgba(239,255,55, 0.08)' }],
-				    [{ offset: 0, color: '#32ffee' }, { offset: 0.15, color: '#cdfffb' },{ offset: 1, color: 'rgba(50,255,238, 0.1)' }],
-				]
-				// tooltip
-				let tooltip = {
-				    trigger: 'axis',
-				    textStyle: { fontSize: 10 },
-				    axisPointer: { type: 'cross' },
-				    formatter: v => {
-				        let [a] = v
-				        return `
-				            <div class='u-p-2'>
-				                <div>${a.name}：${a.value}</div>
-				            </div>
-				        `
-				    }
-				}
-				
-				// grid
-				let grid = { top: '20%', left: '10%', right: '10%', bottom: '20%' }
-				
-				// xAxis
-				let xAxis = {
-				    type: 'category',
-				    boundaryGap: true,
-				    data: dataArray.xdataName,
-				    axisLine: { lineStyle: { color: '#fff' } },
-				    axisLabel: {
-				        textStyle: { fontSize: 10, color: '#fff' },
-				        rotate: 0
-				    },
-				    axisTick: { show: false }, //坐标轴刻度
-				}
-				
-				// yAxis
-				let yAxis = {
-				     show: false
-				}
-				
-				// series
-				let series = [{
-				    name: '中高风险地区',
-				    type: 'pictorialBar',
-				    barWidth: 15,
-				    // 三角矢量柱状图
-				    symbol: 'path://M-0.000,431.000 C59.528,394.477 61.000,-0.000 61.000,-0.000 C61.000,-0.000 62.472,394.477 122.000,431.000 L-0.000,431.000 Z',
-				    // 是否裁剪图形
-				    symbolClip: false,
-				    data: dataArray.contractnum,
-				     itemStyle: {
-				        color: params => {
-				            return params.name === dataArray.xdataName[0] 
-				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[0]) 
-				            : params.name === dataArray.xdataName[1] 
-				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[1]) 
-				            : params.name === dataArray.xdataName[2]
-				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[2]) 
-				            : new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[3]) 
-				        } 
-				    },
-				    label: {
-				        show: true,
-				        position: 'top',
-				        formatter: params => { 
-				            return params.name === dataArray.xdataName[0] 
-				            ? `{a|${params.value}}` 
-				            : params.name === dataArray.xdataName[1] 
-				            ? `{b|${params.value}}` 
-				            : params.name === dataArray.xdataName[2]
-				            ? `{c|${params.value}}` 
-				            : `{d|${params.value}}` 
-				        },
-				        rich: {
-				            a: { color: '#ff564c' },
-				            b: { color: '#ffd11a' },
-				            c: { color: '#efff37' },
-				            d: { color: '#32ffee' },
-				
-				        },
-				        textStyle: { fontSize: 16 }
-				    },
-				}]
-				
-				// 渲染
-				option = { tooltip, grid, xAxis, yAxis, series }
-				option && myChart.setOption(option);
-			},
-			
-
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-		flex-direction: column;
-	}
-</style>

src/views/bigdata/chart-enterprise.vue

@@ -1,117 +0,0 @@
-<!-- **************************************NO.3 企业*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="enterprise" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'enterprise',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods:{
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
-			
-			myEcharts() {
-				
-				
-				var chartDom = document.getElementById('enterprise');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
-				var option;
-				 var value = [987, 634, 413, 312, 123];
-				var temp = 0;
-				option = {
-				  
-				    tooltip: {
-				        trigger: 'item',
-				        formatter: '{a} <br/>{b} : {c} ',
-				    },
-				   
-				    legend: {
-				        // show: false,
-						textStyle:{
-							color:'#fffff',
-							fontSize:10
-						},
-						itemWidth:19,
-						top:'2%',
-				        data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
-				    },
-				    series: [
-				        {
-				            name: '企业分布',
-				            type: 'funnel',
-							top:'25%',
-				            left: '10%',
-				            width: '70%',
-							height:'68%',
-							
-				            label: {
-				                show: true,
-				                color: '#07faa9',
-				                formatter: function () {
-				                    for (var i in value) {
-				                        console.log(value[i]);
-				                        if (i == temp) {
-				                            temp++;
-				                            return value[i] ;
-				                        }
-				                    }
-				                },
-				            },
-				            labelLine: {
-				                show: true,
-				            },
-				            itemStyle: {
-				                opacity: 1,
-				            },
-				            emphasis: {
-				                label: {
-				                    position: 'inside',
-				                    // formatter: '{b}Expected: {c}%',
-				                },
-				            },
-				            data: [
-				                { value: 100, name: '双辽市', itemStyle: { color: '#4672F7' } },
-				                { value: 80, name: '梨树县', itemStyle: { color: '#4C9DFF' } },
-				                { value: 60, name: '伊通县', itemStyle: { color: '#36DC88' } },
-				                { value: 40, name: '铁东区', itemStyle: { color: '#FBC71B' } },
-				                { value: 20, name: '铁西区', itemStyle: { color: '#F9A646' } },
-				            ],
-				        },
-				    ],
-				};
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-
-
-
-
-</style>

src/views/bigdata/chart-event.vue

@@ -1,314 +0,0 @@
-<!-- **************************************NO.2 事件类型 分类*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="event" style="width: 50%; height:21vh;">
-		</div>
-		<div id="event2" style="width: 50%; height:21vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'event',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-			this.myEcharts2()
-
-		},
-
-		methods:{
-			// 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
-			//http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
-			
-			myEcharts() {
-				
-				
-				var chartDom = document.getElementById('event');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
-				var option;
-				
-				
-				option = {
-				  color: color,
-				  tooltip: {
-				    trigger: 'item',
-					position: 'top'
-				  },
-				  series: [
-				    {
-				      name: '事件类型',
-				      type: 'pie',
-					  center:['50%','60%'],
-				      radius: ['55%', '70%'],
-				      avoidLabelOverlap: false,
-				      
-				      label: {
-				        show: false,
-				        position: 'center'
-				      },
-				      emphasis: {
-				        label: {
-				          show: true,
-				          fontSize: '12',
-				          fontWeight: 'bold'
-				        }
-				      },
-				      labelLine: {
-				        show: false
-				      },
-				      data: [
-				        { value: 1048, name: '事件1' },
-				        { value: 735, name: '事件2' },
-				        { value: 580, name: '事件3' },
-				        { value: 484, name: '事件4' },
-				        { value: 300, name: '事件5' }
-				      ]
-				    },
-					
-				  ]
-				};
-				
-				option && myChart.setOption(option);
-				
-			},
-			myEcharts2() {
-				
-				
-				var chartDom = document.getElementById('event2');
-				var myChart = echarts.init(chartDom);
-				 let dashedPic =
-				    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
-				let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff','#E148EB'];
-				var option;
-				let chartData = [
-				    {
-				        name: '双辽市',
-				        value: 40083,
-				        unit: '列',
-				    },
-				    {
-				        name: '梨树县',
-				        value: 33974,
-				        unit: '列',
-				    },
-				    {
-				        name: '伊通县',
-				        value: 15400,
-				        unit: '列',
-				    },
-				    {
-				        name: '铁东区',
-				        value: 11021,
-				        unit: '列',
-				    },
-				    {
-				        name: '铁西区',
-				        value: 30696,
-				        unit: '列',
-				    },
-				
-				];
-				let arrName = [];
-				let arrValue = [];
-				let sum = 0;
-				let pieSeries = [],
-				    lineYAxis = [];
-				
-				// 数据处理
-				chartData.forEach((v, i) => {
-				    arrName.push(v.name);
-				    arrValue.push(v.value);
-				    sum = sum + v.value;
-				});
-				
-				// 图表option整理
-				chartData.forEach((v, i) => {
-				    pieSeries.push({
-				        name: '沪昆线到达晚点情况',
-				        type: 'pie',
-				        clockWise: false,
-				        hoverAnimation: false,
-				        radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
-				        center: ['35%', '60%'],
-				        label: {
-				            show: false,
-				        },
-				        itemStyle: {
-				            borderRadius: 20,
-				        },
-				        data: [
-				            {
-				                value: v.value,
-				                name: v.name,
-				                 itemStyle: {
-				                    normal: {
-				                        borderWidth: 5,
-				                        borderColor:color[i]
-				                    }
-				                }
-				            },
-				            {
-				                value: sum - v.value,
-				                name: '',
-				                itemStyle: {
-				                    color: 'rgba(0,0,0,0)',
-				                },
-				            },
-				        ],
-				    });
-				    pieSeries.push({
-				        name: '',
-				        type: 'pie',
-				        silent: true,
-				        z: 1,
-				        clockWise: false, //顺时加载
-				        hoverAnimation: false, //鼠标移入变大
-				        radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
-				        center: ['35%', '60%'],
-				        label: {
-				            show: false,
-				        },
-				        itemStyle: {
-				            borderCap: 'round',
-				            borderJoin: 'round',
-				        },
-				        data: [
-				            {
-				                value: 7.5,
-				                itemStyle: {
-				                    color: '#E3F0FF',
-				                },
-				            },
-				            {
-				                value: 2.5,
-				                name: '',
-				                itemStyle: {
-				                    color: 'rgba(0,0,0,0)',
-				                },
-				            },
-				        ],
-				    });
-				    v.percent = ((v.value / sum) * 100).toFixed(1) + '%';
-				    lineYAxis.push({
-				        value: i,
-				        textStyle: {
-				            rich: {
-				                circle: {
-				                    color: color[i],
-				                    padding: [0, 0],
-				                },
-				            },
-				        },
-				    });
-				});
-				
-				option = {
-				    color: color,
-				    grid: {
-				        top: '20%',
-				        bottom: '45%',
-				        left: '40%',
-				        containLabel: false,
-				    },
-				    yAxis: [
-				        {
-				            type: 'category',
-				            inverse: true,
-				            axisLine: {
-				                show: false,
-				            },
-				            axisTick: {
-				                show: false,
-				            },
-				            axisLabel: {
-				                formatter: function (params) {
-				                    let item = chartData[params];
-				                    console.log(item);
-				                    return (
-				                        '{circle|●}{name|' +
-				                        item.name +
-				                        '}{bd||}{percent|' +
-				                        item.percent +
-				                        '}'
-				                    );
-				                },
-				                interval: 0,
-				                inside: true,
-				                textStyle: {
-				                    color: '#333',
-				                    fontSize: 10,
-				                    rich: {
-				                        line: {
-				                            width: 170,
-				                            height: 5,
-				                            backgroundColor: { image: dashedPic },
-				                        },
-				                        name: {
-				                            color: '#fff',
-				                            fontSize: 10,
-				                        },
-				                        bd: {
-				                            color: '#72afff',
-				                            padding: [0, 5],
-				                            fontSize: 10,
-				                        },
-				                        percent: {
-				                            color: '#5cdad0',
-				                            fontSize: 10,
-				                        },
-				                        value: {
-				                            color: '#333',
-				                            fontSize: 16,
-				                            fontWeight: 500,
-				                            padding: [0, 0, 0, 10],
-				                        },
-				                        unit: {
-				                            fontSize: 14,
-				                        },
-				                    },
-				                },
-				                show: true,
-				            },
-				            data: lineYAxis,
-				        },
-				    ],
-				    xAxis: [
-				        {
-				            show: false,
-				        },
-				    ],
-				    series: pieSeries,
-				};
-				
-				option && myChart.setOption(option);
-				
-			},
-
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-
-
-
-
-</style>

src/views/bigdata/chart-farm.vue

@@ -1,174 +0,0 @@
-<!-- **************************************NO.8 养殖场分布*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="farm" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'farm',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=KH0XpN7nyKZZae11
-
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('farm');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
-				var option;
-				var data =  [20, 80, 100, 40, 34];
-				option = {
-				    color: ["#41FF80"],
-				    title: {
-				        show: false
-				    },
-				    grid: {
-				        top: '15%',
-				        right: '12%',
-				        bottom: '22%',
-				        left: '15%'
-				    },
-				    tooltip: {
-				        show: false
-				    },
-				    xAxis: {
-				        data: [
-				            "双辽市",
-				            "梨树县",
-				            "伊通县",
-				            "铁东区",
-				            "铁西区",
-				        ],
-				        axisLine: {
-				            show: true, //隐藏X轴轴线
-				            lineStyle: {
-				                color: '#2D455A'
-				            }
-				        },
-				        axisTick: {
-				            show: false //隐藏X轴刻度
-				        },
-				        axisLabel: {
-				            show: true,
-				            margin: 14,
-				            fontSize: 10,
-				            textStyle: {
-				                color: '#ffffff' //X轴文字颜色
-				            }
-				        }
-				    },
-				    yAxis: [{
-				        type: 'value',
-				        gridIndex: 0,
-				        interval: 25,
-				        // splitNumber: 4,
-				        splitLine: {
-				            show: true,
-				            lineStyle: {
-				                type: 'solid',
-				                color: '#325A9F',
-				                width: 1
-				            }
-				        },
-				        axisTick: {
-				            show: false
-				        },
-				        axisLine: {
-				            show: false
-				        },
-				        axisLabel: {
-				            show: true,
-				            formatter: '{value}',
-				            fontSize: 10,
-				            textStyle: {
-				                color: '#6ad8ff' //X轴文字颜色
-				            }
-				        }
-				    }],
-				    series: [{
-				            name: '养殖场分布',
-				            type: 'bar',
-				            barWidth: 8,
-				            itemStyle: {
-				                normal: {
-				                    label: {
-				                        show: true, //开启显示
-				                        position: 'top', //在上方显示
-				                        textStyle: { //数值样式
-				                            color: '#fff',
-				                        }
-				                    },
-				                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-				                            offset: 0,
-				                            color: '#fffa55'
-				                        },
-				                        {
-				                            offset: 0.5,
-				                            color: '#55ff18'
-				                        },
-				                        {
-				                            offset: 1,
-				                            color: '#29eeff'
-				                        }
-				                    ])
-				                }
-				            },
-				            data:data,
-				            z: 10,
-				            zlevel: 0
-				        },
-				        {
-				            // 分隔
-				            type: 'pictorialBar',
-				            itemStyle: {
-				                normal: {
-				                    color: '#0F375F'
-				                }
-				            },
-				            symbolRepeat: 'fixed',
-				            symbolMargin: 2,
-				            symbol: 'rect',
-				            symbolClip: true,
-				            symbolSize: [8, 2],
-				            symbolPosition: 'start',
-				            symbolOffset: [0, -1],
-				            // symbolBoundingData: this.total,
-				            data:data,
-				            width: "100%",
-				            z: 0,
-				            zlevel: 1
-				        }
-				    ]
-				};
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/chart-farmtype.vue

@@ -1,99 +0,0 @@
-<!-- **************************************NO.9 散养户、养殖场养殖种类*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="farmtype" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'farmtype',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=smh2KYnoCMWnT1IN
-
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('farmtype');
-				var myChart = echarts.init(chartDom);
-				var color = ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'];
-				var option;
-				option = {
-				    color:color,
-				    tooltip : {
-				        formatter: "{b}：{c}%"
-				    },
-				    
-				    
-				    legend: {
-						textStyle:{
-							color:'#fffff',
-							fontSize:10
-						},
-						itemWidth:15,
-				        orient: 'vertical',
-				        left: '10%',
-						top:'5%',
-				        data: ['一般修剪', '浇水', '除草', '绿篱修剪', '病虫害防治', '施肥', '伐除', '其他']
-				    },
-				    series: [
-				        {
-				            name: '',
-				            type: 'pie',
-				            radius: '80%',
-				            center: ['65%', '48%'],
-				            data:[
-				                {value:40, name:'一般修剪'},
-				                {value:30, name:'浇水'},
-				                {value:25, name:'除草'},
-				                {value:18, name:'绿篱修剪'},
-				                {value:10, name:'病虫害防治'},
-				                {value:5, name:'施肥'},
-				                {value:4, name:'伐除'},
-				                {value:3, name:'其他'}
-				            ],
-				            emphasis: {
-				                itemStyle: {
-				                    shadowBlur: 10,
-				                    shadowOffsetX: 0,
-				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-				                }
-				            },
-				            label: {
-				                normal: {
-				                    show: false,
-				                }
-				            }
-				        }
-				    ]
-				};
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/chart-firecontrol.vue

@@ -1,130 +0,0 @@
-<!-- **************************************NO.18 消防*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="firecontrol" style="width: 100%; height:25vh; ">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'firecontrol',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts1();
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=f46x0t0c7883X-D6
-			myEcharts1() {
-				var chartDom = document.getElementById('firecontrol');
-				var myChart = echarts.init(chartDom);
-				var option;
-				 option = {
-				    tooltip: {
-				        trigger: 'axis',
-				        axisPointer: {
-				            type: 'shadow'
-				        }
-				    },
-				    grid:{
-				        top:'15%',
-				        left:'10%',
-				        right:'10%',
-				        buttom:'15%',
-				    },
-				     xAxis: {
-				        type: 'category',
-				        axisLine: {
-				            lineStyle: {
-				                color: 'rgba(255,255,255,0.12)',
-				            },
-				        },
-				        axisLabel: {
-				            margin: 10,
-				            color: '#e2e9ff',
-				            textStyle: {
-				                fontSize: 10
-				            },
-				        },
-				        axisTick:{
-				            show:false,
-				        },
-				         data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区']
-				    },
-				    yAxis: {
-				        nameTextStyle:{
-				            color:'#fff',
-				        },
-				        type: 'value',
-				         axisLine: {
-				             show:false,
-				            lineStyle: {
-				                color: 'rgba(255,255,255,0.12)'
-				            },
-				        },
-				        axisLabel: {
-							 show:false,
-				            formatter: '{value}',
-				            color: '#e2e9ff',
-				        },
-				         splitLine: {
-				            lineStyle: {
-				                color: 'rgba(255,255,255,0.12)'
-				            }
-				        },
-				        axisTick:{
-				            show:true,
-				            
-				            lineStyle:{
-				                color:'#fff',
-				            },
-				        },
-				    },
-				    series: [{
-				        itemStyle:{
-				            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-				                    offset: 0,
-				                    color: 'rgba(0,244,255,1)'
-				                }, {
-				                    offset: 1,
-				                    color: 'rgba(0,77,167,1)'
-				                }], false),
-				                barBorderRadius: 10,
-				                opacity:0.8
-				        },
-				        barWidth:10,
-				        label:{
-				            show:true,
-				            position:['0','-20'],
-				            color:'#fff',
-				        },
-				        data: [120, 200, 150, 80, 70],
-				        type: 'bar',
-				    }]
-				};
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-		flex-direction: column;
-	}
-</style>

src/views/bigdata/chart-foam.vue

@@ -1,137 +0,0 @@
-<!-- **************************************NO.14 泡沫液*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="foam" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'foam',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=daPJGrcYMpZanpxR
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('foam');
-				var myChart = echarts.init(chartDom);
-				var zdslColorList = ['#D0A00E', '#34DA62', '#00C0E9', '#0096F3', '#33CCFF'];
-				var option;
-				  option = {
-				      grid: {
-				          top: '5%',
-				          left: '10%',
-				          right: '12%',
-				          bottom: '0',
-				          containLabel: true
-				      },
-				      tooltip: {
-				      },
-				      xAxis: {
-				          show: false,
-				          type: 'value'
-				      },
-				      yAxis: [{
-				              type: 'category',
-							  inverse:true,
-				              data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
-				              axisLabel: {
-				                  show: true,
-				                  textStyle: {
-				                      color: '#ADD6FF',
-				                      fontSize: '12'
-				                  }
-				              },
-				              splitLine: {
-				                  show: false
-				              },
-				              axisTick: {
-				                  show: false
-				              },
-				              axisLine: {
-				                  show: false
-				              },
-				          },
-				          {
-				              splitLine: {
-				                  show: false
-				              },
-				              axisTick: {
-				                  show: false
-				              },
-				              axisLine: {
-				                  show: false
-				              },
-				              axisLabel: {
-				                  show: true,
-				                  textStyle: {
-				                      color: '#ADD6FF',
-				                      fontSize: '12'
-				                  }
-				              },
-				              data: [150, 298, 206, 75, 154]
-				          }
-				      ],
-				 
-				      series: [{
-				              name: "受理数", // bar图的外边框
-				              type: "bar",
-				              barWidth: "20%",
-				              yAxisIndex: 0,
-				              data: [500, 500, 500, 500, 500].map((item, i) => {
-				                  return {
-				                      value: item,
-				                      itemStyle: {
-				                          color: "rgba(0,0,0,0)",
-				                          barBorderColor: zdslColorList[i],
-				                          borderWidth: 1,
-				                          shadowColor: "#33CCFF",
-				                          shadowBlur: 4
-				                      }
-				                  }
-				              }),
-				          },
-				          {
-				              name: "受理数", //这个是Bar图
-				              type: 'bar',
-				              yAxisIndex: 1,
-				              barWidth: "10%",
-				              data: [150, 298, 206, 75, 154]
-				          }
-				      ],
-				      itemStyle: {
-				          color: function(params) {
-				              return zdslColorList[params.dataIndex]
-				          }
-				      }
-				  }
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/chart-forestfarm.vue

@@ -1,149 +0,0 @@
-<!-- **************************************NO.5 林场*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="forestfarm" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'forestfarm',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=2nuQSYycLWN0P_EG
-
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('forestfarm');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
-				var option;
-				option = {
-				        tooltip: {
-				          trigger: 'axis',
-				          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-				            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-				          }
-				        },
-				        grid: {
-				          left: '10%',
-				          right: '10%',
-				          bottom: '10%',
-				          top:'16%',
-				          containLabel: true
-				        },
-				        
-				        xAxis: {
-				          type: 'category',
-				          data: ['双辽市','梨树县','伊通县','铁东区','铁西区'],
-				          axisLine: {
-				            lineStyle: {
-				              color: '#1cc6a1'
-				
-				            }
-				          },
-				          axisLabel: {
-				            // interval: 0,
-				            // rotate: 40,
-				            textStyle: {
-				              fontFamily: 'Microsoft YaHei'
-				            }
-				          },
-				        },
-				
-				        yAxis: {
-				          type: 'value',
-				          max:'500',
-				          axisLine: {
-				            show: false,
-				            lineStyle: {
-				              color: '#19b1e8'
-				            }
-				          },
-				          splitLine: {
-				            show: true,
-				            lineStyle: {
-				              color: 'rgba(255,255,255,0.1)'
-				            }
-				          },
-				          axisLabel: {}
-				        },
-				        
-				        series: [{
-				          type: 'bar',
-				          barWidth: '15%',
-				          itemStyle: {
-				            normal: {
-				                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-				                    offset: 0,
-				                    color: '#fccb05'
-				                }, {
-				                    offset: 1,
-				                    color: '#1689f5'
-				                }]),
-				                barBorderRadius: 12,
-				            },
-				          },
-				          data: [400, 400, 300, 300, 300]
-				        }]
-				      };
-				
-				      var app = {
-				        currentIndex: -1,
-				      };
-				      setInterval(function () {
-				        var dataLen = option.series[0].data.length;
-				
-				        // 取消之前高亮的图形
-				        myChart.dispatchAction({
-				          type: 'downplay',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex
-				        });
-				        app.currentIndex = (app.currentIndex + 1) % dataLen;
-				        //console.log(app.currentIndex);
-				        // 高亮当前图形
-				        myChart.dispatchAction({
-				          type: 'highlight',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex,
-				        });
-				        // 显示 tooltip
-				        myChart.dispatchAction({
-				          type: 'showTip',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex
-				        });
-				
-				
-				      }, 1000);
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/chart-freelyraise.vue

@@ -1,378 +0,0 @@
-<!-- **************************************NO.7 散养户分布*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="freelyraise" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'freelyraise',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE
-
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('freelyraise');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
-				var option;
-				let data = [{
-						"name": "双辽市",
-						"num": "18.987691"
-					},
-					{
-						"name": "梨树县",
-						"num": "20.377176"
-					},
-					{
-						"name": "伊通县",
-						"num": "19.127404"
-					},
-					{
-						"name": "铁东区",
-						"num": "18.40882"
-					},
-					{
-						"name": "铁西区",
-						"num": "17.980597"
-					},
-				]
-
-				function contains(arr, dst) {
-					var i = arr.length;
-					while ((i -= 1)) {
-						if (arr[i] == dst) {
-							return i;
-						}
-					}
-					return false;
-				}
-
-			 var attackSourcesColor = [
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#EB3B5A"
-						},
-						{
-							offset: 1,
-							color: "#FE9C5A"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#FA8231"
-						},
-						{
-							offset: 1,
-							color: "#FFD14C"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#F7B731"
-						},
-						{
-							offset: 1,
-							color: "#FFEE96"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#21fe8f"
-						},
-						{
-							offset: 1,
-							color: "#38911f"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#395CFE"
-						},
-						{
-							offset: 1,
-							color: "#2EC7CF"
-						}
-					])
-					
-				];
-				var attackSourcesColor1 = [
-					"#EB3B5A",
-					"#FA8231",
-					"#F7B731",
-					"#38911f",
-					"#3860FC",
-					"#F57474",
-					"#56D0E3",
-					"#1089E7",
-					"#F57474",
-					"#1089E7",
-					"#F57474",
-					"#F57474"
-				];
-				var attaData = [];
-				var attaName = [];
-				var topName = []
-				data.forEach((it, index) => {
-					attaData[index] = parseFloat(it.num).toFixed(0);
-					//attaData[index] = parseInt(it.num);
-					attaName[index] = it.name;
-					topName[index] = `${it.name}`
-				});
-				var salvProMax = [];
-				var max = attaData[0];
-				for (let i = 0; i < attaData.length; i++) {
-					max = max < attaData[i + 1] ? attaData[i + 1] : max;
-				}
-				for (let i = 0; i < attaData.length; i++) {
-					salvProMax.push(max); //背景按最大值
-				}
-
-				function attackSourcesDataFmt(sData) {
-					var sss = [];
-					sData.forEach(function(item, i) {
-						let itemStyle = {
-							color: i > 5 ? attackSourcesColor[5] : attackSourcesColor[i]
-						};
-						sss.push({
-							value: item,
-							itemStyle: itemStyle
-						});
-					});
-					return sss;
-				}
-
-				option = {
-					tooltip: {
-						show: false,
-						backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
-						textStyle: {
-							fontSize: 12
-						}
-			  },
-					color: ["#F7B731"],
-					legend: {
-						show: false,
-						pageIconSize: [12, 12],
-						itemWidth: 20,
-						itemHeight: 10,
-						textStyle: {
-							//图例文字的样式
-							fontSize: 12,
-							color: "#fff"
-						},
-						selectedMode: false,
-						data: ["个人所得(亿元)"]
-					},
-					grid: {
-						left: '12%',
-						width: '70%',
-						bottom: '5%',
-						top: "8%",
-					},
-					xAxis: {
-						type: "value",
-
-						splitLine: {
-							show: false
-						},
-						axisLabel: {
-							show: false
-						},
-						axisTick: {
-							show: false
-			  	},
-						axisLine: {
-							show: false
-						}
-					},
-					yAxis: [{ //左侧排行数字
-							type: "category",
-							inverse: true,
-			  		axisLine: {
-								show: false
-							},
-							axisTick: {
-								show: false
-							},
-							axisPointer: {
-								label: {
-									show: true,
-									//margin: 30
-								}
-			 			},
-							padding: [5, 0, 0, 0],
-							postion: "right",
-							data: attaName,
-							axisLabel: {
-								margin: 30,
-								fontSize: 12,
-			  			align: "left",
-								padding: [2, 0, 0, 0],
-								color: "#000",
-								rich: {
-									nt1: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[0],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										lineHeight: "5",
-										padding: [0, 1, 2, 1]
-										// padding:[0,0,2,0],
-									},
-									nt2: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[1],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										padding: [0, 1, 2, 1]
-									},
-									nt3: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[2],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										padding: [0, 1, 2, 1]
-									},
-									nt: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[3],
-										width: 15,
-			  					height: 15,
-										fontSize: 12,
-										align: "center",
-										lineHeight: 3,
-										borderRadius: 100,
-										padding: [0, 1, 2, 1],
-										lineHeight: 5
-									}
-								},
-								
-							}
-						},
-						{ //右侧名字
-							type: "category",
-							inverse: true,
-							axisTick: "none",
-							axisLine: "none",
-							show: true,
-							axisLabel: {
-								textStyle: {
-									color: "#fff",
-									fontSize: "12"
-								}
-							},
-							//data: attackSourcesDataFmt(attaName) 
-							data: attackSourcesDataFmt(attaData) //数字
-						},
-						{ //名称
-							type: 'category',
-							offset: -10,
-							position: "left",
-							axisLabel: {
-								color: `#fff`,
-								fontSize: 10
-							},
-			  		axisLine: {
-								show: false
-							},
-							inverse: true,
-							axisTick: {
-								show: false
-							},
-							axisLabel: {
-								interval: 0,
-								color: ["#fff"],
-								align: "left",
-								verticalAlign: "bottom",
-								lineHeight: 32,
-								fontSize: 12
-							},
-							data: topName
-			 		},
-					],
-					series: [{ //条形图数值
-							zlevel: 1,
-							name: "个人所得(亿元)",
-							type: "bar",
-							barWidth: "8px",
-							animationDuration: 1500,
-							data: attackSourcesDataFmt(attaData),
-							align: "center",
-							itemStyle: {
-								normal: {
-									barBorderRadius: 10
-								}
-							},
-							label: {
-								show: false,
-			 				fontSize: 12,
-			  			color: "#fff",
-								textBorderWidth: 2,
-								padding: [2, 0, 0, 0]
-							}
-						},
-						{ //最大值背景条形图
-							name: "个人所得(亿元)",
-							type: "bar",
-							barWidth: 8,
-							barGap: "-100%",
-							margin: "20",
-							data: salvProMax,
-							textStyle: {
-								//图例文字的样式
-								fontSize: 12,
-								color: "#fff"
-							},
-							itemStyle: {
-								normal: {
-									color: "#05325F",
-									//width:"100%",
-									fontSize: 12,
-									barBorderRadius: 30
-								},
-							}
-						}
-					]
-				};
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/chart-hydrant.vue

@@ -1,233 +0,0 @@
-<!-- **************************************NO.13 消火栓*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="hydrant" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'hydrant',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=Ve9zCnhVwZvXTdD0
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('hydrant');
-				var myChart = echarts.init(chartDom);
-				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
-				var option;
-				 var trafficWay = [
-				    {
-				        name: '双辽市',
-				        value: 20,
-				    },
-				    {
-				        name: '梨树县',
-				        value: 20,
-				    },
-				    {
-				        name: '伊通县',
-				        value: 20,
-				    },
-				    {
-				        name: '铁东区',
-				        value: 25,
-				    },
-				    {
-				        name: '铁西区',
-				        value: 20,
-				    },
-				];
-				
-				var data = [];
-				var color = ['#F6C558', '#25EFBD', '#21bad6', '#3283F5', '#E44660'];
-				for (var i = 0; i < trafficWay.length; i++) {
-				    data.push(
-				        {
-				            value: trafficWay[i].value,
-				            name: trafficWay[i].name,
-				            itemStyle: {
-				                normal: {
-				                    borderWidth: 8,
-				                    shadowBlur: 0,
-				                    borderColor: color[i],
-				                    shadowColor: color[i],
-				                },
-				            },
-				        },
-				        {
-				            value: 3,
-				            name: '',
-				            labelLine:{
-				              show:false  
-				            },
-				            itemStyle: {
-				                normal: {
-				                    label: {
-				                        show: false,
-				                    },
-				                    labelLine: {
-				                        show: false,
-				                    },
-				                    color: 'rgba(0, 0, 0, 0)',
-				                    borderColor: 'rgba(0, 0, 0, 0)',
-				                    borderWidth: 0,
-				                },
-				            },
-				        }
-				    );
-				}
-				var seriesOption = [
-				    {
-				        name: '',
-				        type: 'pie',
-				        clockWise:true,
-				        radius: [70, 70],
-				        hoverAnimation: true,
-				        itemStyle: {
-				            normal: {
-				                label: {
-				                    show: true
-				                },
-				            },
-				        },
-				        data: data,
-				        labelLine: {
-				            normal: {
-				                length: 20,
-				                length2: 20,
-				                lineStyle: {
-				                    type: 'solid',
-				                    color: '#31FFFF',
-				                },
-				            },
-				        },
-				        label: {
-				            normal: {
-				                formatter: function (params) {
-				                    var result = '';
-				                    if (params.name) {
-				                        result +=  params.name+'{blue|' + params.value  + '}';
-				                    }
-				                    return result;
-				                },
-				                borderWidth: 0,
-				                borderRadius: 4,
-				                padding: [60, 0],
-				                height: 10,
-				                fontSize: 10,
-				                align: 'center',
-				                color: '#DEDEDE',
-				                rich: {
-				                    blue: {
-				                        fontSize: 10,
-				                        lineHeight: 5,
-				                        color: '#31FFFF',
-				                        padding: [0, 5],
-				                    },
-				                },
-				            },
-				        },
-				    },
-				    {
-				        type: 'pie',
-				        radius: [60, 60],
-				        hoverAnimation: false,
-				        clockWise: false,
-				        itemStyle: {
-				            normal: {
-				                borderColor: 'rgba(2,178,247,0.2)',
-				                borderWidth: 10,
-				            },
-				        },
-				        label: {
-				            show: false,
-				        },
-				        data: [200],
-				    },
-				    {
-				        type: 'pie',
-				        radius: [0, '20%'],
-				        zlevel: 3,
-				        silent: true,
-				        label: {
-				            normal: {
-				                show: false,
-				            },
-				        },
-				        labelLine: {
-				            normal: {
-				                show: false,
-				            },
-				        },
-				        data: [
-				            {
-				                value: 6,
-				                name: '总数',
-				                itemStyle: {
-				                    normal: {
-				                        color: {
-				                            x: 0,
-				                            y: 0,
-				                            x2: 1,
-				                            y2: 0,
-				                            type: 'linear',
-				                            global: false,
-				                            colorStops: [
-				                                {
-				                                    offset: 0,
-				                                    color: 'rgba(2,178,247,0.2)',
-				                                },
-				                                {
-				                                    offset: 1,
-				                                    color: 'rgba(2,178,247,0.2)',
-				                                },
-				                            ],
-				                        },
-				                    },
-				                },
-				            },
-				        ],
-				    },
-				];
-				option = {
-				    color: color,
-				    tooltip: {
-				        show: false,
-				    },
-				    toolbox: {
-				        show: false,
-				    },
-				    series: seriesOption,
-				};
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/chart-pit.vue

@@ -1,87 +0,0 @@
-<!-- **************************************NO.6 矿坑*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="pit" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'pit',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
-			
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('pit');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
-				var option;
-				option = {
-				   
-				    color:color,
-				    tooltip : {
-				        trigger: 'item',
-				        formatter: "{b}: {c}"
-				    },
-				    toolbox: {
-				        show : true,
-				       
-				    },
-
-				    series : [
-				        {
-				            name:'业务警种',
-				            type:'pie',
-				            roseType: true,
-				            radius : ['50%', '70%'],
-				            label: {
-				              show: true,
-				              formatter: "{b} {c}",
-							  textStyle: {
-							      fontSize: 10 ,
-							      
-							  }
-							  
-				            },
-				            data:[
-				                {value:20, name:'双辽市'},
-				                {value:25, name:'梨树县'},
-				                {value:30, name:'伊通县'},
-				                {value:35, name:'铁东区'},
-								{value:35, name:'铁西区'}
-				            ]
-				        }
-				    ]
-				};
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/chart-processing.vue

@@ -1,171 +0,0 @@
-<!-- **************************************NO.12 处理中心*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="processing" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'processing',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=vNg2RQ3LrePk4CnZ
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('processing');
-				var myChart = echarts.init(chartDom);
-				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
-				var option;
-				let dataList = [{
-				    name: '双辽市',
-				    value: '56'
-				}, {
-				    name: '梨树县',
-				    value: '75'
-				}, {
-				    name: '伊通县',
-				    value: '85'
-				}, {
-				    name: '铁东区',
-				    value: '78'
-				}, {
-				    name: '铁西区',
-				    value: '76'
-				}];
-				
-				option = {
-				        grid: {
-				            left: "16%", //距离左边的距离
-				            right: "12%", //距离右边的距离
-				            bottom: "15%", //距离下边的距离
-				            top: "10%" //距离上边的距离
-				        },
-				        title: {
-				            text: '',
-				            left: 26,
-				            top: 26,
-				            textStyle: {
-				                color: '#FFFFFF',
-				                fontSize: 15,
-				                fontWeight: 50000,
-				                fontFamily: 'PingFang SC'
-				            }
-				        },
-				        tooltip: {
-				            trigger: "axis",
-				            axisPointer: {
-				                type: "shadow",
-				                crossStyle: {
-				                    color: "#134d74"
-				                }
-				            },
-				        },
-				        xAxis: [{
-				            type: "category",
-				            data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
-				            axisLabel: {
-				                textStyle: {
-				                    color: "#42a7ff",
-				                    fontSize: 10,
-				                }
-				            },
-				            axisLine: {
-				                show: false
-				            },
-				            axisTick: {
-				                show: false
-				            }
-				        }],
-				        yAxis: [{
-				                type: "value",
-				                axisLabel: {
-				                    formatter: "{value}%",
-				                    textStyle: {
-				                        color: "#42a7ff",
-				                        fontSize: 10,
-				                    },
-				                },
-				                splitLine: {
-				                    lineStyle: {
-				                        color: "#1f3335"
-				                    }
-				                },
-				                axisLine: {
-				                    show: false
-				                },
-				                axisTick: {
-				                    show: false
-				                }
-				            },
-				            
-				        ],
-				        dataZoom: [{
-				            type: 'inside',
-				            start: 0,
-				            end: dataList.length > 15 ? 35 : 100
-				        }],
-				        series: [{
-				                name: "",
-				                type: "bar",
-				                data: dataList,
-				                barGap: '-100%',
-				                barCategoryGap: '80%',
-				                itemStyle: {
-				                    normal: {
-				                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-				                                offset: 0,
-				                                color: 'rgba(27,168,240,1)'
-				                            },
-				                            {
-				                                offset: 1,
-				                                color: 'rgba(32,40,95,0.3)'
-				                            }
-				                        ])
-				                    },
-				                    emphasis: {
-				                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-				                                offset: 0,
-				                                color: 'rgba(27,168,240,1)'
-				                            },
-				                            {
-				                                offset: 1,
-				                                color: 'rgba(27,168,240,0.3)'
-				                            }
-				                        ])
-				                    }
-				                },
-				            },
-				            
-				        ]
-				};
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/chart-watercrane.vue

@@ -1,135 +0,0 @@
-<!-- **************************************NO.11 水鹤*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="watercrane" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'watercrane',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=vNg2RQ3LrePk4CnZ
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('watercrane');
-				var myChart = echarts.init(chartDom);
-				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
-				var option;
-				var salvProName = ["双辽市", "梨树县", "伊通县", "铁东区", "铁西区"];
-				var salvProValue = [11000, 10000, 9000, 8000, 7000];
-				var salvProMax = []; //背景按最大值
-				for (let i = 0; i < salvProValue.length; i++) {
-				    salvProMax.push(salvProValue[0])
-				}
-				option = {
-				    grid: {
-				        left: '8%',
-				        right: '8%',
-				        bottom: '0%',
-				        top: '5%',
-				        containLabel: true
-				    },
-				    tooltip: {
-				        trigger: 'axis',
-				        axisPointer: {
-				            type: 'none'
-				        },
-				        formatter: function(params) {
-				            return params[0].name + ' : ' + params[0].value
-				        }
-				    },
-				    xAxis: {
-				        show: false,
-				        type: 'value'
-				    },
-				    yAxis: [{
-				        type: 'category',
-				        inverse: true,
-				        axisLabel: {
-				            show: true,
-				            textStyle: {
-				                color: '#248bf9',
-				                fontSize: 12,
-				                fontWeight: 500
-				            },
-				        },
-				        splitLine: {
-				            show: false
-				        },
-				        axisTick: {
-				            show: false
-				        },
-				        axisLine: {
-				            show: false
-				        },
-				        data: salvProName
-				    }, {
-				        type: 'category',
-				        inverse: true,
-				        axisTick: 'none',
-				        axisLine: 'none',
-				        show: true,
-				        axisLabel: {
-				            textStyle: {
-				                color: '#fffdfe',
-				                fontSize:10
-				            },
-				            formatter: function(value) {
-				                return (value * 10 / 10).toLocaleString();
-				            },
-				        },
-				        data: salvProValue
-				    }],
-				    series: [{
-				            name: '值',
-				            type: 'bar',
-				            zlevel: 1,
-				            itemStyle: {
-				                normal: {
-				                    barBorderRadius: 10,
-				                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-				                        offset: 0,
-				                        color: 'rgb(57,89,255,1)'
-				                    }, {
-				                        offset: 1,
-				                        color: 'rgb(46,200,207,1)'
-				                    }]),
-				                },
-				            },
-				            barWidth: 10,
-				            data: salvProValue
-				        },
-				    ]
-				};
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/chart-waterintake.vue

@@ -1,110 +0,0 @@
-<!-- **************************************NO.15 取水口*************************************** -->
-<template>
-	<div class="chart-container">
-		<div id="waterintake" style="width: 100%; height:23vh;">
-		</div>
-	</div>
-</template>
-
-<script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'waterintake',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=AQ8Ea8ewtkr0NVzH
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('waterintake');
-				var myChart = echarts.init(chartDom);
-				var option;
-				  option = {
-				     color: ['#1890FF', '#12DDA1', '#F78048', '#FFB026', '#FD4D63', 'rgba(255,255,255,.5)'],
-				     tooltip: {
-				         trigger: 'item',
-				         padding: [10, 10, 10, 10],
-				         formatter: '{b} :<br/> {d}%',
-				     },
-				     series: [
-				         {
-				             name: '',
-				             type: 'pie',
-				             radius: ['36%', '66%'],
-				             center: ['50%', '50%'],
-				             label: {
-				                 fontSize: 10,
-				                 color: '#00a0e5',
-				                 formatter: '{b} {c}',
-				                 // 自定义富文本样式
-				               
-				             },
-				             labelLine: {
-				                 show: true,
-				                 // length: 6,
-				                 // length2: 15
-				             },
-				             data: [
-				                 {
-				                     name: '双辽市',
-				                     value: '40',
-				                 },
-				                 {
-				                     name: '梨树县',
-				                     value: '25',
-				                 },
-				                 {
-				                     name: '伊通县',
-				                     value: '18',
-				                 },
-				                 {
-				                     name: '铁东区',
-				                     value: '12',
-				                 },
-				                 {
-				                     name: '铁西区',
-				                     value: '5',
-				                 },
-				             ],
-				         },
-				         {
-				             type: 'pie',
-				             radius: ['36%', '43%'],
-				             center: ['50%', '50%'],
-				             silent: true,
-				             data: [
-				                 {
-				                     name: '',
-				                     value: 1,
-				                 },
-				             ],
-				         },
-				     ],
-				 };
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
-</style>

src/views/bigdata/fastmenu.vue

@@ -1,88 +0,0 @@
-<template>
-	<div class="fast-menu">
-		<div class="menu-list">
-			<router-link v-for="(fastMenu,index) in fastMenu" :to="fastMenu.path" :key="index" class="header-right" exact><span>{{fastMenu.name}}</span></router-link>
-		</div>
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				fastMenu:[
-					{
-						name:'数据中心',
-						path:'/'
-					},
-					{
-						name:'事件中心',
-						path:'/'
-					},
-					{
-						name:'监控中心',
-						path:'/integrated/monitor'
-					},
-					{
-						name:'任务中心',
-						path:'/'
-					},
-					{
-						name:'评测中心',
-						path:'/'
-					}
-				]
-
-			}
-		}
-	}
-</script>
-
-<style rel="stylesheet/scss" lang="scss">
-	@import '@/assets/styles/base.scss';
-.bigdata-con {
-	.fast-menu {
-
-		position: fixed;
-		right: 1rem;
-		display: flex;
-
-		.menu-list {
-			margin-left: 20px;
-			display: flex;
-			align-items: center;
-
-			span {
-				min-width: 5.625rem;
-				background: url(../../assets/images/integrated/bigdata-header-right-bg.png) center no-repeat;
-				font-size: 12px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 10px 12px;
-				color: $inBlue;
-				height: 100%;
-				cursor: pointer;
-				text-align: center;
-				-webkit-transform: translateX(0px);
-				transform: translateX(0px);
-				transition: all 0.5s ease-in-out;
-
-
-				i {
-					padding-right: 3px;
-				}
-			}
-
-			span:hover {
-				filter: brightness(2.3);
-				-webkit-transform: translateX(-5px);
-				transform: translateX(-5px);
-				transition: all 0.5s ease-in-out;
-				color: $inBlueHover;
-			}
-		}
-
-	}
-	}
-</style>

src/views/bigdata/tabbar.vue

@@ -1,210 +0,0 @@
-<template>
-	<div class="bigdata-map-tabbar">
-		<el-tabs v-model="activeName" @tab-click="handleClick">
-			<el-tab-pane v-for="(district,index) in district" :label="district.label" :name="district.name">
-				<el-row :gutter="20">
-					<el-col :span="4" v-for="(regionNum,index) in regionNum" :key="index">
-						<div class="list-content">
-							<span>{{regionNum.count}}</span>
-							<h5>{{regionNum.name}}</h5>
-						</div>
-					</el-col>
-				</el-row>
-			</el-tab-pane>
-		</el-tabs>
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				//tab默认停留项el-tab-pane > name = "?"
-				activeName: 'sp',
-				//地区分类tabtitle
-				district:[
-					{
-						label:'四平市',
-						name:'sp',
-						id:''
-					},
-					{
-						label:'双辽市',
-						name:'sl',
-						id:''
-					},
-					{
-						label:'梨树县',
-						name:'ls',
-						id:''
-					},
-					{
-						label:'伊通县',
-						name:'yt',
-						id:''
-					},
-					{
-						label:'铁东区',
-						name:'td',
-						id:''
-					},
-					{
-						label:'铁西区',
-						name:'tx',
-						id:''
-					},
-				],
-				// 本地区内分类项数量
-				regionNum:[
-					{
-				       count:641,
-					   name:'事件'
-					},
-					{
-					   count:351,
-					   name:'隐患'
-					},
-					{
-					   count:785,
-					   name:'人口'
-					},
-					{
-					   count:512,
-					   name:'企业'
-					},
-					{
-					   count:786,
-					   name:'林场'
-					},
-					{
-					   count:544,
-					   name:'矿坑'
-					},
-					{
-					   count:320,
-					   name:'收集点'
-					},
-					{
-					   count:321,
-					   name:'水鹤'
-					},
-					{
-					   count:400,
-					   name:'取水口'
-					},
-					{
-					   count:654,
-					   name:'消火栓'
-					},
-					{
-					   count:806,
-					   name:'摄像头'
-					},
-					{
-					   count:312,
-					   name:'养殖场'
-					},
-					{
-					   count:713,
-					   name:'处理中心'
-					},
-					{
-					   count:132,
-					   name:'泡沫液'
-					},
-					{
-					   count:466,
-					   name:'泡沫液'
-					},
-					{
-					   count:897,
-					   name:'消防力量'
-					},
-					{
-					   count:132,
-					   name:'探测器'
-					}
-				]
-			};
-		},
-		methods: {
-			handleClick(tab, event) {
-				console.log(tab, event);
-			}
-		}
-	};
-</script>
-
-<style rel="stylesheet/scss" lang="scss">
-	@import '@/assets/styles/base.scss';
-	.bigdata-map-tabbar {
-		width: 100%;
-		height: 28.5vh;
-		padding: 0 1rem 1rem 1rem!important;
-		box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
-			-0 -0 20px rgba($color: #163696, $alpha: .6) inset;
-
-		.el-tabs__item {
-			color: #fff;
-			font-size: 12px;
-			height: 32px;
-			padding: 0 10px;
-		}
-
-		.el-tabs__item.is-active {
-			color: #3ec6fc;
-		}
-
-		.el-tabs__nav-wrap::after {
-			background: none;
-		}
-
-		.el-tabs__active-bar {
-			// background-color: #ffbc30;
-			border-radius: 20px;
-		}
-
-		.el-tab-pane {
-			color: #fff;
-		}
-
-		.el-tabs__nav-next,
-		.el-tabs__nav-prev {
-			line-height: 40px;
-		}
-
-		.el-tabs__header {
-			margin: 0 0 10px;
-		}
-
-		.list-content {
-			width: 95%;
-			margin: 0 auto;
-			text-align: center;
-			margin-top: 1rem;
-
-			h5 {
-				width: 100%;
-				color: #0aaef2;
-				padding: .2rem 0;
-				border: 1px solid #091641;
-				font-size: 12px;
-			}
-
-			span {
-				width: 100%;
-				display: flex;
-				flex-direction: column;
-				font-size: 12px;
-				
-				padding: .5rem 0;
-				font-weight: bolder;
-				border: 1px solid #091641;
-				border-bottom:none ;
-			}
-		}
-		.list-content:hover{
-			filter: brightness(2.3);
-		}
-	}
-</style>