数字水利 河流资源统计

src/api/bigdata.js

@@ -42,7 +42,7 @@ export function getG2() {
   })
 }
 
-// 水利工程资源统计
+// 河段资源统计
 export function getG3() {
   return request({
     url: '/center-water/VisuForestCloudBigDataController/selectReachWaterDeptCount',
@@ -50,6 +50,14 @@ export function getG3() {
   })
 }
 
+// 河流资源统计
+export function getG4() {
+  return request({
+    url: '/center-water/VisuForestCloudBigDataController/selectRiverWaterDeptCount',
+    method: 'post',
+  })
+}
+
 //林场分布统计
 export function getLcfbtj() {
   return request({

src/views/bigdata/bigdata.vue

@@ -177,6 +177,7 @@ import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设
 import chartPitG1 from './chart-pit' //17 闸口资源统计、、
 import chartPitG2 from './chart-firecontrol' //18 水利工程资源统计、、
 import chartPitG3 from './chart-hydrant' //19 河段资源统计、、
+import chartPitG4 from './chart-waterintake' //20 河流资源统计、、
 
 import {getRlt} from '@/api/bigdata'
 
@@ -201,6 +202,7 @@ export default {
     chartPitG1,
     chartPitG2,
     chartPitG3,
+    chartPitG4,
   },
   data() {
 

src/views/bigdata/chart-waterintake.vue

@@ -0,0 +1,100 @@
+<!-- **************************************NO.15 取水口*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="chartPitG4" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+  import {getG4} from '@/api/bigdata'
+	export default {
+		name: 'chartPitG4',
+		data() {
+			return {
+        source: [],
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts()
+			this.getG4()
+
+		},
+
+		methods: {
+      getG4() {
+        let that = this
+        getG4().then(res => {
+          this.source = res.data
+          console.log("河流资源统计", res.data)
+          that.myEcharts()
+        })
+      },
+			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=AQ8Ea8ewtkr0NVzH
+			myEcharts() {
+
+
+				var chartDom = document.getElementById('chartPitG4');
+				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: this.source,
+				         },
+				         {
+				             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>