team饼图

src/api/bigdata.js

@@ -68,6 +68,13 @@ export function selectEnterpriseDistributionList(param) {
     data: param
   })
 }
+export function getBigDataForQ(type) {
+  return request({
+    url: `/center-emergency/VisuEmergencyCloudBigDataController/getBigDataForQ/${type}`,
+    method: 'get',
+  })
+}
+
 // 企业分布情况
 export function selectTimeList(param) {
   return request({

src/views/bigdata/bigdata.vue

@@ -29,7 +29,7 @@
         </div> -->
         <div class="b-con mg-b-20">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>行业高危企业</span>
+            <span>应急物资信息</span>
           </div>
          <chartFireCause></chartFireCause>
         </div>
@@ -52,19 +52,26 @@
         <tabbar></tabbar>
       </div>
       <!-- 第三纵向-->
-      <!-- <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20 tall">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span></span>
+          </div>
+          <chartFireCause></chartFireCause>
+        </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>
+          <chartteam></chartteam>
+        </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>
           <chartFireCause></chartFireCause>
-        </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>-->
-<!--          <chartDeviceReportingEvents></chartDeviceReportingEvents>-->
-<!--        </div>-->
+        </div>
+      </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>
@@ -86,20 +93,20 @@
         </div>
       </div> -->
       <!-- 第四纵向-->
-      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
-        <div class="b-con mg-b-20 taller">
-          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+<!--      <div class="bigdata-list wid-li-3 m-l-15 flex-r">-->
+<!--        <div class="b-con mg-b-20 taller">-->
+<!--          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">-->
 <!--            <span>企业分布情况</span>-->
-          </div>
+<!--          </div>-->
 <!--          <chartGridDistribution></chartGridDistribution>-->
-        </div>
+<!--        </div>-->
         <!-- <div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
             <span>逾期预警情况</span>
           </div>
           <chartWeatherTrends></chartWeatherTrends>
         </div> -->
-      </div>
+<!--      </div>-->
       <!-- 第五纵向-->
 <!--      <div class="bigdata-list wid-li-3 m-l-15 flex-r">-->
 <!--        <div class="b-con mg-b-20 tall">-->
@@ -141,6 +148,7 @@ import bigdataSupermap from '@/components/supermap' //超图
 
 //echarts
 import chartEvent from './chart-event.vue' //1  隐患整改情况
+import chartteam from './chart-team.vue'
 import chartForestFarm from './chart-forestFarm.vue' //2  行业高危企业
 import chartEquipmentType from './chart-equipmentType.vue' //3  从业人员分布情况
 import chartFireCause from './chart-fireCause.vue' //4  应急物资、、
@@ -172,6 +180,7 @@ export default {
     chartAncientTree,
     chartWeatherTrends,
     chartGridDistribution,
+    chartteam,
     // chartFireBrigade,
     // chartGridStaff,
     // chartWeatherStation,

src/views/bigdata/chart-team.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="chart-container">
+    <div id="teamecharts" style="width: 100%; height:24vh;">
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import request from "@/utils/request";
+import {getBigDataForQ} from '@/api/bigdata.js'
+
+export default {
+  data(){
+    this.myChart = null;
+    return{}
+  },
+  methods:{
+    drawECharts(dataList) {
+      this.myChart.setOption({
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          left: 'center',
+          top: '85%'
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['30%', '60%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: true,
+              position: 'outer'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 15,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: dataList.map((item)=>{
+              return{name:item.dict_label,value:item.count}
+            })
+          },
+        ]
+      });
+    },
+    getList() {
+      getBigDataForQ('team').then(resp =>{
+        this.myChart = echarts.init(document.getElementById('teamecharts'));
+        this.drawECharts(resp.data);
+      })
+    },
+
+  },
+  mounted() {
+    this.getList();
+  }
+}
+</script>
+<style>
+#szecharts {
+  width: 100%;
+  height: 100%;
+}
+</style>
+