数字水利 河段资源统计

src/api/bigdata.js

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

src/views/bigdata/bigdata.vue

@@ -145,9 +145,9 @@
         </div>
         <div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>设备类型统计</span>
+            <span>河段资源统计</span>
           </div>
-          <chartEquipmentType></chartEquipmentType>
+          <chartPitG3></chartPitG3>
         </div>
       </div>
     </div>
@@ -175,7 +175,8 @@ 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' //17 闸口资源统计、、
-import chartPitG2 from './chart-firecontrol' //17 水利工程资源统计、、
+import chartPitG2 from './chart-firecontrol' //18 水利工程资源统计、、
+import chartPitG3 from './chart-hydrant' //19 河段资源统计、、
 
 import {getRlt} from '@/api/bigdata'
 
@@ -199,6 +200,7 @@ export default {
     chartEquipmentDistribution,
     chartPitG1,
     chartPitG2,
+    chartPitG3,
   },
   data() {
 

src/views/bigdata/chart-hydrant.vue

@@ -0,0 +1,222 @@
+<!-- **************************************NO.13 消火栓*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="chartPitG3" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+  import {getG3} from '@/api/bigdata'
+	export default {
+		name: 'chartPitG3',
+		data() {
+			return {
+        source: [],
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts()
+			this.getG3()
+
+		},
+
+		methods: {
+      getG3() {
+        let that = this
+        getG3().then(res => {
+          this.source = res.data
+          console.log("河段资源统计", res.data)
+          that.myEcharts()
+        })
+      },
+			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=Ve9zCnhVwZvXTdD0
+			myEcharts() {
+
+
+				var chartDom = document.getElementById('chartPitG3');
+				var myChart = echarts.init(chartDom);
+				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
+				var option;
+        var trafficWay = this.source;
+				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>