From da8c9e7801ddc5a217a4c5a81ae0954035b56357 Mon Sep 17 00:00:00 2001
From: A <1445840182@qq.com>
Date: Thu, 14 Jul 2022 22:53:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=B7=A5=E4=BD=9C=E9=A1=B9?=
 =?UTF-8?q?=E5=9B=BE=E4=BE=8B=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...{echartsPie.vue => echartsPositionPie.vue} |  10 +-
 src/components/echartsTaskPie.vue             | 213 ++++++++++++++++++
 src/views/ProjectGroup.vue                    |  16 +-
 3 files changed, 229 insertions(+), 10 deletions(-)
 rename src/components/{echartsPie.vue => echartsPositionPie.vue} (95%)
 create mode 100644 src/components/echartsTaskPie.vue

diff --git a/src/components/echartsPie.vue b/src/components/echartsPositionPie.vue
similarity index 95%
rename from src/components/echartsPie.vue
rename to src/components/echartsPositionPie.vue
index 5a5b5f4..630d3aa 100644
--- a/src/components/echartsPie.vue
+++ b/src/components/echartsPositionPie.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="echartsPie" ref="echartsPie">
+  <div id="echartsPositionPie" ref="echartsPositionPie">
     <div :id="id" class="echarts_box" style="width: 100%;height: 100%;"></div>
     <!--    <div class="list_box">-->
     <!--      <p>总人数：{{ getTotalNumber }}</p>-->
