1

src/api/bigdata.js

@@ -1,9 +1,137 @@
 import request from '@/utils/request'
 
 // 事件来源
-export function getSjlylxtj() {
+export function getSjlylxtj(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
   return request({
-    url: '/center-firecontrol/VisuForestCloudBigDataController/getEventSourceAndTypeStatistics',
+    url: '/center-environment/VisuForestCloudBigDataController/getEventSourceAndTypeStatistics',
+    data: param,
+    method: 'post',
+  })
+}
+
+
+//污染源分布统计
+export function getWryfbtj() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/selectBigDataSourcepollutionDeptCount',
+    method: 'post',
+  })
+}
+
+//设备类型统计
+export function getSblxtj() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/getCameaCount',
+    method: 'post',
+  })
+}
+
+//综合信息
+export function getZhxx(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/selectBigDataZhxx',
+    data: param,
+    method: 'post',
+  })
+}
+
+//起火原因统计
+export function getQhyytj(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/selectEventByYearGroupByFireSource',
+    data: param,
+    method: 'post',
+  })
+}
+
+//重点区域
+export function getZdqy() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/selectBigDataImportareaDeptCount',
+    method: 'post',
+  })
+}
+
+//设备上报事件数量
+export function getSbsbsjsl(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/getAIEventNum',
+    data: param,
+    method: 'post',
+  })
+}
+
+//重点企业
+export function getZdqiye() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/selectBigDataKeyenterpriseDeptCount',
+    method: 'post',
+  })
+}
+
+//事件趋势
+export function getSjqs(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/getEventTrend',
+    data: param,
+    method: 'post',
+  })
+}
+
+//禁烧区分布
+export function getJsqfb() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/selectBigDataProhibitionareaDeptCount',
+    method: 'post',
+  })
+}
+
+
+//禁烧区分布
+export function getTqqs(param) {
+  if (param == null) {
+    let myDate = new Date();
+    let month = myDate.getMonth() + 1;
+    if (month < 10) {
+      month = "0" + month
+    }
+    param = {day: myDate.getFullYear() + "-" + month}
+  }
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/selectBigDataByYearMonthFegin',
+    data:param,
+    method: 'post',
+  })
+}
+//设备分布
+export function getSbfb() {
+  return request({
+    url: '/center-environment/VisuForestCloudBigDataController/getSbfb',
     method: 'post',
   })
 }

src/views/bigdata/chart-deviceReportingEvents.vue

@@ -1,149 +1,159 @@
 <!-- **************************************NO.5 林场*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="forestfarm" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="forestfarm" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'forestfarm',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=2nuQSYycLWN0P_EG
-
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('forestfarm');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
-				var option;
-				option = {
-				        tooltip: {
-				          trigger: 'axis',
-				          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-				            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-				          }
-				        },
-				        grid: {
-				          left: '10%',
-				          right: '10%',
-				          bottom: '10%',
-				          top:'16%',
-				          containLabel: true
-				        },
-				        
-				        xAxis: {
-				          type: 'category',
-				          data: ['双辽市','梨树县','伊通县','铁东区','铁西区'],
-				          axisLine: {
-				            lineStyle: {
-				              color: '#1cc6a1'
-				
-				            }
-				          },
-				          axisLabel: {
-				            // interval: 0,
-				            // rotate: 40,
-				            textStyle: {
-				              fontFamily: 'Microsoft YaHei'
-				            }
-				          },
-				        },
-				
-				        yAxis: {
-				          type: 'value',
-				          max:'500',
-				          axisLine: {
-				            show: false,
-				            lineStyle: {
-				              color: '#19b1e8'
-				            }
-				          },
-				          splitLine: {
-				            show: true,
-				            lineStyle: {
-				              color: 'rgba(255,255,255,0.1)'
-				            }
-				          },
-				          axisLabel: {}
-				        },
-				        
-				        series: [{
-				          type: 'bar',
-				          barWidth: '15%',
-				          itemStyle: {
-				            normal: {
-				                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-				                    offset: 0,
-				                    color: '#fccb05'
-				                }, {
-				                    offset: 1,
-				                    color: '#1689f5'
-				                }]),
-				                barBorderRadius: 12,
-				            },
-				          },
-				          data: [400, 400, 300, 300, 300]
-				        }]
-				      };
-				
-				      var app = {
-				        currentIndex: -1,
-				      };
-				      setInterval(function () {
-				        var dataLen = option.series[0].data.length;
-				
-				        // 取消之前高亮的图形
-				        myChart.dispatchAction({
-				          type: 'downplay',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex
-				        });
-				        app.currentIndex = (app.currentIndex + 1) % dataLen;
-				        //console.log(app.currentIndex);
-				        // 高亮当前图形
-				        myChart.dispatchAction({
-				          type: 'highlight',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex,
-				        });
-				        // 显示 tooltip
-				        myChart.dispatchAction({
-				          type: 'showTip',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex
-				        });
-				
-				
-				      }, 1000);
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
+  import * as echarts from 'echarts';
+  import {getSbsbsjsl} from '@/api/bigdata'
+
+  export default {
+    name: 'forestfarm',
+    data() {
+      return {
+        count: 0,
+        data_sbsbsjsl_num:[],
+        data_sbsbsjsl_reportor:[]
+      }
+    },
+    mounted() {
+      this.sbsbsjsl()
+    },
+
+    methods: {
+      sbsbsjsl() {
+        let that = this
+        getSbsbsjsl().then(resp => {
+          that.data_sbsbsjsl_reportor = resp.data.reportor
+          that.data_sbsbsjsl_num = resp.data.num
+          that.myEcharts()
+        })
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=2nuQSYycLWN0P_EG
+
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('forestfarm');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+        var option;
+        option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          grid: {
+            left: '10%',
+            right: '10%',
+            bottom: '10%',
+            top: '16%',
+            containLabel: true
+          },
+
+          xAxis: {
+            type: 'category',
+            data: that.data_sbsbsjsl_reportor,
+            axisLine: {
+              lineStyle: {
+                color: '#1cc6a1'
+
+              }
+            },
+            axisLabel: {
+              // interval: 0,
+              // rotate: 40,
+              textStyle: {
+                fontFamily: 'Microsoft YaHei'
+              }
+            },
+          },
+
+          yAxis: {
+            type: 'value',
+            max: '500',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#19b1e8'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(255,255,255,0.1)'
+              }
+            },
+            axisLabel: {}
+          },
+
+          series: [{
+            type: 'bar',
+            barWidth: '15%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#fccb05'
+                }, {
+                  offset: 1,
+                  color: '#1689f5'
+                }]),
+                barBorderRadius: 12,
+              },
+            },
+            data: that.data_sbsbsjsl_num
+          }]
+        };
+
+        var app = {
+          currentIndex: -1,
+        };
+        setInterval(function () {
+          var dataLen = option.series[0].data.length;
+
+          // 取消之前高亮的图形
+          myChart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0,
+            dataIndex: app.currentIndex
+          });
+          app.currentIndex = (app.currentIndex + 1) % dataLen;
+          //console.log(app.currentIndex);
+          // 高亮当前图形
+          myChart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+          // 显示 tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: app.currentIndex
+          });
+
+
+        }, 1000);
+        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;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 </style>

