统计分析-设备类型统计

src/api/bigdata.js

@@ -8,3 +8,16 @@ export function getEventSourceAndTypeStatistics(param) {
     data:param
   })
 }
+
+
+
+// 设备类型统计
+export function getCameaCount() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/getCameaCount',
+    method: 'post',
+  })
+}
+
+
+

src/views/bigdata/chart-equipmentType.vue

@@ -1,117 +1,134 @@
 <!-- **************************************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 { getCameaCount } from '@/api/bigdata'
 
-		},
+import * as echarts from 'echarts'
 
-		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);
-			},
+export default {
+  name: 'enterprise',
+  data() {
+    return {
+      deviceCount: [],
+      deviceType: [],
+      deviceTypeCount: []
+    }
+  },
+  mounted() {
+    this.getCameaCount()
+  },
 
-		},
+  methods: {
+    // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
 
+    getCameaCount() {
+      let that = this
+      getCameaCount().then(res => {
+        console.log(res)
+        for (let i = 0; i < res.data.deviceCount.length; i++) {
+          that.deviceTypeCount.push({
+            value: res.data.deviceCount[i],
+            name: res.data.deviceType[i],
+            itemStyle: { color: that.color16() }
+          })
+        }
+        this.deviceCount = res.data.deviceCount
+        this.deviceType = res.data.deviceType
+        that.myEcharts()
+      })
+    },
+    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
+    },
+    myEcharts() {
+      var chartDom = document.getElementById('enterprise')
+      var myChart = echarts.init(chartDom)
+      var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+      var option
+      var value = this.deviceType
+      var temp = 0
+      option = {
 
-	}
-</script>
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} '
+        },
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
+        legend: {
+          // show: false,
+          textStyle: {
+            color: '#fffff',
+            fontSize: 10
+          },
+          itemWidth: 19,
+          top: '2%',
+          data: this.deviceType
+        },
+        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: this.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>