【优化】能力统计图如果没有数据就不显示

yangzhi
1 parent 88e9d1c0
Showing 2 changed files with 61 additions and 15 deletions
src/views/resume/femalestaff.vue
src/views/resume/malestaff.vue
@@ -102,8 +102,8 @@
         </div>
       </div>
     </div>
-    <div class="bottom-panel flex1">
-      <div class="panel">
+    <div class="bottom-panel flex1" v-if="abilityEchart1VisibleComputed || abilityEchart2VisibleComputed || natureEchartVisibleComputed">
+      <div class="panel" v-if="abilityEchart1VisibleComputed">
         <div class="panel-title">
           <span>能力统计图</span>
           <img src="/static/resume/female/resume11.png" alt="" />
@@ -112,7 +112,7 @@
           <div id="echarts1"></div>
         </div>
       </div>
-      <div class="panel">
+      <div class="panel"  v-if="abilityEchart2VisibleComputed">
         <div class="panel-title">
           <span>能力统计图</span>
           <img src="/static/resume/female/resume11.png" alt="" />
@@ -121,7 +121,7 @@
           <div id="echarts2"></div>
         </div>
       </div>
-      <div class="panel">
+      <div class="panel"  v-if="natureEchartVisibleComputed">
         <div class="panel-title">
           <span>性格统计图</span>
           <img src="/static/resume/female/resume12.png" alt="" />
@@ -306,12 +306,27 @@ export default {
           },
         ],
       },
-      natureList: {},
+      natureList: [],
       abilityList: [],
       user: {},
     };
   },
   computed: {
+    abilityEchart1VisibleComputed(){
+      return this.abilityList.reduce((total,item)=>{
+        return total + item.value;
+      },0)>0;
+    },
+    abilityEchart2VisibleComputed(){
+      return this.abilityList.length>6 && this.abilityList.slice(6).reduce((total,item)=>{
+        return total + item.value;
+      },0)>0;
+    },
+    natureEchartVisibleComputed(){
+      return this.natureList.reduce((total,item)=>{
+        return total + item.value;
+      },0)>0;
+    },
     userDetail() {
       let user = {...this.user};
       user.educationalExperience = JSON.parse(user.educationalExperience || '[]');
@@ -378,7 +393,11 @@ export default {
       this.initNengliEchart();
     },
     initXinggeEchart(list) {
-      let myChart = echarts.init(document.getElementById("echarts3"));
+      let dom = document.getElementById("echarts3");
+      if(!dom){
+        return;
+      }
+      let myChart = echarts.init(dom);
       this.echartOption3.radar.indicator = list.map((t) => {
         return { name: t.title, max: 100 };
       });
@@ -387,8 +406,12 @@ export default {
       console.log("this.echartOption3", this.echartOption3);
     },
     initNengliEchart(list) {
+      let dom = document.getElementById("echarts1");
+      if(!dom){
+        return;
+      }
       //第一个echart图
-      let myChart = echarts.init(document.getElementById("echarts1"));
+      let myChart = echarts.init(dom);
       let list1 = list.slice(0, 6);
       this.echartOption1.xAxis[0].data = list1.map((t) => t.title);
       this.echartOption1.series[0].data = list1.map((t) => t.value);
@@ -82,8 +82,8 @@
         </div>
       </div>
     </div>
-    <div class="bottom-panel flex1">
-      <div class="panel">
+    <div class="bottom-panel flex1" v-if="abilityEchart1VisibleComputed || abilityEchart2VisibleComputed || natureEchartVisibleComputed">
+      <div class="panel" v-if="abilityEchart1VisibleComputed">
         <div class="panel-title">
           <span>能力统计图</span>
           <img src="/static/resume/male/resume11.png" alt="" />
@@ -92,7 +92,7 @@
           <div id="echarts1"></div>
         </div>
       </div>
-      <div class="panel">
+      <div class="panel" v-if="abilityEchart2VisibleComputed">
         <div class="panel-title">
           <span>能力统计图</span>
           <img src="/static/resume/male/resume11.png" alt="" />
@@ -101,7 +101,7 @@
           <div id="echarts2"></div>
         </div>
       </div>
-      <div class="panel">
+      <div class="panel" v-if="natureEchartVisibleComputed">
         <div class="panel-title">
           <span>性格统计图</span>
           <img src="/static/resume/male/resume12.png" alt="" />
@@ -286,12 +286,27 @@ export default {
           },
         ],
       },
-      natureList: {},
+      natureList: [],
       abilityList: [],
       user: {},
     };
   },
   computed: {
+    abilityEchart1VisibleComputed(){
+      return this.abilityList.reduce((total,item)=>{
+        return total + item.value;
+      },0)>0;
+    },
+    abilityEchart2VisibleComputed(){
+      return this.abilityList.length>6 && this.abilityList.slice(6).reduce((total,item)=>{
+        return total + item.value;
+      },0)>0;
+    },
+    natureEchartVisibleComputed(){
+      return this.natureList.reduce((total,item)=>{
+        return total + item.value;
+      },0)>0;
+    },
     userDetail() {
       let user = {...this.user};
       user.educationalExperience = JSON.parse(user.educationalExperience || '[]');
@@ -358,17 +373,25 @@ export default {
       this.initNengliEchart();
     },
     initXinggeEchart(list) {
-      let myChart = echarts.init(document.getElementById("echarts3"));
+      let dom = document.getElementById("echarts3");
+      if(!dom){
+        return;
+      }
+      let myChart = echarts.init(dom);
+      if(myChart)
       this.echartOption3.radar.indicator = list.map((t) => {
         return { name: t.title, max: 100 };
       });
       this.echartOption3.series[0].data[0].value = list.map((t) => t.value);
       myChart.setOption(this.echartOption3);
-      console.log("this.echartOption3", this.echartOption3);
     },
     initNengliEchart(list) {
+      let dom = document.getElementById("echarts1");
+      if(!dom){
+        return;
+      }
       //第一个echart图
-      let myChart = echarts.init(document.getElementById("echarts1"));
+      let myChart = echarts.init(dom);
       let list1 = list.slice(0, 6);
       this.echartOption1.xAxis[0].data = list1.map((t) => t.title);
       this.echartOption1.series[0].data = list1.map((t) => t.value);