src/views/bigdata/chart-equipmentDistribution.vue

@@ -12,6 +12,7 @@
 
 <script>
 	import * as echarts from 'echarts';
+  import {getSbfb} from '@/api/bigdata'
 	export default {
 		name: 'camera',
 		data() {
@@ -21,12 +22,19 @@
 		},
 		mounted() {
 			// this.myEcharts1();
-			this.myEcharts2();
+			this.sbfb();
 			// this.myEcharts3();
 
 		},
 
 		methods: {
+		  sbfb(){
+		    let that = this
+		    getSbfb().then(resp =>{
+          console.log("bbbbb",resp);
+          that.myEcharts2()
+        })
+      },
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
 			myEcharts1() {
 				var chartDom = document.getElementById('camera1');
@@ -147,6 +155,7 @@
 
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=pAD_0lcRq_zOGf_k
 			myEcharts2() {
+        let that = this
 				var chartDom = document.getElementById('camera2');
 				var myChart = echarts.init(chartDom);
 				var option;

src/views/bigdata/chart-equipmentType.vue

@@ -1,117 +1,136 @@
 <!-- **************************************NO.3 企业*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="enterprise" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="enterprise" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'enterprise',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getSblxtj} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'enterprise',
+    data() {
+      return {
+        count: 0,
+        data_sblxtj_deviceCount: [],
+        data_sblxtj_deviceType: [],
+        deviceTypeCount:[]
+      }
+    },
+    mounted() {
+      this.sblxtj()
+    },
 
-		methods:{
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
-			
-			myEcharts() {
-				
-				
-				var chartDom = document.getElementById('enterprise');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
-				var option;
-				 var value = [987, 634, 413, 312, 123];
-				var temp = 0;
-				option = {
-				  
-				    tooltip: {
-				        trigger: 'item',
-				        formatter: '{a} <br/>{b} : {c} ',
-				    },
-				   
-				    legend: {
-				        // show: false,
-						textStyle:{
-							color:'#fffff',
-							fontSize:10
-						},
-						itemWidth:19,
-						top:'2%',
-				        data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
-				    },
-				    series: [
-				        {
-				            name: '企业分布',
-				            type: 'funnel',
-							top:'25%',
-				            left: '10%',
-				            width: '70%',
-							height:'68%',
-							
-				            label: {
-				                show: true,
-				                color: '#07faa9',
-				                formatter: function () {
-				                    for (var i in value) {
-				                        console.log(value[i]);
-				                        if (i == temp) {
-				                            temp++;
-				                            return value[i] ;
-				                        }
-				                    }
-				                },
-				            },
-				            labelLine: {
-				                show: true,
-				            },
-				            itemStyle: {
-				                opacity: 1,
-				            },
-				            emphasis: {
-				                label: {
-				                    position: 'inside',
-				                    // formatter: '{b}Expected: {c}%',
-				                },
-				            },
-				            data: [
-				                { value: 100, name: '双辽市', itemStyle: { color: '#4672F7' } },
-				                { value: 80, name: '梨树县', itemStyle: { color: '#4C9DFF' } },
-				                { value: 60, name: '伊通县', itemStyle: { color: '#36DC88' } },
-				                { value: 40, name: '铁东区', itemStyle: { color: '#FBC71B' } },
-				                { value: 20, name: '铁西区', itemStyle: { color: '#F9A646' } },
-				            ],
-				        },
-				    ],
-				};
-				option && myChart.setOption(option);
-			},
+    methods: {
+      color16() {//十六进制颜色随机
+        var r = Math.floor(Math.random() * 256)
+        var g = Math.floor(Math.random() * 256)
+        var b = Math.floor(Math.random() * 256)
+        //var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
+        var color = '#' + (Array(6).join(0) + (r.toString(16) + g.toString
+        (16) + b.toString(16))).slice(-6)
+        return color
+      },
+      sblxtj() {
+        let that = this
+        getSblxtj().then(resp => {
+          that.data_sblxtj_deviceCount = resp.data.deviceCount
+          that.data_sblxtj_deviceType = resp.data.deviceType
+          for (let i = 0; i < resp.data.deviceCount.length; i++) {
+            that.deviceTypeCount.push({
+              value: resp.data.deviceCount[i],
+              name: resp.data.deviceType[i],
+              itemStyle: { color: that.color16() }
+            })
+          }
+          that.myEcharts()
+        })
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
 
-		},
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('enterprise');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+        var option;
+        var value = that.data_sblxtj_deviceCount;
+        var temp = 0;
+        option = {
 
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ',
+          },
 
-	}
-</script>
+          legend: {
+            // show: false,
+            textStyle: {
+              color: '#fffff',
+              fontSize: 10
+            },
+            itemWidth: 19,
+            top: '2%',
+            data: that.data_sblxtj_deviceType
+          },
+          series: [
+            {
+              name: '企业分布',
+              type: 'funnel',
+              top: '25%',
+              left: '10%',
+              width: '70%',
+              height: '68%',
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
+              label: {
+                show: true,
+                color: '#07faa9',
+                formatter: function () {
+                  for (var i in value) {
+                    console.log(value[i]);
+                    if (i == temp) {
+                      temp++;
+                      return value[i];
+                    }
+                  }
+                },
+              },
+              labelLine: {
+                show: true,
+              },
+              itemStyle: {
+                opacity: 1,
+              },
+              emphasis: {
+                label: {
+                  position: 'inside',
+                  // formatter: '{b}Expected: {c}%',
+                },
+              },
+              data: that.deviceTypeCount,
+            },
+          ],
+        };
+        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-event.vue

@@ -16,7 +16,9 @@
     name: 'event',
     data() {
       return {
-        count: 0
+        count: 0,
+        data_sjlylxtj_source:[],
+        data_sjlylxtj_type:[]
       }
     },
     mounted() {
@@ -28,7 +30,8 @@
       sjlylxtj() {
         let that = this
         getSjlylxtj().then(resp => {
-          resp.log("=====", resp)
+          that.data_sjlylxtj_source = resp.data.source
+          that.data_sjlylxtj_type = resp.data.type
           that.myEcharts()
           that.myEcharts2()
         })
@@ -37,8 +40,7 @@
       //http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
 
       myEcharts() {
-
-
+        let that = this
         var chartDom = document.getElementById('event');
         var myChart = echarts.init(chartDom);
         var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
@@ -73,13 +75,7 @@
               labelLine: {
                 show: false
               },
-              data: [
-                {value: 1048, name: '事件1'},
-                {value: 735, name: '事件2'},
-                {value: 580, name: '事件3'},
-                {value: 484, name: '事件4'},
-                {value: 300, name: '事件5'}
-              ]
+              data: that.data_sjlylxtj_type
             },
 
           ]
@@ -89,42 +85,14 @@
 
       },
       myEcharts2() {
-
-
+        let that = this
         var chartDom = document.getElementById('event2');
         var myChart = echarts.init(chartDom);
         let dashedPic =
           'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
         let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff', '#E148EB'];
         var option;
-        let chartData = [
-          {
-            name: '双辽市',
-            value: 40083,
-            unit: '列',
-          },
-          {
-            name: '梨树县',
-            value: 33974,
-            unit: '列',
-          },
-          {
-            name: '伊通县',
-            value: 15400,
-            unit: '列',
-          },
-          {
-            name: '铁东区',
-            value: 11021,
-            unit: '列',
-          },
-          {
-            name: '铁西区',
-            value: 30696,
-            unit: '列',
-          },
-
-        ];
+        let chartData = that.data_sjlylxtj_source
         let arrName = [];
         let arrValue = [];
         let sum = 0;

src/views/bigdata/chart-eventTrend.vue

@@ -8,41 +8,41 @@
 
 <script>
 	import * as echarts from 'echarts';
+  import {getSjqs} from '@/api/bigdata'
 	export default {
 		name: 'pit',
 		data() {
 			return {
-				count: 0
+				count: 0,
+        data_sjqs_month:[],
+        data_sjqs_num:[]
 			}
 		},
 		mounted() {
-			this.myEcharts()
-
+			this.sjqs()
 		},
 
 		methods: {
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
 
-			myEcharts() {
-
+      sjqs(){
+        let that = this
+        getSjqs().then(resp=>{
+          that.data_sjqs_month = resp.data.mouth
+          that.data_sjqs_num = resp.data.num
+          that.myEcharts()
+        })
+      },
 
+			myEcharts() {
+        let that = this
 				var chartDom = document.getElementById('pit');
 				var myChart = echarts.init(chartDom);
 				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
 				var option;
         option = {
           xAxis: {
-            data: [
-              '2021-05-17',
-              '2021-05-18',
-              '2021-05-19',
-              '2021-05-20',
-              '2021-05-21',
-              '2021-05-24',
-              '2021-05-25',
-              '2021-05-26',
-              '2021-05-27',
-            ],
+            data:that.data_sjqs_month,
           },
           yAxis: {
             axisLabel: {
@@ -87,7 +87,7 @@
               shadowColor: 'rgba(194, 47, 67)',
               shadowBlur: 0,
               shadowOffsetX: 0,
-              data: [1.56, -1.34, 0.57, 2.34, -0.45, 0.57, 2.34, 1.2, 0.34],
+              data: that.data_sjqs_num
             },
           ],
         };

src/views/bigdata/chart-fireCause.vue

@@ -8,51 +8,40 @@
 
 <script>
 	import * as echarts from 'echarts';
+  import {getQhyytj} from '@/api/bigdata'
 	export default {
 		name: 'danger',
 		data() {
 			return {
-				count: 0
+				count: 0,
+        data_qhyytj_firesource:[],
+        data_qhyytj_num:[]
 			}
 		},
 		mounted() {
-			this.myEcharts()
-
+      this.qhyytj()
 		},
 
 		methods: {
+
+		  qhyytj(){
+		    let that = this
+		    getQhyytj().then(resp =>{
+          that.data_qhyytj_firesource = resp.data.firesource
+          that.data_qhyytj_num = resp.data.num
+          that.myEcharts()
+        })
+      },
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
 
 			myEcharts() {
-
-
+		    let that = this
 				var chartDom = document.getElementById('danger');
 				var myChart = echarts.init(chartDom);
 				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
 				var option;
-				let data = [582, 421, 622, 625, 265]
-				let indicator = [{
-						name: '双辽市',
-						max: 1000
-					},
-					{
-						name: '梨树县',
-						max: 1000
-					},
-					{
-						name: '伊通县',
-						max: 1000
-					},
-					{
-						name: '铁东区',
-						max: 1000
-					},
-					{
-						name: '铁西区',
-						max: 1000
-					},
-				]
-
+				let data =that.data_qhyytj_num
+				let indicator =that.data_qhyytj_firesource
 				option = {
 
 					radar: {

src/views/bigdata/chart-keyArea.vue

@@ -1,378 +1,366 @@
 <!-- **************************************NO.7 散养户分布*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="freelyraise" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="freelyraise" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'freelyraise',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getZdqy} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'freelyraise',
+    data() {
+      return {
+        count: 0,
+        data_zdqy: []
+      }
+    },
+    mounted() {
+      this.zdqy()
+    },
 
-		methods: {
-			// 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE
+    methods: {
+      zdqy() {
+        let that = this
+        getZdqy().then(resp => {
+          that.data_zdqy = resp.data
+          that.myEcharts()
+        })
+      },
+      // 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE
 
-			myEcharts() {
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('freelyraise');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
+        var option;
+        let data = that.data_zdqy
 
+        function contains(arr, dst) {
+          var i = arr.length;
+          while ((i -= 1)) {
+            if (arr[i] == dst) {
+              return i;
+            }
+          }
+          return false;
+        }
 
-				var chartDom = document.getElementById('freelyraise');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
-				var option;
-				let data = [{
-						"name": "双辽市",
-						"num": "18.987691"
-					},
-					{
-						"name": "梨树县",
-						"num": "20.377176"
-					},
-					{
-						"name": "伊通县",
-						"num": "19.127404"
-					},
-					{
-						"name": "铁东区",
-						"num": "18.40882"
-					},
-					{
-						"name": "铁西区",
-						"num": "17.980597"
-					},
-				]
+        var attackSourcesColor = [
+          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+            offset: 0,
+            color: "#EB3B5A"
+          },
+            {
+              offset: 1,
+              color: "#FE9C5A"
+            }
+          ]),
+          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+            offset: 0,
+            color: "#FA8231"
+          },
+            {
+              offset: 1,
+              color: "#FFD14C"
+            }
+          ]),
+          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+            offset: 0,
+            color: "#F7B731"
+          },
+            {
+              offset: 1,
+              color: "#FFEE96"
+            }
+          ]),
+          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+            offset: 0,
+            color: "#21fe8f"
+          },
+            {
+              offset: 1,
+              color: "#38911f"
+            }
+          ]),
+          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
+            offset: 0,
+            color: "#395CFE"
+          },
+            {
+              offset: 1,
+              color: "#2EC7CF"
+            }
+          ])
 
-				function contains(arr, dst) {
-					var i = arr.length;
-					while ((i -= 1)) {
-						if (arr[i] == dst) {
-							return i;
-						}
-					}
-					return false;
-				}
+        ];
+        var attackSourcesColor1 = [
+          "#EB3B5A",
+          "#FA8231",
+          "#F7B731",
+          "#38911f",
+          "#3860FC",
+          "#F57474",
+          "#56D0E3",
+          "#1089E7",
+          "#F57474",
+          "#1089E7",
+          "#F57474",
+          "#F57474"
+        ];
+        var attaData = [];
+        var attaName = [];
+        var topName = []
+        data.forEach((it, index) => {
+          attaData[index] = parseFloat(it.num).toFixed(0);
+          //attaData[index] = parseInt(it.num);
+          attaName[index] = it.name;
+          topName[index] = `${it.name}`
+        });
+        var salvProMax = [];
+        var max = attaData[0];
+        for (let i = 0; i < attaData.length; i++) {
+          max = max < attaData[i + 1] ? attaData[i + 1] : max;
+        }
+        for (let i = 0; i < attaData.length; i++) {
+          salvProMax.push(max); //背景按最大值
+        }
 
