农业大数据展示页面

src/api/bigdata/bigdata.js

@@ -0,0 +1,78 @@
+import request from '@/utils/request'
+
+// 按照部门统计农业合作社个数--饼图
+export function cooperativesBigData() {
+  return request({
+    url: '/center-agriculture/data/cooperativesBigData',
+    method: 'get',
+  })
+}
+// 按照部门统计农机站个数--饼图
+export function machineryInfoBigData() {
+  return request({
+    url: '/center-agriculture/data/machineryInfoBigData',
+    method: 'get',
+  })
+}
+// 按照部门统计耕地面积--柱状图
+export function landInfoBigData() {
+  return request({
+    url: '/center-agriculture/data/landInfoBigData',
+    method: 'get',
+  })
+}
+// 统计事件类型种类；统计每个种类占当前部门查看权限所有事件的百分比；事件总数；未处理；处理中--两个饼图三个数据信息
+export function eventcatalogueBigData() {
+  return request({
+    url: '/center-agriculture/data/eventcatalogueBigData',
+    method: 'get',
+  })
+}
+export function deptBigData() {
+  return request({
+    url: '/center-agriculture/data/deptBigData',
+    method: 'get',
+  })
+}
+// 站点统计（五角分布图雷达图）按照当前登录人数据权限数据查询农业合作社个数、农机站个数、畜保站个数、植保站个数、养殖、粪污处理个数（不用按照部门分组）
+export function leidaBigData() {
+  return request({
+    url: '/center-agriculture/data/leidaBigData',
+    method: 'get',
+  })
+}
+//按照部门分数植保站个数--柱状图
+export function protectInfoBigData() {
+  return request({
+    url: '/center-agriculture/data/protectInfoBigData',
+    method: 'get',
+  })
+}
+//按照部门分数畜保站个数--柱状图
+export function xubaoBigData() {
+  return request({
+    url: '/center-agriculture/data/xubaoBigData',
+    method: 'get',
+  })
+}
+//按照部门分组种子库存量--柱状图
+export function zhongZiBigData() {
+  return request({
+    url: '/center-agriculture/data/zhongZiBigData',
+    method: 'get',
+  })
+}
+//按照部门分组化肥库存量--柱状图
+export function huaFeiBigData() {
+  return request({
+    url: '/center-agriculture/data/huaFeiBigData',
+    method: 'get',
+  })
+}
+//分组养殖类型分布--饼图
+export function YangZhiBigData() {
+  return request({
+    url: '/center-agriculture/data/YangZhiBigData',
+    method: 'get',
+  })
+}

src/router/index.js

@@ -59,45 +59,46 @@ export const constantRoutes = [{
 		meta: {
 			title: '监控中心'
 		}
-	}, {
-		path: '/disaster',
-		name: 'disaster',
-		component: () => import('@/views/disaster'),
-		meta: {
-			title: '灾后评估'
-		}
 	},
   {
-		path: '/leader',
-		name: 'leader',
-		component: () => import('@/views/leader'),
-		meta: {
-			title: '林长制'
-		}
-	}, {
-		path: '/afforestation',
-		name: 'afforestation',
-		component: () => import('@/views/afforestation'),
+		path: '/bigdata',
+		name: 'bigdata',
+		component: () => import('@/views/bigdata/bigdata'),
 		meta: {
-			title: '植树造林'
+			title: '大数据'
 		}
 	},
-  {
-    path: '/',
-    name: '',
-    component: () => import('@/views/animal'),
-    meta: {
-      title: '动物保护'
-    }
-  },
-  {
-    path: '/',
-    name: '',
-    component: () => import('@/views/animal'),
-    meta: {
-      title: '珍惜古树'
-    }
-  },
+  // {
+	// 	path: '/leader',
+	// 	name: 'leader',
+	// 	component: () => import('@/views/leader'),
+	// 	meta: {
+	// 		title: '林长制'
+	// 	}
+	// }, {
+	// 	path: '/afforestation',
+	// 	name: 'afforestation',
+	// 	component: () => import('@/views/afforestation'),
+	// 	meta: {
+	// 		title: '植树造林'
+	// 	}
+	// },
+  // {
+  //   path: '/',
+  //   name: '',
+  //   component: () => import('@/views/animal'),
+  //   meta: {
+  //     title: '动物保护'
+  //   }
+  // },
+  // {
+  //   path: '/',
+  //   name: '',
+  //   component: () => import('@/views/animal'),
+  //   meta: {
+  //     title: '珍惜古树'
+  //   }
+  // },
 ]
 
 
