From d349db0806e48b4c141515424736e64d5d9e8cbe Mon Sep 17 00:00:00 2001
From: A <1445840182@qq.com>
Date: Thu, 14 Jul 2022 21:53:08 +0800
Subject: [PATCH] =?UTF-8?q?value=E5=85=A8=E4=B8=BA0=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E4=B8=BA=E7=81=B0=E8=89=B2=E4=B8=94=E6=98=BE=E7=A4=BA=E2=80=9C?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E6=9A=82=E6=97=A0=E8=BF=9B=E5=BA=A6=E2=80=9D?=
 =?UTF-8?q?+=E5=9B=BE=E4=BE=8B=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/echartsPie.vue | 98 ++++++++++++++++++++++++++++++-----
 1 file changed, 84 insertions(+), 14 deletions(-)

diff --git a/src/components/echartsPie.vue b/src/components/echartsPie.vue
index fd2ffa8..9ebc812 100644
--- a/src/components/echartsPie.vue
+++ b/src/components/echartsPie.vue
@@ -1,10 +1,10 @@
 <template>
   <div id="echartsPie" ref="echartsPie">
     <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 class="list_box">-->
+    <!--      <p>总人数：{{ getTotalNumber }}</p>-->
+    <!--      <p v-for="(item,index) in dataList" :key="index">{{ item.name }}：{{ item.value }}人</p>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -55,7 +55,69 @@ export default {
     // 获取配置
     getOption() {
       // 指定图表的配置项和数据
-      let option = {
+      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'
         },
@@ -63,7 +125,7 @@ export default {
           {
             name: '统计',
             type: 'pie',
-            center: ['45%', '55%'],
+            center: ['35%', '55%'],
             // radius: ['40%', '70%'],
             avoidLabelOverlap: false,
             label: {
@@ -82,40 +144,46 @@ export default {
             },
             data: this.dataList
           }
-        ]};
+        ]
+      };
+      }
+        
+  
       if (this.isLegend) {
         option.legend = {
           type: 'scroll',
           orient: 'vertical',
           // right: 10,
-          left: '80%',
+          left: '60%',
           // right:'50%',
           top: 20,
           bottom: 20,
         }
       }
-      option.series[0].radius = this.isRadius?'80%':['50%', '80%'];
+      option.series[0].radius = this.isRadius ? '80%' : ['50%', '80%'];
       return option;
     },
     // 初始化图表
     initEcharts() {
-      this.$nextTick(()=>{
+      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");
+        //console.log("addEventListener");
         // 让我们的图表调用 resize这个方法
         //that.$nextTick(()=>{
-          that.myChart.resize();
+        that.myChart.resize();
         //});
       });
     },
     // 更新图表
     updateEcharts() {
-      this.myChart.setOption(this.getOption(),true);
+      this.myChart.setOption(this.getOption(), true);
+        console.log( this.dataList," this.dataList")
     }
   }
 }
@@ -126,16 +194,18 @@ export default {
   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;
+    box-sizing: border-box;
   }
 
 }