-			 var attackSourcesColor = [
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#EB3B5A"
-						},
-						{
-							offset: 1,
-							color: "#FE9C5A"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#FA8231"
-						},
-						{
-							offset: 1,
-							color: "#FFD14C"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#F7B731"
-						},
-						{
-							offset: 1,
-							color: "#FFEE96"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#21fe8f"
-						},
-						{
-							offset: 1,
-							color: "#38911f"
-						}
-					]),
-					new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
-							offset: 0,
-							color: "#395CFE"
-						},
-						{
-							offset: 1,
-							color: "#2EC7CF"
-						}
-					])
-					
-				];
-				var attackSourcesColor1 = [
-					"#EB3B5A",
-					"#FA8231",
-					"#F7B731",
-					"#38911f",
-					"#3860FC",
-					"#F57474",
-					"#56D0E3",
-					"#1089E7",
-					"#F57474",
-					"#1089E7",
-					"#F57474",
-					"#F57474"
-				];
-				var attaData = [];
-				var attaName = [];
-				var topName = []
-				data.forEach((it, index) => {
-					attaData[index] = parseFloat(it.num).toFixed(0);
-					//attaData[index] = parseInt(it.num);
-					attaName[index] = it.name;
-					topName[index] = `${it.name}`
-				});
-				var salvProMax = [];
-				var max = attaData[0];
-				for (let i = 0; i < attaData.length; i++) {
-					max = max < attaData[i + 1] ? attaData[i + 1] : max;
-				}
-				for (let i = 0; i < attaData.length; i++) {
-					salvProMax.push(max); //背景按最大值
-				}
+        function attackSourcesDataFmt(sData) {
+          var sss = [];
+          sData.forEach(function (item, i) {
+            let itemStyle = {
+              color: i > 5 ? attackSourcesColor[5] : attackSourcesColor[i]
+            };
+            sss.push({
+              value: item,
+              itemStyle: itemStyle
+            });
+          });
+          return sss;
+        }
 
