解决工作项图例问题

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;

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>

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>