数字水利 第七纵向

src/views/bigdata/bigdata.vue

@@ -121,7 +121,7 @@
         </div>
       </div>
       <!-- 第六纵向-->
-      <div class="bigdata-list wid-li-1 m-l-15">
+      <div class="bigdata-list wid-li-1 m-l-15 flex-r">
         <div class="b-con mg-b-20 taller">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
             <span>设备分布</span>
@@ -129,6 +129,27 @@
           <chartEquipmentDistribution></chartEquipmentDistribution>
         </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>chartPitchartPit</span>
+          </div>
+          <chartPitG1></chartPitG1>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>沙场资源分布统计</span>
+          </div>
+          <chartForestFarm></chartForestFarm>
+        </div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>设备类型统计</span>
+          </div>
+          <chartEquipmentType></chartEquipmentType>
+        </div>
+      </div>
     </div>
 
   </div>
@@ -153,6 +174,7 @@ import chartFireBrigade from './chart-fireBrigade.vue' //12 防火队、、
 import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
 import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
 import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
+import chartPitG1 from './chart-pit' //16 设备分布、、
 
 import {getRlt} from '@/api/bigdata'
 
@@ -173,7 +195,8 @@ export default {
     chartFireBrigade,
     chartGridStaff,
     chartWeatherStation,
-    chartEquipmentDistribution
+    chartEquipmentDistribution,
+    chartPitG1
   },
   data() {
 

src/views/bigdata/chart-pit.vue

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