-				function attackSourcesDataFmt(sData) {
-					var sss = [];
-					sData.forEach(function(item, i) {
-						let itemStyle = {
-							color: i > 5 ? attackSourcesColor[5] : attackSourcesColor[i]
-						};
-						sss.push({
-							value: item,
-							itemStyle: itemStyle
-						});
-					});
-					return sss;
-				}
+        option = {
+          tooltip: {
+            show: false,
+            backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
+            textStyle: {
+              fontSize: 12
+            }
+          },
+          color: ["#F7B731"],
+          legend: {
+            show: false,
+            pageIconSize: [12, 12],
+            itemWidth: 20,
+            itemHeight: 10,
+            textStyle: {
+              //图例文字的样式
+              fontSize: 12,
+              color: "#fff"
+            },
+            selectedMode: false,
+            data: ["个人所得(亿元)"]
+          },
+          grid: {
+            left: '12%',
+            width: '70%',
+            bottom: '5%',
+            top: "8%",
+          },
+          xAxis: {
+            type: "value",
 
-				option = {
-					tooltip: {
-						show: false,
-						backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
-						textStyle: {
-							fontSize: 12
-						}
-			  },
-					color: ["#F7B731"],
-					legend: {
-						show: false,
-						pageIconSize: [12, 12],
-						itemWidth: 20,
-						itemHeight: 10,
-						textStyle: {
-							//图例文字的样式
-							fontSize: 12,
-							color: "#fff"
-						},
-						selectedMode: false,
-						data: ["个人所得(亿元)"]
-					},
-					grid: {
-						left: '12%',
-						width: '70%',
-						bottom: '5%',
-						top: "8%",
-					},
-					xAxis: {
-						type: "value",
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            }
+          },
+          yAxis: [{ //左侧排行数字
+            type: "category",
+            inverse: true,
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisPointer: {
+              label: {
+                show: true,
+                //margin: 30
+              }
+            },
+            padding: [5, 0, 0, 0],
+            postion: "right",
+            data: attaName,
+            axisLabel: {
+              margin: 30,
+              fontSize: 12,
+              align: "left",
+              padding: [2, 0, 0, 0],
+              color: "#000",
+              rich: {
+                nt1: {
+                  color: "#fff",
+                  backgroundColor: attackSourcesColor1[0],
+                  width: 15,
+                  height: 15,
+                  fontSize: 12,
+                  align: "center",
+                  borderRadius: 100,
+                  lineHeight: "5",
+                  padding: [0, 1, 2, 1]
+                  // padding:[0,0,2,0],
+                },
+                nt2: {
+                  color: "#fff",
+                  backgroundColor: attackSourcesColor1[1],
+                  width: 15,
+                  height: 15,
+                  fontSize: 12,
+                  align: "center",
+                  borderRadius: 100,
+                  padding: [0, 1, 2, 1]
+                },
+                nt3: {
+                  color: "#fff",
+                  backgroundColor: attackSourcesColor1[2],
+                  width: 15,
+                  height: 15,
+                  fontSize: 12,
+                  align: "center",
+                  borderRadius: 100,
+                  padding: [0, 1, 2, 1]
+                },
+                nt: {
+                  color: "#fff",
+                  backgroundColor: attackSourcesColor1[3],
+                  width: 15,
+                  height: 15,
+                  fontSize: 12,
+                  align: "center",
+                  lineHeight: 3,
+                  borderRadius: 100,
+                  padding: [0, 1, 2, 1],
+                  lineHeight: 5
+                }
+              },
 
-						splitLine: {
-							show: false
-						},
-						axisLabel: {
-							show: false
-						},
-						axisTick: {
-							show: false
-			  	},
-						axisLine: {
-							show: false
-						}
-					},
-					yAxis: [{ //左侧排行数字
-							type: "category",
-							inverse: true,
-			  		axisLine: {
-								show: false
-							},
-							axisTick: {
-								show: false
-							},
-							axisPointer: {
-								label: {
-									show: true,
-									//margin: 30
-								}
-			 			},
-							padding: [5, 0, 0, 0],
-							postion: "right",
-							data: attaName,
-							axisLabel: {
-								margin: 30,
-								fontSize: 12,
-			  			align: "left",
-								padding: [2, 0, 0, 0],
-								color: "#000",
-								rich: {
-									nt1: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[0],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										lineHeight: "5",
-										padding: [0, 1, 2, 1]
-										// padding:[0,0,2,0],
-									},
-									nt2: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[1],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										padding: [0, 1, 2, 1]
-									},
-									nt3: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[2],
-										width: 15,
-										height: 15,
-										fontSize: 12,
-										align: "center",
-										borderRadius: 100,
-										padding: [0, 1, 2, 1]
-									},
-									nt: {
-										color: "#fff",
-										backgroundColor: attackSourcesColor1[3],
-										width: 15,
-			  					height: 15,
-										fontSize: 12,
-										align: "center",
-										lineHeight: 3,
-										borderRadius: 100,
-										padding: [0, 1, 2, 1],
-										lineHeight: 5
-									}
-								},
-								
-							}
-						},
-						{ //右侧名字
-							type: "category",
-							inverse: true,
-							axisTick: "none",
-							axisLine: "none",
-							show: true,
-							axisLabel: {
-								textStyle: {
-									color: "#fff",
-									fontSize: "12"
-								}
-							},
-							//data: attackSourcesDataFmt(attaName) 
-							data: attackSourcesDataFmt(attaData) //数字
-						},
-						{ //名称
-							type: 'category',
-							offset: -10,
-							position: "left",
-							axisLabel: {
-								color: `#fff`,
-								fontSize: 10
-							},
-			  		axisLine: {
-								show: false
-							},
-							inverse: true,
-							axisTick: {
-								show: false
-							},
-							axisLabel: {
-								interval: 0,
-								color: ["#fff"],
-								align: "left",
-								verticalAlign: "bottom",
-								lineHeight: 32,
-								fontSize: 12
-							},
-							data: topName
-			 		},
-					],
-					series: [{ //条形图数值
-							zlevel: 1,
-							name: "个人所得(亿元)",
-							type: "bar",
-							barWidth: "8px",
-							animationDuration: 1500,
-							data: attackSourcesDataFmt(attaData),
-							align: "center",
-							itemStyle: {
-								normal: {
-									barBorderRadius: 10
-								}
-							},
-							label: {
-								show: false,
-			 				fontSize: 12,
-			  			color: "#fff",
-								textBorderWidth: 2,
-								padding: [2, 0, 0, 0]
-							}
-						},
-						{ //最大值背景条形图
-							name: "个人所得(亿元)",
-							type: "bar",
-							barWidth: 8,
-							barGap: "-100%",
-							margin: "20",
-							data: salvProMax,
-							textStyle: {
-								//图例文字的样式
-								fontSize: 12,
-								color: "#fff"
-							},
-							itemStyle: {
-								normal: {
-									color: "#05325F",
-									//width:"100%",
-									fontSize: 12,
-									barBorderRadius: 30
-								},
-							}
-						}
-					]
-				};
-				option && myChart.setOption(option);
-			},
+            }
+          },
+            { //右侧名字
+              type: "category",
+              inverse: true,
+              axisTick: "none",
+              axisLine: "none",
+              show: true,
+              axisLabel: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: "12"
+                }
+              },
+              //data: attackSourcesDataFmt(attaName)
+              data: attackSourcesDataFmt(attaData) //数字
+            },
+            { //名称
+              type: 'category',
+              offset: -10,
+              position: "left",
+              axisLabel: {
+                color: `#fff`,
+                fontSize: 10
+              },
+              axisLine: {
+                show: false
+              },
+              inverse: true,
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                interval: 0,
+                color: ["#fff"],
+                align: "left",
+                verticalAlign: "bottom",
+                lineHeight: 32,
+                fontSize: 12
+              },
+              data: topName
+            },
+          ],
+          series: [{ //条形图数值
+            zlevel: 1,
+            name: "个人所得(亿元)",
+            type: "bar",
+            barWidth: "8px",
+            animationDuration: 1500,
+            data: attackSourcesDataFmt(attaData),
+            align: "center",
+            itemStyle: {
+              normal: {
+                barBorderRadius: 10
+              }
+            },
+            label: {
+              show: false,
+              fontSize: 12,
+              color: "#fff",
+              textBorderWidth: 2,
+              padding: [2, 0, 0, 0]
+            }
+          },
+            { //最大值背景条形图
+              name: "个人所得(亿元)",
+              type: "bar",
+              barWidth: 8,
+              barGap: "-100%",
+              margin: "20",
+              data: salvProMax,
+              textStyle: {
+                //图例文字的样式
+                fontSize: 12,
+                color: "#fff"
+              },
+              itemStyle: {
+                normal: {
+                  color: "#05325F",
+                  //width:"100%",
+                  fontSize: 12,
+                  barBorderRadius: 30
+                },
+              }
+            }
+          ]
+        };
+        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;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 </style>

