init

src/api/bigdata/bigdata.js

@@ -1,99 +1,26 @@
 import request from '@/utils/request'
 
-// 按照部门统计农业合作社个数--饼图
-export function cooperativesBigData() {
+//饼图
+export function initPieChartData(param) {
   return request({
-    url: '/center-agriculture/data/cooperativesBigData',
-    method: 'get',
+    url: '/center-traffic/data/initPieChartData',
+    method: 'post',
+    data:param
   })
 }
-// 按照部门统计农机站个数--饼图
-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',
+    url: '/center-traffic/data/eventcatalogueBigData',
+    method: 'post'
   })
 }
+
 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',
-  })
-}
-// 按照部门统计还田量--漏斗图
-export function getHuanTianDept() {
-  return request({
-    url: '/center-agriculture/data/getHuanTianDept',
-    method: 'get',
-  })
-}
-//按照类型统计还田面积--饼图
-export function getHuanTianType() {
-  return request({
-    url: '/center-agriculture/data/getHuanTianType',
-    method: 'get',
-  })
-}
-// 按照部门统计离田量--饼图
-export function getLItianDept() {
-  return request({
-    url: '/center-agriculture/data/getLItianDept',
+    url: '/center-traffic/data/deptBigData',
     method: 'get',
   })
 }
+

src/views/bigdata/bigdata.vue

@@ -21,21 +21,21 @@
 			<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><!--按照部门统计农业合作社个数--饼图-->
+            <span>道路晾晒预警事件占比</span><!--道路晾晒预警事件占比--饼图-->
           </div>
-          <chartPit ref="chartPit" ></chartPit>
+          <chartPit_dlls ref="chartPit_dlls"></chartPit_dlls>
         </div>
 				<div class="b-con mg-b-20">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>农机站分布统计</span><!--按照部门统计农机站个数--饼图-->
+            <span>工程车预警事件占比</span><!--工程车预警事件占比--饼图-->
           </div>
-          <chartCollection ref="chartCollection"></chartCollection>
+          <chartPit_gcc ref="chartPit_gcc"></chartPit_gcc>
 				</div>
         <div class="b-con mg-b-20">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>畜保站分布统计</span><!--按照部门分数畜保站个数--柱状图-->
+            <span>倒车预警事件占比</span><!--倒车预警--饼图-->
           </div>
-          <chartFoam ref="chartFoam"></chartFoam>
+          <chartPit_dc ref="chartPit_dc"></chartPit_dc>
         </div>
 			</div>
 			<!-- 第二纵向-->
@@ -64,135 +64,83 @@
 			<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><!--站点统计（五角分布图雷达图）按照当前登录人数据权限数据查询农业合作社个数、农机站个数、畜保站个数、植保站个数、养殖、粪污处理个数（不用按照部门分组）-->
+						<span>超速预警事件占比</span><!--超速预警事件占比--饼图-->
 					</div>
-					<chartDanger ref="chartDanger"></chartDanger>
+          <chartPit_cs ref="chartPit_cs"></chartPit_cs>
 				</div>
 				<div class="b-con mg-b-20">
 					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>植保站分布统计</span><!--按照部门分数植保站个数--柱状图-->
+						<span>抛瞄预警事件占比</span><!--抛瞄预警事件占比--饼图-->
 					</div>
-					<chartForestFarm ref="chartForestFarm"></chartForestFarm>
+          <chartPit_pm ref="chartPit_pm"></chartPit_pm>
 				</div>
         <div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>养殖分布统计</span><!--分组养殖类型分布--饼图-->
+            <span>压线预警事件占比</span><!--压线预警事件占比--饼图-->
           </div>
-          <chartFarmtype ref="chartFarmtype"></chartFarmtype>
+          <chartPit_yx ref="chartPit_yx"></chartPit_yx>
         </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><!--按照部门分组种子库存量--柱状图-->
+						<span>交通事故预警事件占比</span><!--交通事故预警事件占比--饼图-->
 					</div>
-					<chartFreelyraise ref="chartFreelyraise"></chartFreelyraise>
+          <chartPit_jtsg ref="chartPit_jtsg"></chartPit_jtsg>
 				</div>
 				<div class="b-con mg-b-20">
 					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>化肥库存分布统计</span><!--按照部门分组化肥库存量--柱状图-->
+						<span>路障预警事件占比</span><!--路障预警事件占比--饼图-->
 					</div>
