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>
 
@@ -56,135 +56,68 @@ export default {
     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,
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '统计',
+            type: 'pie',
+            stillShowZeroSum: false,
+            center: ['45%', '55%'],
+            // radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
               label: {
                 show: false,
-                position: 'center'
-              },
-              emphasis: {
-                label: {
-                  show: false,
-                  fontSize: '40',
-                  fontWeight: 'bold'
-                }
-              },
-              labelLine: {
-                show: false
-              },
-              data: this.dataList
-            }
-          ]
-        };
-      }
-
-
+                fontSize: '40',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.dataList
+          }
+        ]};
       if (this.isLegend) {
         option.legend = {
           type: 'scroll',
           orient: 'vertical',
           // right: 10,
-          left: '60%',
+          left: '80%',
           // 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);
-      console.log(this.dataList, " this.dataList")
+      this.myChart.setOption(this.getOption(),true);
     }
   }
 }
@@ -195,18 +128,16 @@ 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;
   }
 
 }