src/views/bigdata/chart-keyEnterprises.vue

@@ -8,29 +8,40 @@
 
 <script>
 	import * as echarts from 'echarts';
+  import {getZdqiye} from '@/api/bigdata'
 	export default {
 		name: 'farm',
 		data() {
 			return {
-				count: 0
+				count: 0,
+        data_zdqiye_name:[],
+        data_zdqiye_value:[]
 			}
 		},
 		mounted() {
-			this.myEcharts()
+			this.zdqiye()
 
 		},
 
 		methods: {
+
+		  zdqiye(){
+		    let that = this
+		    getZdqiye().then(resp =>{
+          that.data_zdqiye_name = resp.data.name
+          that.data_zdqiye_value = resp.data.value
+          that.myEcharts()
+        })
+      },
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=KH0XpN7nyKZZae11
 
 			myEcharts() {
-
-
+        let that = this
 				var chartDom = document.getElementById('farm');
 				var myChart = echarts.init(chartDom);
 				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
 				var option;
-				var data =  [20, 80, 100, 40, 34];
+				var data =  that.data_zdqiye_value
 				option = {
 				    color: ["#41FF80"],
 				    title: {
@@ -46,13 +57,7 @@
 				        show: false
 				    },
 				    xAxis: {
-				        data: [
-				            "双辽市",
-				            "梨树县",
-				            "伊通县",
-				            "铁东区",
-				            "铁西区",
-				        ],
+				        data: that.data_zdqiye_name,
 				        axisLine: {
 				            show: true, //隐藏X轴轴线
 				            lineStyle: {

src/views/bigdata/chart-noBurningArea.vue

@@ -1,137 +1,124 @@
 <!-- **************************************NO.10 收集点*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="collection" style="width: 100%; height:50vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="collection" style="width: 100%; height:50vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'collection',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getJsqfb} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'collection',
+    data() {
+      return {
+        count: 0,
+        data_jsqfb:[]
+      }
+    },
+    mounted() {
+      this.jsqfb()
+    },
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=UDNqxg4NZdRORp80
-			myEcharts() {
+    methods: {
+      jsqfb() {
+        let that = this
+        getJsqfb().then(resp => {
+          that.data_jsqfb = resp.data
+          that.myEcharts()
+        })
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=UDNqxg4NZdRORp80
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('collection');
+        var myChart = echarts.init(chartDom);
+        var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
+        var option;
+        let bgColor = '#fff';
+        let title = '总量';
+        let echartData = that.data_jsqfb
 
+        let formatNumber = function (num) {
+          let reg = /(?=(\B)(\d{3})+$)/g;
+          return num.toString().replace(reg, ',');
+        };
+        let total = echartData.reduce((a, b) => {
+          return a + b.value * 1;
+        }, 0);
 
-				var chartDom = document.getElementById('collection');
-				var myChart = echarts.init(chartDom);
-				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
-				var option;
-				let bgColor = '#fff';
-				let title = '总量';
-				let echartData = [
-				    {
-				        name: '双辽市',
-				        value: '3720',
-				    },
-				    {
-				        name: '梨树县',
-				        value: '2920',
-				    },
-				    {
-				        name: '伊通县',
-				        value: '2200',
-				    },
-				    {
-				        name: '铁东区',
-				        value: '1420',
-				    },
-					{
-					    name: '铁西区',
-					    value: '1620',
-					},
-				];
-				
-				let formatNumber = function (num) {
-				    let reg = /(?=(\B)(\d{3})+$)/g;
-				    return num.toString().replace(reg, ',');
-				};
-				let total = echartData.reduce((a, b) => {
-				    return a + b.value * 1;
-				}, 0);
-				
-				option = {
-				    color: color,
-				    series: [
-				        {
-				            type: 'pie',
-				            radius: ['60%', '80%'],
-				            center: ['50%', '50%'],
-				            data: echartData,
-				            hoverAnimation: false,
-				            itemStyle: {
-				                normal: {
-				                    borderWidth:1,
-				                },
-				
-				                emphasis: {
-				                    borderColor: bgColor,
-				                    borderWidth: 2,
-				                         shadowBlur: 8,
-				                borderColor: "#00ffff",
-				                shadowColor: "#00ffff",
-				                },
-				            },
-				            labelLine: {
-				                normal: {
-				                    length: 20,
-				                    length2:10,
-				                    lineStyle: {
-				                        color: '#356781',
-				                    },
-				                },
-				            },
-				            label: {
-				                normal: {
-				                    formatter: (params) => {
-				                        return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}';
-				                    },
-				                    rich: {
-				                        icon: {
-				                            fontSize: 10,
-				                        },
-				                        name: {
-				                            fontSize:10,
-				                            padding: [0, 3, 0, 4],
-				                            color: '#23c9ea',
-				                        },
-				                        value: {
-				                            fontSize: 10,
-				                            color: '#ffffff',
-				                        },
-				                    },
-				                },
-				            },
-				        },
-				    ],
-				};
-				option && myChart.setOption(option);
-			},
+        option = {
+          color: color,
+          series: [
+            {
+              type: 'pie',
+              radius: ['60%', '80%'],
+              center: ['50%', '50%'],
+              data: echartData,
+              hoverAnimation: false,
+              itemStyle: {
+                normal: {
+                  borderWidth: 1,
+                },
 
-		},
+                emphasis: {
+                  borderColor: bgColor,
+                  borderWidth: 2,
+                  shadowBlur: 8,
+                  borderColor: "#00ffff",
+                  shadowColor: "#00ffff",
+                },
+              },
+              labelLine: {
+                normal: {
+                  length: 20,
+                  length2: 10,
+                  lineStyle: {
+                    color: '#356781',
+                  },
+                },
+              },
+              label: {
+                normal: {
+                  formatter: (params) => {
+                    return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}';
+                  },
+                  rich: {
+                    icon: {
+                      fontSize: 10,
+                    },
+                    name: {
+                      fontSize: 10,
+                      padding: [0, 3, 0, 4],
+                      color: '#23c9ea',
+                    },
+                    value: {
+                      fontSize: 10,
+                      color: '#ffffff',
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        };
+        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;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 </style>

src/views/bigdata/chart-weatherTrends.vue

@@ -1,37 +1,49 @@
 <!-- **************************************NO.9 散养户、养殖场养殖种类*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="farmtype" style="width: 100%; height:24vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="farmtype" style="width: 100%; height:24vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'farmtype',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getTqqs} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'farmtype',
+    data() {
+      return {
+        count: 0,
+        data_tqqs_day:[],
+        data_tqqs_heigh:[],
+        data_tqqs_low:[]
+      }
+    },
+    mounted() {
+      this.tqqs()
+    },
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=smh2KYnoCMWnT1IN
+    methods: {
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=smh2KYnoCMWnT1IN
+      tqqs() {
+        let that = this
+        getTqqs().then(resp =>{
+          that.data_tqqs_day = resp.data.day
+          that.data_tqqs_heigh = resp.data.heigh
+          that.data_tqqs_low = resp.data.low
+          that.myEcharts()
+        })
+      },
 
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('farmtype');
-				var myChart = echarts.init(chartDom);
-        var xData = ['2022年1月','2022年2月','2022年3月','2022年4月','2022年5月','2022年6月','2022年7月','2022年8月','2022年9月','2022年10月','2022年11月','2022年12月'];
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('farmtype');
+        var myChart = echarts.init(chartDom);
+        var xData =that.data_tqqs_day;
         var option;
         option = {
-          backgroundColor:'#232d36',
+          backgroundColor: '#232d36',
           tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -63,39 +75,39 @@
             right: '5%',
             bottom: '15%',
           },
-          legend:{
-            data:['最高气温','最低气温'],
-            textStyle:{
-              color:'#fff',
+          legend: {
+            data: ['最高气温', '最低气温'],
+            textStyle: {
+              color: '#fff',
               align: 'center',
               fontSize: 16
             },
-            x:'center'
+            x: 'center'
           },
           xAxis: [{
             type: 'category',
             // 轴线
             axisLine: {
               show: true,
-              lineStyle:{
+              lineStyle: {
                 color: '#85B1B4',
               }
             },
             // 轴刻度线
-            axisTick:{
-              show:false,
+            axisTick: {
+              show: false,
             },
             // 坐标轴名称
             axisLabel: {
               color: '#fff',
-              margin:6,
+              margin: 6,
             },
             // 轴分隔线
             splitLine: {
               show: false
             },
             // 轴两侧留白
-            boundaryGap: ['5%','5%'],
+            boundaryGap: ['5%', '5%'],
             data: xData
 
           }],
@@ -110,7 +122,7 @@
             },
             axisLine: {
               show: true,
-              lineStyle:{
+              lineStyle: {
                 color: '#85B1B4'
               }
             },
@@ -128,7 +140,7 @@
           }],
           series: [
             {
-              name:'最高气温',
+              name: '最高气温',
               type: 'line',
               showAllSymbol: true,
               symbol: 'circle',
@@ -160,14 +172,14 @@
               //         ], false),
               //     }
               // },
-              data: [4,7,8,12,15,23,24,24,25,28,27,24,21,23]//data.values
+              data: that.data_tqqs_heigh
             },
             {
-              name:'最低气温',
+              name: '最低气温',
               type: 'line',
               showAllSymbol: true,
               symbol: 'circle',
-              symbolSize:4,
+              symbolSize: 4,
               lineStyle: {
                 normal: {
                   color: "#13EFB7",
@@ -195,25 +207,26 @@
                   ], false),
                 }
               },
-              data: [3,5,4,2,1,7,6,3,4,5,6,7,1,2]//data.values
+              data: that.data_tqqs_low
             },
           ]
         };
-				option && myChart.setOption(option);
-			},
+        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;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 </style>

src/views/bigdata/tabbar.vue

@@ -1,207 +1,244 @@
 <template>
-	<div class="bigdata-map-tabbar">
-				<el-row :gutter="20">
-					<el-col :span="4" v-for="(regionNum,index) in regionNum" :key="index">
-						<div class="list-content">
-							<span>{{regionNum.count}}</span>
-							<h5>{{regionNum.name}}</h5>
-						</div>
-					</el-col>
-				</el-row>
-	</div>
+  <div class="bigdata-map-tabbar">
+    <el-row :gutter="20">
+      <el-col :span="4" v-for="(item,index) in data_zhxx_data" :key="index">
+        <div class="list-content">
+          <span>{{item.value}}</span>
+          <h5>{{item.name}}</h5>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="4" v-for="(item,index) in data_zhxx_event" :key="index">
+        <div class="list-content">
+          <span>{{item.value}}</span>
+          <h5>{{item.name}}</h5>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <div class="list-content">
+          <span>{{data_zhxx_device}}</span>
+          <h5>设备</h5>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				//tab默认停留项el-tab-pane > name = "?"
-				activeName: 'sp',
-				//地区分类tabtitle
-				district:[
-					{
-						label:'四平市',
-						name:'sp',
-						id:''
-					},
-					{
-						label:'双辽市',
-						name:'sl',
-						id:''
-					},
-					{
-						label:'梨树县',
-						name:'ls',
-						id:''
-					},
-					{
-						label:'伊通县',
-						name:'yt',
-						id:''
-					},
-					{
-						label:'铁东区',
-						name:'td',
-						id:''
-					},
-					{
-						label:'铁西区',
-						name:'tx',
-						id:''
-					},
-				],
-				// 本地区内分类项数量
-				regionNum:[
-					{
-				       count:641,
-					   name:'事件'
-					},
-					{
-					   count:351,
-					   name:'隐患'
-					},
-					{
-					   count:785,
-					   name:'人口'
-					},
-					{
-					   count:512,
-					   name:'企业'
-					},
-					{
-					   count:786,
-					   name:'林场'
-					},
-					{
-					   count:544,
-					   name:'矿坑'
-					},
-					{
-					   count:320,
-					   name:'收集点'
-					},
-					{
-					   count:321,
-					   name:'水鹤'
-					},
-					{
-					   count:400,
-					   name:'取水口'
-					},
-					{
-					   count:654,
-					   name:'消火栓'
-					},
-					{
-					   count:806,
-					   name:'摄像头'
-					},
-					{
-					   count:312,
-					   name:'养殖场'
-					},
-					{
-					   count:713,
-					   name:'处理中心'
-					},
-					{
-					   count:132,
-					   name:'泡沫液'
-					},
-					{
-					   count:466,
-					   name:'泡沫液'
-					},
-					{
-					   count:897,
-					   name:'消防力量'
-					},
-					{
-					   count:132,
-					   name:'探测器'
-					}
-				]
-			};
-		},
-		methods: {
-			handleClick(tab, event) {
-				console.log(tab, event);
-			}
-		}
-	};
+
+  import {getZhxx} from '@/api/bigdata'
+
+  export default {
+    data() {
+      return {
+        data_zhxx_data: [],
+        data_zhxx_event: [],
+        data_zhxx_device: 0,
+        //tab默认停留项el-tab-pane > name = "?"
+        activeName: 'sp',
+        //地区分类tabtitle
+        district: [
+          {
+            label: '四平市',
+            name: 'sp',
+            id: ''
+          },
+          {
+            label: '双辽市',
+            name: 'sl',
+            id: ''
+          },
+          {
+            label: '梨树县',
+            name: 'ls',
+            id: ''
+          },
+          {
+            label: '伊通县',
+            name: 'yt',
+            id: ''
+          },
+          {
+            label: '铁东区',
+            name: 'td',
+            id: ''
+          },
+          {
+            label: '铁西区',
+            name: 'tx',
+            id: ''
+          },
+        ],
+        // 本地区内分类项数量
+        regionNum: [
+          {
+            count: 641,
+            name: '事件'
+          },
+          {
+            count: 351,
+            name: '隐患'
+          },
+          {
+            count: 785,
+            name: '人口'
+          },
+          {
+            count: 512,
+            name: '企业'
+          },
+          {
+            count: 786,
+            name: '林场'
+          },
+          {
+            count: 544,
+            name: '矿坑'
+          },
+          {
+            count: 320,
+            name: '收集点'
+          },
+          {
+            count: 321,
+            name: '水鹤'
+          },
+          {
+            count: 400,
+            name: '取水口'
+          },
+          {
+            count: 654,
+            name: '消火栓'
+          },
+          {
+            count: 806,
+            name: '摄像头'
+          },
+          {
+            count: 312,
+            name: '养殖场'
+          },
+          {
+            count: 713,
+            name: '处理中心'
+          },
+          {
+            count: 132,
+            name: '泡沫液'
+          },
+          {
+            count: 466,
+            name: '泡沫液'
+          },
+          {
+            count: 897,
+            name: '消防力量'
+          },
+          {
+            count: 132,
+            name: '探测器'
+          }
+        ]
+      };
+    },
+    mounted() {
+      this.zhxx(null);
+    },
+    methods: {
+      zhxx() {
+        let that = this
+        getZhxx().then(resp => {
+          console.log(resp)
+          that.data_zhxx_device = resp.data.device
+          that.data_zhxx_data = resp.data.data
+          that.data_zhxx_event = resp.data.event
+        })
+      },
+
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  };
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-	@import '@/assets/styles/base.scss';
-	.bigdata-map-tabbar {
-		width: 100%;
-		height: 28.5vh;
-		padding: 0 1rem 1rem 1rem!important;
-		box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
-			-0 -0 20px rgba($color: #163696, $alpha: .6) inset;
-
-		.el-tabs__item {
-			color: #fff;
-			font-size: 12px;
-			height: 32px;
-			line-height: 32px;
-			padding: 0 10px;
-		}
-
-		.el-tabs__item.is-active {
-			color: #3ec6fc;
-		}
-
-		.el-tabs__nav-wrap::after {
-			background: none;
-		}
-
-		.el-tabs__active-bar {
-			// background-color: #ffbc30;
-			border-radius: 20px;
-		}
-
-		.el-tab-pane {
-			color: #fff;
-		}
-
-		.el-tabs__nav-next,
-		.el-tabs__nav-prev {
-			line-height: 40px;
-		}
-
-		.el-tabs__header {
-			margin: 0 0 10px;
-		}
-
-		.list-content {
-			width: 95%;
-			margin: 0 auto;
-			text-align: center;
-			margin-top: 1rem;
-
-			h5 {
-				width: 100%;
-				color: #0aaef2;
-				padding: .2rem 0;
-				border: 1px solid #091641;
-				font-size: 12px;
-			}
-
-			span {
-				width: 100%;
-				display: flex;
-				flex-direction: column;
-				font-size: 12px;
-				color: $white;
-				padding: .5rem 0;
-				font-weight: bolder;
-				border: 1px solid #091641;
-				border-bottom:none ;
-			}
-		}
-		.list-content:hover{
-			filter: brightness(2.3);
-		}
-	}
+  @import '@/assets/styles/base.scss';
+
+  .bigdata-map-tabbar {
+    width: 100%;
+    height: 28.5vh;
+    padding: 0 1rem 1rem 1rem !important;
+    box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
+    -0 -0 20px rgba($color: #163696, $alpha: .6) inset;
+
+    .el-tabs__item {
+      color: #fff;
+      font-size: 12px;
+      height: 32px;
+      line-height: 32px;
+      padding: 0 10px;
+    }
+
+    .el-tabs__item.is-active {
+      color: #3ec6fc;
+    }
+
+    .el-tabs__nav-wrap::after {
+      background: none;
+    }
+
+    .el-tabs__active-bar {
+      // background-color: #ffbc30;
+      border-radius: 20px;
+    }
+
+    .el-tab-pane {
+      color: #fff;
+    }
+
+    .el-tabs__nav-next,
+    .el-tabs__nav-prev {
+      line-height: 40px;
+    }
+
+    .el-tabs__header {
+      margin: 0 0 10px;
+    }
+
+    .list-content {
+      width: 95%;
+      margin: 0 auto;
+      text-align: center;
+      margin-top: 1rem;
+
+      h5 {
+        width: 100%;
+        color: #0aaef2;
+        padding: .2rem 0;
+        border: 1px solid #091641;
+        font-size: 12px;
+      }
+
+      span {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+        color: $white;
+        padding: .5rem 0;
+        font-weight: bolder;
+        border: 1px solid #091641;
+        border-bottom: none;
+      }
+    }
+
+    .list-content:hover {
+      filter: brightness(2.3);
+    }
+  }
 </style>