-					<chartFarm ref="chartFarm"></chartFarm>
+          <chartPit_lz ref="chartPit_lz"></chartPit_lz>
 				</div>
         <div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>耕地面积分布统计</span><!--按照部门统计耕地面积--柱状图-->
+            <span>施工预警事件占比</span><!--施工预警事件占比--饼图-->
           </div>
-          <chartFireControl ref="chartFireControl"></chartFireControl>
+          <chartPit_sg ref="chartPit_sg"></chartPit_sg>
         </div>
 			</div>
-      <!-- 第八纵向-->
-      <div class="bigdata-list wid-li-1 m-l-15">
-        <div class="b-con mg-b-20 tall">
-          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>还田分布、类型统计</span>
-          </div>
-          <chartDetector ref="chartDetector"></chartDetector>
-        </div>
-        <div class="b-con">
-          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>离田口分布统计</span>
-          </div>
-          <chartWaterIntake ref="chartWaterIntake"></chartWaterIntake>
-        </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 chartEvent from './chart-event.vue' //事件
+	import chartPit_dlls from './chart-pit-dlls.vue' //饼图
+	import chartPit_gcc from './chart-pit-gcc.vue' //饼图
+	import chartPit_dc from './chart-pit-dc.vue' //饼图
+	import chartPit_cs from './chart-pit-cs.vue' //饼图
+	import chartPit_pm from './chart-pit-pm.vue' //饼图
+	import chartPit_yx from './chart-pit-yx.vue' //饼图
+	import chartPit_jtsg from './chart-pit-jtsg.vue' //饼图
+	import chartPit_lz from './chart-pit-lz.vue' //饼图
+	import chartPit_sg from './chart-pit-sg.vue' //饼图
   import bigdataSupermap from '@/components/supermap' //超图
 
-  import {cooperativesBigData,machineryInfoBigData,landInfoBigData
-    ,eventcatalogueBigData,deptBigData
-    ,leidaBigData,protectInfoBigData,xubaoBigData
-    ,zhongZiBigData,huaFeiBigData,YangZhiBigData
-    ,getHuanTianDept,getHuanTianType,getLItianDept
-  } from '@/api/bigdata/bigdata';
+  import {initPieChartData,eventcatalogueBigData,deptBigData} 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,
+      chartPit_dlls,
+      chartPit_gcc,
+      chartPit_dc,
+      chartPit_cs,
+      chartPit_pm,
+      chartPit_yx,
+      chartPit_jtsg,
+      chartPit_lz,
+      chartPit_sg,
       bigdataSupermap,
 		},
     created() {
-      this.cooperativesBigData();
-      this.machineryInfoBigData();
-      this.landInfoBigData();
       this.eventcatalogueBigData();
-      this.leidaBigData();
-      this.protectInfoBigData();
-      this.xubaoBigData();
-      this.zhongZiBigData();
-      this.huaFeiBigData();
-      this.YangZhiBigData();
-      this.getHuanTianDept();
-      this.getHuanTianType();
-      this.getLItianDept();
+      this.initPieChartData();
     },
     mounted() {
       setTimeout(() => {
@@ -204,23 +152,23 @@
 				visited: '',
 				navbar: [
 				  {
-						name: '农业云图',
-						path: '/forest',
+						name: '交通云图',
+						path: '/traffic',
 					},
 					{
-						name: '数据中心',
-						path: '/datacenter',
+						name: '交通人员',
+						path: '/',
 					},
 					{
-						name: '监控中心',
-						path: '/monitor',
+						name: '交通资源',
+						path: '/',
 					},
 					{
 						name: '统计分析',
 						path: '/bigdata',
 					},
 				],
-				total: 0, //事件总数
+        total: 0, //事件总数
         escalation:0,// 事件-上报
         signIn:0,// 事件-签收
         conclude:0,// 事件-办结
@@ -230,29 +178,58 @@
 			}
 		},
     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);