@@ -134,46 +135,54 @@ export const constantRoutesNew = [{
 			title: '监控中心'
 		}
 	},
-	{
-		path: '/disaster',
-		name: 'disaster',
-		component: () => import('@/views/disaster'),
-		meta: {
-			title: '灾后评估'
-		}
-	},
-	{
-		path: '/leader',
-		name: 'leader',
-		component: () => import('@/views/leader'),
-		meta: {
-			title: '林长制'
-		}
-	},
-	{
-		path: '/afforestation',
-		name: 'afforestation',
-		component: () => import('@/views/afforestation'),
-		meta: {
-			title: '植树造林'
-		}
-	},
-  {
-    path: '/',
-    name: '',
-    component: () => import('@/views/animal'),
-    meta: {
-      title: '动物保护'
-    }
-  },
   {
-    path: '/',
-    name: '',
-    component: () => import('@/views/animal'),
+    path: '/bigdata',
+    name: 'bigdata',
+    component: () => import('@/views/bigdata/bigdata'),
     meta: {
-      title: '珍惜古树'
+      title: '大数据'
     }
   },
+	// {
+	// 	path: '/disaster',
+	// 	name: 'disaster',
+	// 	component: () => import('@/views/disaster'),
+	// 	meta: {
+	// 		title: '灾后评估'
+	// 	}
+	// },
+	// {
+	// 	path: '/leader',
+	// 	name: 'leader',
+	// 	component: () => import('@/views/leader'),
+	// 	meta: {
+	// 		title: '林长制'
+	// 	}
+	// },
+	// {
+	// 	path: '/afforestation',
+	// 	name: 'afforestation',
+	// 	component: () => import('@/views/afforestation'),
+	// 	meta: {
+	// 		title: '植树造林'
+	// 	}
+	// },
+  // {
+  //   path: '/',
+  //   name: '',
+  //   component: () => import('@/views/animal'),
+  //   meta: {
+  //     title: '动物保护'
+  //   }
+  // },
+  // {
+  //   path: '/',
+  //   name: '',
+  //   component: () => import('@/views/animal'),
+  //   meta: {
+  //     title: '珍惜古树'
+  //   }
+  // },
 	{
 		path: '/login',
 		component: () => import('@/views/system/login'),

src/views/bigdata/bigdata.vue

@@ -0,0 +1,564 @@
+<!--一体化首页-->
+<template>
+	<div class="bigdata-con">
+		<!-- 头部B -->
+		<div class="header">
+			<!-- title -->
+			<router-link class="header-left"  to="/integrated/index"  exact><img class="logo" src="@/assets/images/integrated/logo-small.png" />
+				<h3 class="title">数字四平态势感知监管平台</h3></router-link>
+			<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" exact>
+					{{navbar.name}}
+				</router-link>
+				<img src="@/assets/images/integrated/bigdata-header-nav-right.png" />
+			</div>
+			<!-- 左侧 -->
+			<fastMenu></fastMenu>
+		</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>
+          <chartPit ref="chartPit" ></chartPit>
+        </div>
+				<div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>农机站分布统计</span><!--按照部门统计农机站个数--饼图-->
+          </div>
+          <chartCollection ref="chartCollection"></chartCollection>
+				</div>
+				<div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>耕地面积分布统计</span><!--按照部门统计耕地面积--柱状图-->
+          </div>
+          <chartFireControl ref="chartFireControl"></chartFireControl>
+				</div>
+			</div>
+			<!-- 第二纵向-->
+			<div class="bigdata-list wid-li-2 m-l-15">
+				<div class="bigdata-map mg-b-20">
+          <supermap ref="supermap" :mapDiv="'forestMap'" class="indexSupermapClass"
+                    :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview" >
+          </supermap>
+				</div>
+				<!--<tabbar></tabbar>-->
+        <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> {{escalation}}</span></div>
+              <div class="count-z m-l-15">签收<span> {{signIn}}</span></div>
+              <div class="count-z m-l-15">办结<span> {{conclude}}</span></div>
+            </div>
+            <chartEvent ref="chartEvent"></chartEvent>
+          </div>
+        </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>
+					<chartDanger ref="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 ref="chartForestFarm"></chartForestFarm>
+				</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 ref="chartFoam"></chartFoam>
+        </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 ref="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 ref="chartFarm"></chartFarm>
+				</div>
+				<div class="b-con">
+					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+						<span>养殖分布统计</span><!--分组养殖类型分布--饼图-->
+					</div>
+					<chartFarmtype ref="chartFarmtype"></chartFarmtype>
+				</div>
+			</div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+	import fastMenu from './fastmenu.vue' //右侧菜单
+	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 消防力量
+
+  import supermap from '@/components/supermap'; //超图
+
+  import {cooperativesBigData,machineryInfoBigData,landInfoBigData
+    ,eventcatalogueBigData,deptBigData
+    ,leidaBigData,protectInfoBigData,xubaoBigData
+    ,zhongZiBigData,huaFeiBigData,YangZhiBigData
+  } from '@/api/bigdata/bigdata';
+
+	export default {
+		components: {
+			fastMenu,
+			tabbar,
+			chartEvent,
+			chartPopulation,
+			chartEnterprise,
+			chartDanger,
+			chartForestFarm,
+			chartPit,
+			chartFreelyraise,
+			chartFarm,
+			chartFarmtype,
+			chartCollection,
+			chartCaterCrane,
+			chartProcessing,
+			chartHydrant,
+			chartFoam,
+			chartWaterIntake,
+			chartCamera,
+			chartDetector,
+			chartFireControl,
+      supermap,
+		},
+    created() {
+      this.cooperativesBigData();
+      this.machineryInfoBigData();
+      this.landInfoBigData();
+      this.eventcatalogueBigData();
+      this.leidaBigData();
+      this.protectInfoBigData();
+      this.xubaoBigData();
+      this.zhongZiBigData();
+      this.huaFeiBigData();
+      this.YangZhiBigData();
+    },
+		data() {
+			return {
+				visited: '',
+				navbar: [
+				  {
+						name: '四平云图',
+						path: '/integrated/bigdata',
+					},
+					{
+						name: '数字林业',
+						path: '/integrated/forest',
+					},
+					{
+						name: '数字农业',
+						path: '/',
+					},
+					{
+						name: '数字水利',
+						path: '/',
+					},
+					{
+						name: '数字环保',
+						path: '/',
+					},
+					{
+						name: '数字应急',
+						path: '/',
+					},
+					{
+						name: '数字交通',
+						path: '/',
+					},
+					{
+						name: '数字资源',
+						path: '/',
+					},
+					{
+						name: '数字消防',
+						path: '/',
+					},
+
+				],
+				total: 0, //事件总数
+        escalation:0,// 事件-上报
+        signIn:0,// 事件-签收
+        conclude:0,// 事件-办结
+
+        /** ------------------------------------图标参数开始 -----------------------------*/
+        /** ------------------------------------图标参数结束 -----------------------------*/
+			}
+		},
+    methods: {
+      cooperativesBigData() {
+        cooperativesBigData().then(res => {
+          this.$refs.chartPit.myEcharts(res.data);
+        })
+      },
+      machineryInfoBigData() {
+        machineryInfoBigData().then(res => {
+          this.$refs.chartCollection.myEcharts(res.data);
+        })
+      },
+      landInfoBigData() {
+        landInfoBigData().then(res => {
+          const xData = [];
+          const seriesData = [];
+          for (let index in res.data) {
+            xData.push(res.data[index].name);
+            seriesData.push(res.data[index].value);
+          }
+          this.$refs.chartFireControl.myEcharts(xData,seriesData);
+        })
+      },
+      eventcatalogueBigData() {
+        eventcatalogueBigData().then(res => {
+          for (let index in res.data) {
+            this.total+=parseInt(res.data[index].value);
+            if(res.data[index].dictValue == 'forest_event_status_1'){
+              this.escalation=res.data[index].value;
+            }else if(res.data[index].dictValue == 'forest_event_status_2'){
+              this.signIn=res.data[index].value;
+            }else if(res.data[index].dictValue == 'forest_event_status_5'){
+              this.conclude=res.data[index].value;
+            }
+          }
+          this.$refs.chartEvent.myEcharts(res.data);
+        })
+        deptBigData().then(res => {
+          this.$refs.chartEvent.myEcharts2(res.data);
+        })
+      },
+      leidaBigData() {
+        leidaBigData().then(res => {
+          const seriesData = [0,0,0,0,0];
+          for (let index in res.data) {
+            if(res.data[index].name == '合作社'){
+              seriesData[0]=res.data[index].value
+            }else if(res.data[index].name == '农机站'){
+              seriesData[1]=res.data[index].value
+            }else if(res.data[index].name == '植保站'){
+              seriesData[2]=res.data[index].value
+            }else if(res.data[index].name == '畜保站'){
+              seriesData[3]=res.data[index].value
+            }else if(res.data[index].name == '养殖、粪污站'){
+              seriesData[4]=res.data[index].value
+            }
+          }
+          this.$refs.chartDanger.myEcharts(seriesData);
+        })
+      },
+      protectInfoBigData() {
+        protectInfoBigData().then(res => {
+          const xData = [];
+          const seriesData = [];
+          for (let index in res.data) {
+            xData.push(res.data[index].name);
+            seriesData.push(res.data[index].value);
+          }
+          this.$refs.chartForestFarm.myEcharts(xData,seriesData);
+        })
+      },
+      xubaoBigData() {
+        xubaoBigData().then(res => {
+          const yData = [];
+          const seriesData = [];
+          for (let index in res.data) {
+            yData.push(res.data[index].name);
+            seriesData.push(res.data[index].value);
+          }
+          this.$refs.chartFoam.myEcharts(yData,seriesData);
+        })
+      },
+      zhongZiBigData() {
+        zhongZiBigData().then(res => {
+          this.$refs.chartFreelyraise.myEcharts(res.data);
+        })
+      },
+      huaFeiBigData() {
+        huaFeiBigData().then(res => {
+          const xData = [];
+          const seriesData = [];
+          for (let index in res.data) {
+            xData.push(res.data[index].name);
+            seriesData.push(res.data[index].value);
+          }
+          this.$refs.chartFarm.myEcharts(xData,seriesData);
+        })
+      },
+      YangZhiBigData() {
+        YangZhiBigData().then(res => {
+          this.$refs.chartFarmtype.myEcharts(res.data);
+        })
+      },
+    },
+
+	}
+</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: 28px;
+				}
+			}
+
+			.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%;
+		}
+	}
+</style>