@@ -12,7 +12,7 @@
 import * as echarts from 'echarts'
 
 export default {
-  name: "echartsPie",
+  name: "echartsPositionPie",
   props: {
     // 标识，同页面不能相同
     id: {
@@ -64,7 +64,7 @@ export default {
       let option = null
       if (isAllZero == true) {
         for (let i = 0; i < this.dataList.length; i++) {
-          this.dataList[i].name = this.dataList[i].name + " 已完成工作项：" + this.dataList[i].value + "项"
+          this.dataList[i].name = this.dataList[i].name + "：" + this.dataList[i].value + "人"
         }
         console.log(this.dataList, "this.dataListgroup")
         option = {
@@ -155,7 +155,7 @@ export default {
           type: 'scroll',
           orient: 'vertical',
           // right: 10,
-          left: '60%',
+          left: '59%',
           // right:'50%',
           top: 20,
           bottom: 20,
@@ -191,7 +191,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-#echartsPie {
+#echartsPositionPie {
   width: 100%;
   height: 100%;
   display: flex;
diff --git a/src/components/echartsTaskPie.vue b/src/components/echartsTaskPie.vue
new file mode 100644
index 0000000..2825609
--- /dev/null
+++ b/src/components/echartsTaskPie.vue
@@ -0,0 +1,213 @@
+<template>
+  <div id="echartsTaskPie" ref="echartsTaskPie">
+    <div :id="id" class="echarts_box" style="width: 100%;height: 100%;"></div>
+    <!--    <div class="list_box">-->
+    <!--      <p>总人数：{{ getTotalNumber }}</p>-->
+    <!--      <p v-for="(item,index) in dataList" :key="index">{{ item.name }}：{{ item.value }}人</p>-->
+    <!--    </div>-->
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: "echartsTaskPie",
+  props: {
+    // 标识，同页面不能相同
+    id: {
+      type: String
+    },
+    // 是否要上角图例
+    isLegend: {
+      type: Boolean,
+      default: false
+    },
+    // 是否为满圆
+    isRadius: {
+      type: Boolean,
+      default: false
+    },
+    // 数据列表
+    dataList: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  mounted() {
+    this.initEcharts();
+  },
+  computed: {
+    getTotalNumber() {
+      let total = this.dataList.reduce((prev, item) => {
+        prev += item.value
+        return prev
+      }, 0)
+      return total;
+    }
+  },
+  methods: {
+    // 获取配置
+    getOption() {
+
+      // 指定图表的配置项和数据
+      let isAllZero = this.dataList.every(item => {
+        // console.log(item,"item")
+        return item.value == 0
+      })
+      console.log(isAllZero, "isAllZero")
+      let option = null
+      if (isAllZero == true) {
+        for (let i = 0; i < this.dataList.length; i++) {
+          this.dataList[i].name = this.dataList[i].name + " 已完成工作项：" + this.dataList[i].value + "项"
+        }
+        console.log(this.dataList, "this.dataListgroup")
+        option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          //文本形式项目暂无进度，缩放有问题
+          //    graphic:{
+          //     type:'text',
+          //     left:'27%',
+          //     top:'50%',
+          //     style:{
+          //         text:'项目暂无进度',
+          //          textAlign:'center',
+          //         fill:'#000',
+
+          //     }
+          // },
+          series: [
+            {
+              name: '统计',
+              type: 'pie',
+              center: ['35%', '55%'],
+              // radius: ['40%', '70%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: true,
+                position: 'center',
+                formatter: '项目暂无进度'
+              },
+              emphasis: {
+                label: {
+                  show: false,
+                  fontSize: '40',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              itemStyle: {
+                normal: {
+                  color: '#D3D3D3'
+                }
+              },
+              data: this.dataList
+            }
+          ]
+        };
+      } else {
+        for (let i = 0; i < this.dataList.length; i++) {
+          this.dataList[i].name = this.dataList[i].name + " 已完成工作项：" + this.dataList[i].value + "项"
+        }
+        option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          series: [
+            {
+              name: '统计',
+              type: 'pie',
+              center: ['35%', '55%'],
+              // radius: ['40%', '70%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: false,
+                  fontSize: '40',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: this.dataList
+            }
+          ]
+        };
+      }
+
+
+      if (this.isLegend) {
+        option.legend = {
+          type: 'scroll',
+          orient: 'vertical',
+          // right: 10,
+          left: '59%',
+          // right:'50%',
+          top: 20,
+          bottom: 20,
+        }
+      }
+      option.series[0].radius = this.isRadius ? '80%' : ['50%', '80%'];
+      return option;
+    },
+    // 初始化图表
+    initEcharts() {
+      this.$nextTick(() => {
+
+        this.myChart = echarts.init(document.getElementById(this.id));
+        // 使用刚指定的配置项和数据显示图表。
+        this.myChart.setOption(this.getOption());
+      });
+      let that = this;
+      window.addEventListener('resize', function () {
+        //console.log("addEventListener");
+        // 让我们的图表调用 resize这个方法
+        //that.$nextTick(()=>{
+        that.myChart.resize();
+        //});
+      });
+    },
+    // 更新图表
+    updateEcharts() {
+      this.myChart.setOption(this.getOption(), true);
+      console.log(this.dataList, " this.dataList")
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+#echartsTaskPie {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .echarts_box {
+    flex-shrink: 0;
+  }
+
+  .list_box {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: scroll;
+    padding: 50px 50px;
+    box-sizing: border-box;
+  }
+
+}
+</style>
diff --git a/src/views/ProjectGroup.vue b/src/views/ProjectGroup.vue
index 4c077c9..13ac654 100644
--- a/src/views/ProjectGroup.vue
+++ b/src/views/ProjectGroup.vue
@@ -65,12 +65,12 @@
         <p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 0 0 30px 0;flex-shrink: 0;">
           岗位统计</p>
         <div style="flex: 1;background-color: white; border-radius: 10px;">
-          <EchartsPie id="pie_post" ref="pie_post" :isLegend="true" :dataList="stationList"/>
+          <EchartsPositionPie id="pie_post" ref="pie_post" :isLegend="true" :dataList="stationList"/>
         </div>
         <p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 15px 0 30px 0;flex-shrink: 0;">
           团队工作情况统计</p>
         <div style="flex: 1;background-color: white; border-radius: 10px;">
-          <EchartsPie id="pie_team" ref="pie_team" :isLegend="true" :dataList="teamList"/>
+          <EchartsTaskPie id="pie_team" ref="pie_team" :isLegend="true" :dataList="teamList"/>
           <!--          <EchartsPie id="pie_team" :isRadius="true" />-->
         </div>
       </div>
@@ -118,7 +118,8 @@ onMounted(() => {
 </script>
 
 <script>
-import EchartsPie from "../components/echartsPie";
+import EchartsTaskPie from "../components/echartsTaskPie";
+import EchartsPositionPie from "../components/echartsPositionPie";
 import request from "../utils/request";
 import CreatePersonDialog from "../components/CreatePersonDialog";
 import EditJobDialog from "../components/EditJobDialog";
@@ -157,7 +158,8 @@ export default {
     CreatePersonDialog,
     EditJobDialog,
     TransferDialog,
-    EchartsPie
+    EchartsTaskPie,
+    EchartsPositionPie
   },
   methods: {
     getOperationsVisible(row) {
@@ -342,7 +344,11 @@ export default {
   border-radius: 10px;
 }
 
-#echartsPie {
+#echartsTaskPie {
+  border-radius: 10px;
+}
+
+#echartsPositionPie {
   border-radius: 10px;
 }
 </style>