+      /**饼图 统计*/
+      initPieChartData() {
+        let param_dlls = {type:"80"};
+        let param_gcc = {type:"82"};
+        let param_dc = {type:"83"};
+        let param_cs = {type:"84"};
+        let param_pm = {type:"85"};
+        let param_yx = {type:"86"};
+        let param_jtsg = {type:"87"};
+        let param_lz = {type:"88"};
+        let param_sg = {type:"89"};
+        /**道路晾晒预警事件占比**/
+        initPieChartData(param_dlls).then(res => {
+          this.$refs.chartPit_dlls.myEcharts(res.data);
+        }),
+        /**工程车预警事件占比**/
+        initPieChartData(param_gcc).then(res => {
+          this.$refs.chartPit_gcc.myEcharts(res.data);
+        }),
+        /**倒车预警事件占比**/
+        initPieChartData(param_dc).then(res => {
+          this.$refs.chartPit_dc.myEcharts(res.data);
+        }),
+        /**超速预警事件占比**/
+        initPieChartData(param_cs).then(res => {
+          this.$refs.chartPit_cs.myEcharts(res.data);
+        }),
+        /**抛瞄预警事件占比**/
+        initPieChartData(param_pm).then(res => {
+          this.$refs.chartPit_pm.myEcharts(res.data);
+        }),
+        /**压线预警事件占比**/
+        initPieChartData(param_yx).then(res => {
+          this.$refs.chartPit_yx.myEcharts(res.data);
+        }),
+        /**交通事故预警事件占比**/
+        initPieChartData(param_jtsg).then(res => {
+          this.$refs.chartPit_jtsg.myEcharts(res.data);
+        }),
+        /**路障预警事件占比**/
+        initPieChartData(param_lz).then(res => {
+          this.$refs.chartPit_lz.myEcharts(res.data);
+        }),
+        /**施工预警事件占比**/
+        initPieChartData(param_sg).then(res => {
+          this.$refs.chartPit_sg.myEcharts(res.data);
         })
       },
+      /**事件类型、分布统计*/
       eventcatalogueBigData() {
         eventcatalogueBigData().then(res => {
+          console.log(res.data);
           for (let index in res.data) {
             this.total+=parseInt(res.data[index].value);
             if(res.data[index].dictValue == 'forest_event_status_1'){
@@ -269,91 +246,7 @@
           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);
-        })
-      },
-      getHuanTianDept() {
-        getHuanTianDept().then(res => {
-          this.$refs.chartDetector.myEcharts1(res.data);
-        })
-      },
-      getHuanTianType() {
-        getHuanTianType().then(res => {
-          const xdataName=[];
-          const contractnum=[];
-          for (let index in res.data) {
-            xdataName.push(res.data[index].name);
-            contractnum.push(res.data[index].value);
-          }
-          this.$refs.chartDetector.myEcharts2(xdataName,contractnum);
-        })
-      },
-      getLItianDept() {
-        getLItianDept().then(res => {
-          this.$refs.chartWaterIntake.myEcharts(res.data);
-        })
-      },
     },
-
 	}
 </script>
 

src/views/bigdata/chart-event.vue

@@ -18,23 +18,14 @@
 			}
 		},
 		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;
-
+				let chartDom = document.getElementById('event');
+        let myChart = echarts.init(chartDom);
+        let color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
+        let option;
 
 				option = {
 				  color: color,
@@ -49,7 +40,6 @@
 					  center:['50%','60%'],
 				      radius: ['55%', '70%'],
 				      avoidLabelOverlap: false,
-
 				      label: {
 				        show: false,
 				        position: 'center'
@@ -69,19 +59,15 @@
 
 				  ]
 				};
-
 				option && myChart.setOption(option);
-
 			},
 			myEcharts2(chartData) {
-
-
-				var chartDom = document.getElementById('event2');
-				var myChart = echarts.init(chartDom);
-				 let dashedPic =
+        let chartDom = document.getElementById('event2');
+        let myChart = echarts.init(chartDom);
+       let dashedPic =
 				    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
 				let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff','#E148EB'];
-				var option;
+        let option;
 				let arrName = [];
 				let arrValue = [];
 				let sum = 0;
@@ -253,15 +239,9 @@
 				    ],
 				    series: pieSeries,
 				};
-
 				option && myChart.setOption(option);
-
 			},
-
-
 		},
-
-
 	}
 </script>
 
@@ -273,8 +253,4 @@
 		padding-bottom: 10px;
 		display: flex;
 	}
-
-
-
-
 </style>

src/views/bigdata/chart-pit-cs.vue