src/views/bigdata/chart-camera.vue

@@ -0,0 +1,393 @@
+<!-- **************************************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

@@ -0,0 +1,112 @@
+<!-- **************************************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(data) {
+				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 formatNumber = function (num) {
+				    let reg = /(?=(\B)(\d{3})+$)/g;
+				    return num.toString().replace(reg, ',');
+				};
+				let total = data.reduce((a, b) => {
+				    return a + b.value * 1;
+				}, 0);
+
+				option = {
+				    color: color,
+				    series: [
+				        {
+				            type: 'pie',
+				            radius: ['50%', '70%'],
+				            center: ['50%', '50%'],
+				            data: data,
+				            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

@@ -0,0 +1,230 @@
+<!-- **************************************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:88/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
+
+			myEcharts(data) {
+
+
+				var chartDom = document.getElementById('danger');
+				var myChart = echarts.init(chartDom);
+				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+				var option;
+				let indicator = [{
+						name: '合作社',
+						max: 10
+					},
+					{
+						name: '农机站',
+						max: 10
+					},
+					{
+						name: '植保站',
+						max: 10
+					},
+					{
+						name: '畜保站',
+						max: 10
+					},
+					{
+						name: '养殖、粪污站',
+						max: 10
+					},
+				]
+
+				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:60,
+									//     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,
+							},
+							symbolSize: [6, 6],
+							lineStyle: { //边缘颜色
+								width: 0
+							},
+							itemStyle: {
+								borderWidth: 1,
+								color: '#fff',
+								borderColor: '#F2F063',
+							},
+							areaStyle: {
+								color: '#7D77F1',
+								opacity: 0.6
+							}
+						},
+						{
+							type: 'radar',
+							data: [
+								[10, 10, 10, 10, 10, 10],
+							],
+							symbol: 'none',
+							lineStyle: {
+								width: 0
+							},
+							itemStyle: {
+								color: '#4175F5'
+							},
+
+							areaStyle: {
+								color: '#4175F5',
+								opacity: 0.06
+							}
+						},
+						{
+							type: 'radar',
+							data: [
+								[8, 8, 8, 8, 8, 8]
+							],
+
+							symbol: 'none',
+							lineStyle: {
+								width: 0
+							},
+							itemStyle: {
+								color: '#4175F5'
+							},
+
+							areaStyle: {
+								color: '#4175F5',
+								opacity: 0.18
+							}
+						},
+						{
+							type: 'radar',
+							data: [
+								[6, 6, 6, 6, 6, 6],
+							],
+
+							symbol: 'none',
+							lineStyle: {
+								width: 0
+							},
+							itemStyle: {
+								color: '#4175F5'
+							},
+
+							areaStyle: {
+								color: '#4175F5',
+								opacity: 0.17
+							}
+						},
+						{
+							type: 'radar',
+							data: [
+								[4, 4, 4, 4, 4, 4],
+							],
+
+							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

@@ -0,0 +1,213 @@
+<!-- **************************************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

@@ -0,0 +1,117 @@
+<!-- **************************************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

@@ -0,0 +1,280 @@
+<!-- **************************************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(data) {
+
+
+				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: data
+				    },
+
+				  ]
+				};
+
+				option && myChart.setOption(option);
+
+			},
+			myEcharts2(chartData) {
+
+
+				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 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

@@ -0,0 +1,167 @@
+<!-- **************************************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(xData,seriesData) {
+
+
+				var chartDom = document.getElementById('farm');
+				var myChart = echarts.init(chartDom);
+				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
+				var option;
+				option = {
+				    color: ["#41FF80"],
+				    title: {
+				        show: false
+				    },
+				    grid: {
+				        top: '15%',
+				        right: '12%',
+				        bottom: '22%',
+				        left: '15%'
+				    },
+				    tooltip: {
+				        show: false
+				    },
+				    xAxis: {
+				        data: xData,
+				        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:seriesData,
+				            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:seriesData,
+				            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

@@ -0,0 +1,98 @@
+<!-- **************************************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(seriesData) {
+
+				var chartDom = document.getElementById('farmtype');
+				var myChart = echarts.init(chartDom);
+				var color = ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'];
+        let total = 0;
+        const legendData = [];
+        for (let index in seriesData) {
+          legendData.push(seriesData[index].name);
+          total += parseInt(seriesData[index].value);
+        }
+
+				var option;
+				option = {
+				    color:color,
+				    tooltip : {
+              formatter: function (params) {
+                let c = (parseInt(params.data.value)/total*100).toFixed(2);
+                let b = params.data.name;
+                return (b+"："+c+"%");
+              },
+				    },
+				    legend: {
+              textStyle:{
+                color:'#fffff',
+                fontSize:10
+              },
+              itemWidth:15,
+              orient: 'vertical',
+              left: '10%',
+              top:'5%',
+              data: legendData
+				    },
+				    series: [
+				        {
+				            name: '',
+				            type: 'pie',
+				            radius: '80%',
+				            center: ['65%', '48%'],
+				            data:seriesData,
+				            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

@@ -0,0 +1,132 @@
+<!-- **************************************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.myEcharts();
+		},
+
+		methods: {
+			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=f46x0t0c7883X-D6
+      myEcharts(xData,seriesData) {
+				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',
+                    interval: 0,
+                    rotate: 20,
+				            textStyle: {
+				                fontSize: 10
+				            },
+				        },
+				        axisTick:{
+				            show:false,
+				        },
+				         data: xData
+				    },
+				    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:{
+                    formatter: "{c}" + "㎡",
+				            show:true,
+				            position:['0','-20'],
+				            color:'#fff',
+				        },
+				        data: seriesData,
+				        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

@@ -0,0 +1,137 @@
+<!-- **************************************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(yData,seriesData) {
+
+				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: {
+                show:false
+				      },
+				      xAxis: {
+				          show: false,
+				          type: 'value'
+				      },
+				      yAxis: [{
+				              type: 'category',
+							  inverse:true,
+				              data: yData,
+				              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: seriesData
+				          }
+				      ],
+
+				      series: [{
+				              name: "受理数", // bar图的外边框
+				              type: "bar",
+				              barWidth: "20%",
+				              yAxisIndex: 0,
+				              data: [100, 100, 100, 100, 100].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: seriesData
+				          }
+				      ],
+				      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

@@ -0,0 +1,149 @@
+<!-- **************************************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(xData,seriesData) {
+
+
+				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: xData,
+				          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: seriesData
+				        }]
+				      };
+
+				      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

@@ -0,0 +1,377 @@
+<!-- **************************************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(data) {
+
+
+				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.value).toFixed(0);
+					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

@@ -0,0 +1,233 @@
+<!-- **************************************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

@@ -0,0 +1,71 @@
+<!-- **************************************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(data) {
+				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 : [
+				        {
+				            type:'pie',
+				            roseType: true,
+				            radius : ['50%', '70%'],
+				            label: {
+				              show: true,
+				              formatter: "{b} {c}",
+                      textStyle: {
+                          fontSize: 10 ,
+                      }
+				            },
+				            data:data
+				        }
+				    ]
+				};
+				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

@@ -0,0 +1,171 @@
+<!-- **************************************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

@@ -0,0 +1,135 @@
+<!-- **************************************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

@@ -0,0 +1,110 @@
+<!-- **************************************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

@@ -0,0 +1,88 @@
+<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

@@ -0,0 +1,210 @@
+<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>