数字资源 矿臧资源

src/views/bigdata/bigdata.vue

@@ -66,13 +66,13 @@
         </div>
         <div class="b-con mg-b-20 b-49">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>重点区域</span>
+            <span>违建信息</span>
           </div>
           <chartKeyArea></chartKeyArea>
         </div>
         <div class="b-con mg-b-20 b-49">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>珍惜古树</span>
+            <span>矿臧资源</span>
           </div>
           <chartAncientTree></chartAncientTree>
         </div>
@@ -92,11 +92,23 @@
           </div>
           <chartGridDistribution></chartGridDistribution>
         </div>
-        <div class="b-con">
+        <!--<div class="b-con">-->
+          <!--<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">-->
+            <!--<span>天气趋势</span>-->
+          <!--</div>-->
+          <!--<chartWeatherTrends></chartWeatherTrends>-->
+        <!--</div>-->
+        <div class="b-con mg-b-20 b-49">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>天气趋势</span>
+            <span>偷钓偷捕事件分析</span>
           </div>
-          <chartWeatherTrends></chartWeatherTrends>
+          <chartPitG5></chartPitG5>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>水利事件分析</span>
+          </div>
+          <chartPitG6></chartPitG6>
         </div>
       </div>
       <!-- 第五纵向-->
@@ -154,6 +166,9 @@ import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
 import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
 import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
 
+import chartPitG5 from './chart-farmtype' //21 偷钓偷捕事件分析、、
+import chartPitG6 from './chart-waterTotal' //22 水利事件分析、、
+
 import {getRlt} from '@/api/bigdata'
 
 export default {
@@ -173,7 +188,9 @@ export default {
     chartFireBrigade,
     chartGridStaff,
     chartWeatherStation,
-    chartEquipmentDistribution
+    chartEquipmentDistribution,
+    chartPitG5,
+    chartPitG6,
   },
   data() {
 

src/views/bigdata/chart-farmtype.vue

@@ -0,0 +1,118 @@
+<!-- **************************************NO.9 散养户、养殖场养殖种类*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="chartPitG5" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+  import {get5} from '@/api/bigdata.js'
+	export default {
+		name: 'chartPitG5',
+		data() {
+			return {
+        data: [],
+        source: [],
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts()
+      this.getPitG5();
+		},
+
+		methods: {
+      getPitG5(){
+        let that = this
+        get5().then(resp =>{
+          console.log("偷钓偷捕事件分析", resp.data)
+          that.source = resp.data
+          that.data = []
+          for (let i = 0; i < resp.data.length; i++) {
+            that.data.push(resp.data[i].name)
+          }
+          // that.data_name = resp.data.name
+          // that.data_value = resp.data.value
+          that.myEcharts()
+        })
+      },
+			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=smh2KYnoCMWnT1IN
+
+			myEcharts() {
+        let that = this
+
+				var chartDom = document.getElementById('chartPitG5');
+				var myChart = echarts.init(chartDom);
+				var color = ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'];
+				var option;
+				option = {
+				    color:color,
+				    tooltip : {
+				        formatter: "{b}：{c}%"
+				    },
+
+
+				    legend: {
+						textStyle:{
+							color:'#fffff',
+							fontSize:10
+						},
+						itemWidth:15,
+				        orient: 'vertical',
+				        left: '10%',
+						top:'5%',
+				        data: that.data
+				        // data: ['一般修剪', '浇水', '除草', '绿篱修剪', '病虫害防治', '施肥', '伐除', '其他']
+				    },
+				    series: [
+				        {
+				            name: '',
+				            type: 'pie',
+				            radius: '80%',
+				            center: ['65%', '48%'],
+				            data: that.source,
+                  // data:[
+				          //       {value:40, name:'一般修剪'},
+				          //       {value:30, name:'浇水'},
+				          //       {value:25, name:'除草'},
+				          //       {value:18, name:'绿篱修剪'},
+				          //       {value:10, name:'病虫害防治'},
+				          //       {value:5, name:'施肥'},
+				          //       {value:4, name:'伐除'},
+				          //       {value:3, name:'其他'}
+				          //   ],
+				            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-waterTotal.vue

@@ -0,0 +1,176 @@
+<!-- **************************************NO.14 泡沫液*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="chartPitG6" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+  import {get6} from '@/api/bigdata.js'
+
+	export default {
+		name: 'chartPitG6',
+		data() {
+			return {
+				count: 0,
+        data_name: [],
+        data_value: [],
+			}
+		},
+		mounted() {
+		  this.getPitG6();
+		},
+
+		methods: {
+		  getPitG6(){
+        let that = this
+        get6().then(resp =>{
+          console.log("水利事件分析", resp.data)
+          that.source = resp.data
+          that.data_name = resp.data.eventtype
+          that.data_value = resp.data.num
+          that.myEcharts()
+        })
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=ELjN7o3m72tLtmbv
+      myEcharts() {
+        var chartDom = document.getElementById('chartPitG6');
+        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: that.data_name,
+            // 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: that.data_value,
+              // 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;
+	}
+</style>