@@ -0,0 +1,74 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="pit-cs" style="width: 100%; height:23vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'pit',
+  data() {
+    return {
+      count: 0,
+
+      title:'',
+      visible:false,
+
+    }
+  },
+  mounted() {
+    // this.myEcharts()
+  },
+
+  methods: {
+    // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+    myEcharts(data) {
+      var chartDom = document.getElementById('pit-cs');
+      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-pit-dc.vue

@@ -0,0 +1,74 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="pit-dc" style="width: 100%; height:23vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'pit',
+  data() {
+    return {
+      count: 0,
+
+      title:'',
+      visible:false,
+
+    }
+  },
+  mounted() {
+    // this.myEcharts()
+  },
+
+  methods: {
+    // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+    myEcharts(data) {
+      var chartDom = document.getElementById('pit-dc');
+      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-pit.vue

@@ -1,7 +1,7 @@
 <!-- **************************************NO.6 矿坑*************************************** -->
 <template>
 	<div class="chart-container">
-		<div v-bind:id="chartId" style="width: 100%; height:23vh;">
+		<div id="pit-dlls" style="width: 100%; height:23vh;">
 		</div>
 	</div>
 </template>
@@ -13,14 +13,12 @@
 		data() {
 			return {
 				count: 0,
+
         title:'',
         visible:false,
-        chartId: '',
+
 			}
 		},
-    props: {
-      chartsId: null,
-    },
 		mounted() {
 			// this.myEcharts()
 		},
@@ -28,11 +26,7 @@
 		methods: {
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
 			myEcharts(data) {
-        this.chartId = this.chartsId;
-        console.log(this.chartId)
-        console.log(this.chartsId)
-				var chartDom = document.getElementById(this.chartsId);
-        console.log(chartDom)
+				var chartDom = document.getElementById('pit-dlls');
 				var myChart = echarts.init(chartDom);
 				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
 				var option;

src/views/bigdata/chart-pit-gcc.vue

@@ -0,0 +1,74 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="pit-gcc" style="width: 100%; height:23vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'pit',
+  data() {
+    return {
+      count: 0,
+
+      title:'',
+      visible:false,
+
+    }
+  },
+  mounted() {
+    // this.myEcharts()
+  },
+
+  methods: {
+    // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+    myEcharts(data) {
+      var chartDom = document.getElementById('pit-gcc');
+      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-pit-jtsg.vue

@@ -0,0 +1,74 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="pit-jtsg" style="width: 100%; height:23vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'pit',
+  data() {
+    return {
+      count: 0,
+
+      title:'',
+      visible:false,
+
+    }
+  },
+  mounted() {
+    // this.myEcharts()
+  },
+
+  methods: {
+    // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+    myEcharts(data) {
+      var chartDom = document.getElementById('pit-jtsg');
+      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-pit-lz.vue

@@ -0,0 +1,74 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="pit-lz" style="width: 100%; height:23vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'pit',
+  data() {
+    return {
+      count: 0,
+
+      title:'',
+      visible:false,
+
+    }
+  },
+  mounted() {
+    // this.myEcharts()
+  },
+
+  methods: {
+    // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+    myEcharts(data) {
+      var chartDom = document.getElementById('pit-lz');
+      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-pit-pm.vue

@@ -0,0 +1,74 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="pit-pm" style="width: 100%; height:23vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'pit',
+  data() {
+    return {
+      count: 0,
+
+      title:'',
+      visible:false,
+
+    }
+  },
+  mounted() {
+    // this.myEcharts()
+  },
+
+  methods: {
+    // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+    myEcharts(data) {
+      var chartDom = document.getElementById('pit-pm');
+      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-pit-sg.vue

@@ -0,0 +1,74 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="pit-sg" style="width: 100%; height:23vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'pit',
+  data() {
+    return {
+      count: 0,
+
+      title:'',
+      visible:false,
+
+    }
+  },
+  mounted() {
+    // this.myEcharts()
+  },
+
+  methods: {
+    // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+    myEcharts(data) {
+      var chartDom = document.getElementById('pit-sg');
+      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-pit-yx.vue

@@ -0,0 +1,74 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+  <div class="chart-container">
+    <div id="pit-yx" style="width: 100%; height:23vh;">
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'pit',
+  data() {
+    return {
+      count: 0,
+
+      title:'',
+      visible:false,
+
+    }
+  },
+  mounted() {
+    // this.myEcharts()
+  },
+
+  methods: {
+    // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+    myEcharts(data) {
+      var chartDom = document.getElementById('pit-yx');
+      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>