空态数据图表展示方式

src/style/common.scss

@@ -254,3 +254,15 @@ html,body{
       color: #FF9A4B;
     }
 }
+.empty-img {
+    position: relative;
+    height: 100px;
+    width: 100%;
+    display: flex;
+    img {
+      position: relative;
+      margin: 38px auto;
+      height: 24px;
+      width: 106px;
+    }
+  }
\ No newline at end of file

src/utils/operation.js

@@ -376,7 +376,14 @@ export function getPicOption(title, legendData, colorData, seriesData) {
     },
     tooltip: {
       trigger: 'item',
-      formatter: "{a} <br/>{b} : {c} ({d}%)"
+      // formatter: "{a} <br/>{b} : {c} ({d}%)"
+      formatter:function(data){ 
+        let value = data.name + '：' + data.percent.toFixed(1)+"%"
+        return value;
+      }
+    },
+    label: {
+      formatter:function(data){ return data.percent.toFixed(1)+"%";} 
     },
     legend: {
       orient: "vertical",

src/views/learning/item-crowd-analysis.vue

@@ -9,9 +9,13 @@
       <p>"没有相关数据，请重新选择查询范围"</p>
     </div>
     <div class="chart" v-show="showData">
+      <div >
         <div class="item" id="education" ref="education"></div>
+      </div>
+      <div >
         <div class="item item-right" id="job" ref="job"></div>
       </div>
+    </div>
     <div class="chart" v-show="showData">
       <div class="item">
         <div class="title">人员性别分布</div>
@@ -254,7 +258,6 @@ export default {
     },
     educationDivision(data) {
       // console.log('this.$refs.education',this.$refs.education)
-      let myChart = echarts.init(this.$refs.education);
       let educationList = data;
       let legendData = [];
       let seriesData = [];
@@ -270,12 +273,13 @@ export default {
         colorData,
         seriesData
       );
+      setTimeout(function(){
+        let myChart = echarts.init(vm.$refs.education);
         myChart.setOption(option);
         vm.echartsData.chart1 = myChart;
-      vm.updateResize();
+      },20);
     },
     jobDivision(data) {
-      let myChart2 = echarts.init(this.$refs.job);
       let titleList = data;
       let legendData = [];
       let seriesData = [];
@@ -290,12 +294,13 @@ export default {
         colorData,
         seriesData
       );
+      setTimeout(function(){
+        let myChart2 = echarts.init(vm.$refs.job);
         myChart2.setOption(option);
         vm.echartsData.chart2 = myChart2;
-      vm.updateResize();
+      },20);
     },
     ageDivision(data) {
-      let myChart3 = echarts.init(this.$refs.age);
       let xAxisData = [];
       let seriesData = [];
       let ageList = data;
@@ -313,9 +318,11 @@ export default {
       }
       let option = operationData.getBarOption(xAxisData, seriesData);
 
+      setTimeout(function(){
+        let myChart3 = echarts.init(vm.$refs.age);
         myChart3.setOption(option);
         vm.echartsData.chart3 = myChart3;
-      vm.updateResize();
+      },20);
     }
   }
 };

src/views/learning/item-data-all.vue

@@ -67,7 +67,7 @@
       <div v-if="downloadId == null">
         <div class="spacing"></div>
         <div class="chart-title">证历分布情况</div>
-      <div class="chart-distributeChart">
+        <div v-if="showDistributeChart === true" class="chart-distributeChart">
           <div class="distributeChart" id="distributeChart" ref="distributeChart"></div>
           <div class="data-text">
             <div class="content-text">
@@ -75,10 +75,13 @@
             </div>
           </div>
         </div>
+        <div v-if="showDistributeChart === false" class="empty-img">
+          <img src="../../assets/image/noData.png" />
+        </div>
       </div>
       <div class="spacing"></div>
       <div class="chart-title">证书级别按学历发布情况</div>
-      <div class="chart-recordChart">
+      <div v-if="showRecordChart === true" class="chart-recordChart">
         <div class="recordChart" id="recordChart" ref="recordChart"></div>
         <div class="data-text">
           <div class="content-text">
@@ -86,20 +89,33 @@
           </div>
         </div>
       </div>
+      <div v-if="showRecordChart === false" class="empty-img">
+        <img src="../../assets/image/noData.png" />
+      </div>
       <div v-if="certFlag != 0">
         <div class="spacing"></div>
         <div class="chart-title-more">
           <p>项目排名情况</p>
-        <el-radio-group  class="rank-radio" size="medium" v-model="rankType" @change="changeRank">
+          <el-radio-group v-if="showCertificateChart === true"  class="rank-radio" size="medium" v-model="rankType" @change="changeRank">
             <el-radio-button label="1">按获证人数排名</el-radio-button>
             <el-radio-button label="2">按获证比例排名</el-radio-button>
             <el-radio-button label="3">按参与人数排名</el-radio-button>
           </el-radio-group>
         </div>
+        <div v-if="showCertificateChart === true">
           <div class="chartCert" id="certificateChart" ref="certificateChart"></div>
+        </div>
+        <div v-if="showCertificateChart === false" class="empty-img">
+          <img src="../../assets/image/noData.png" />
+        </div>
         <div class="spacing"></div>
         <div class="chart-title">在线培训完成时长情况</div>
+        <div v-if="showDurationChart === true">
           <div class="chartDuration" id="durationChart" ref="durationChart"></div>
+        </div>
+        <div v-if="showDurationChart === false" class="empty-img">
+          <img src="../../assets/image/noData.png" />
+        </div>
         <div class="chart-remarks">注：在线培训完成时长=完成项目时间-开始参与项目时间</div>
       </div>
     </div>
@@ -302,6 +318,11 @@ export default {
       certFlag: 0,
       downloadId: null,
       timeInfoChild: {},
+
+      showDistributeChart: true,
+      showRecordChart: true,
+      showCertificateChart: true,
+      showDurationChart: true,
     };
   },
   watch: {
@@ -612,6 +633,12 @@ export default {
       // },100);
     },
     setDistributeChart(data) {
+      if(data.length == 0) {
+        vm.showDistributeChart = false;
+        return;
+      } else {
+        vm.showDistributeChart = true;
+      }
       let keyName = ['未获证人数','优秀人数','良好人数','及格人数','不及格人数'];
       let keyName2 = ['未获证人数占比','优秀人数占比','良好人数占比','及格人数占比','不及格人数占比'];
       let distributeList = [];
@@ -632,13 +659,21 @@ export default {
         seriesData.push(objSer);
       }
       vm.distributeList = distributeList;
-      let myChart = echarts.init(this.$refs.distributeChart);
+      setTimeout(function(){ 
+        let myChart = echarts.init(vm.$refs.distributeChart);
         let option = chartData.dustributeOption(legendData,seriesData);
         myChart.setOption(option);
         vm.echartsData.chart0 = myChart;
         vm.updateResize();
+      },20);
     },
     setRecordChart(data) {
+      if(data.length == 0) {
+        vm.showRecordChart = false;
+        return;
+      } else {
+        vm.showRecordChart = true;
+      }
       let recordList = [
         {
           label: '博士后',
@@ -711,12 +746,13 @@ export default {
       }
       // console.log('data',legendData,seriesArr,seriesData);
       vm.recordList = recordList;
-      let myChart = echarts.init(this.$refs.recordChart);
-     
+      setTimeout(function(){ 
+        let myChart = echarts.init(vm.$refs.recordChart);
         let option = chartData.recordOption(legendData, xAxisData, seriesData);
         myChart.setOption(option);
         vm.echartsData.chart1 = myChart;
         vm.updateResize();
+      },20);
     },
     changeRank(value) {
       if(vm.downloadId == null) {
@@ -743,6 +779,12 @@ export default {
       }
     },
     setCertificateChart(data) {
+      if(data.length == 0) {
+        vm.showCertificateChart = false;
+        return;
+      } else {
+        vm.showCertificateChart = true;
+      }
       let xAxisData = [];
       let seriesJoin = [];
       let seriesCert = [];
@@ -753,24 +795,34 @@ export default {
         seriesCert.push(data[i].certCount);
         seriesRate.push(data[i].certRate);
       }
-      let myChart = echarts.init(this.$refs.certificateChart);
+      setTimeout(function(){
+        let myChart = echarts.init(vm.$refs.certificateChart);
         let option = chartData.certificateOption(xAxisData, seriesJoin, seriesCert, seriesRate);
         myChart.setOption(option);
         vm.echartsData.chart2 = myChart;
         vm.updateResize();
+      },20);
     },
     setDurationChart(data) {
+      if(data.length == 0) {
+        vm.showDurationChart = false;
+        return;
+      } else {
+        vm.showDurationChart = true;
+      }
       let xAxisData = [];
       let seriesData = [];
       for(let i = 0 ; i<data.length ; i++) {
         xAxisData.push(data[i].subName);
         seriesData.push(data[i].costTime);
       }
-      let myChart = echarts.init(this.$refs.durationChart);
+      setTimeout(function(){
+        let myChart = echarts.init(vm.$refs.durationChart);
         let option = chartData.durationOption(xAxisData, seriesData);
         myChart.setOption(option);
         vm.echartsData.chart3 = myChart;
         vm.updateResize();
+      },20);
     },
     //日周月年分页
     handleSizeDwmy(val) {

src/views/learning/item-examination-analysis.vue

@@ -10,19 +10,29 @@
     </div>
     <div class="spacing"></div>
     <div class="chart-title">完成项目考试次数情况</div>
+    <div v-if="showExamTimes === true" > 
       <div class="chart" id="examTimes" ref="examTimes"></div>
+    </div>
+    <div v-if="showExamTimes === false" class="empty-img">
+      <img src="../../assets/image/noData.png" />
+    </div>
     <div class="chart-remarks">注：本报表数据来源包括用户参加正式考试次数，不包含摸底考试次数。</div>
     <div class="spacing"></div>
     <!-- <div class="chart-title">完成项目考试分数情况</div> -->
     <div class="chart-title-more">
         <p>完成项目考试分数情况</p>
-        <el-radio-group  class="rank-radio" size="medium" v-model="rankType" @change="changeRank">
+        <el-radio-group v-if="showExamScore === true" class="rank-radio" size="medium" v-model="rankType" @change="changeRank">
           <el-radio-button label="1">1分</el-radio-button>
           <el-radio-button label="5">5分</el-radio-button>
           <el-radio-button label="10">10分</el-radio-button>
         </el-radio-group>
       </div>
+    <div v-if="showExamScore === true">
       <div class="chart" id="examScore" ref="examScore"></div>
+    </div>
+    <div v-if="showExamScore === false" class="empty-img">
+      <img src="../../assets/image/noData.png" />
+    </div>
     <div class="chart-remarks">注：本报表数据来源包括用户参加正式考试，不包含摸底考试。</div>
     <div class="spacing"></div>
     <div v-if="downloadId == null">
@@ -135,6 +145,8 @@ export default {
       rankType: '1',
       timeInfoChild: {},
       downloadId: null,
+      showExamTimes: true,
+      showExamScore: true,
     };
   },
   watch: {
@@ -276,17 +288,24 @@ export default {
       }, 30);
     },
     setExamTimes(data) {
-      let myChart = echarts.init(this.$refs.examTimes);
+      if(data.length == 0) {
+        vm.showExamTimes = false;
+        return;
+      } else {
+        vm.showExamTimes = true;
+      }
       let xAxisData = [];
       let seriesData = [];
       for (let i = 0; i < data.length; i++) {
         xAxisData.push(data[i].times + "次");
         seriesData.push(data[i].count);
       }
+      setTimeout(function(){ 
+        let myChart = echarts.init(vm.$refs.examTimes);
         let option = chartData.examTimes(xAxisData, seriesData);
         myChart.setOption(option);
         vm.echartsData.chart0 = myChart;
-      vm.updateResize();
+      },20);
     },
     changeRank(value) {
       console.log(value);
@@ -310,17 +329,24 @@ export default {
       }
     },
     setExamScore(data) {
-      let myChart = echarts.init(this.$refs.examScore);
+      if(data.length == 0) {
+        vm.showExamScore = false;
+        return;
+      } else {
+        vm.showExamScore = true;
+      }
       let xAxisData = [];
       let seriesData = [];
       for (let i = 0; i < data.length; i++) {
         xAxisData.push(data[i].timesStr);
         seriesData.push(data[i].count);
       }
+      setTimeout(function(){ 
+        let myChart = echarts.init(vm.$refs.examScore);
         let option = chartData.examScore(xAxisData, seriesData);
         myChart.setOption(option);
         vm.echartsData.chart1 = myChart;
-      vm.updateResize();
+      },20);
     },
     // 跳转查看名单页面
     goPage(data) {

src/views/learning/item-learning-effect.vue

@@ -10,11 +10,21 @@
     </div>
     <div class="spacing"></div>
       <div class="chart-title">不同学历完成项目前后正确率对比</div>
+    <div v-if="showChartEdu === true">
       <div class="chartEdu" ref="education"></div>
+    </div>
+    <div v-if="showChartEdu === false" class="empty-img">
+      <img src="../../assets/image/noData.png" />
+    </div>
     <div class="chart-remarks">注：本报表数据来源仅仅统计同时包含摸底考和正式考的课程培训。</div>
     <div class="spacing"></div>
     <div class="chart-title">培训前后知识点掌握情况</div>
+    <div v-if="showChartLearn === true">
       <div class="chartLearn" ref="learning"></div>
+    </div>
+    <div v-if="showChartLearn === false" class="empty-img">
+      <img src="../../assets/image/noData.png" />
+    </div>
     <div class="chart-remarks">注：本报表数据来源仅包括有摸底考的课程培训。</div>
   </div>
 </template>
@@ -46,6 +56,8 @@ export default {
         chart2: {}
       },
       timeInfoChild: {},
+      showChartEdu: true,
+      showChartLearn: true,
     };
   },
   watch: {
@@ -121,39 +133,53 @@ export default {
           title: "培训前后正确率"
         }
       ];
-      cardData[0].value = (data.beforeRate*100).toFixed(2) + "%";
-      cardData[1].value = (data.afterRate*100).toFixed(2) + "%";
+      cardData[0].value = (data.beforeRate*100).toFixed(1) + "%";
+      cardData[1].value = (data.afterRate*100).toFixed(1) + "%";
       vm.cardData = cardData;
     },
     setEducation(data) {
-      let myChart = echarts.init(this.$refs.education);
+      if(data.length == 0) {
+        vm.showChartEdu = false;
+        return;
+      } else {
+        vm.showChartEdu = true;
+      }
       let xAxisData = [];
       let seriesBefore = [];
       let seriesAfter = [];
       for(let i = 0; i < data.length ; i++) {
         xAxisData.push(data[i].classifyName);
-        seriesBefore.push((data[i].beforeRate*100).toFixed(2));
-        seriesAfter.push((data[i].afterRate*100).toFixed(2));
+        seriesBefore.push((data[i].beforeRate*100).toFixed(1));
+        seriesAfter.push((data[i].afterRate*100).toFixed(1));
       }
+      setTimeout(function(){
+        let myChart = echarts.init(vm.$refs.education);
         let option = chartData.educationEffect(xAxisData, seriesBefore ,seriesAfter);
         myChart.setOption(option);
         vm.echartsData.chart1 = myChart;
-      vm.updateResize();
+      },20);
     },
     setLearning(data) {
-      let myChart = echarts.init(this.$refs.learning);
+      if(data.length == 0) {
+        vm.showChartLearn = false;
+        return;
+      } else {
+        vm.showChartLearn = true;
+      }
       let xAxisData = [];
       let seriesBefore = [];
       let seriesAfter = [];
       for(let i = 0; i < data.length ; i++) {
         xAxisData.push(data[i].classifyName);
-        seriesBefore.push((data[i].beforeRate*100).toFixed(2));
-        seriesAfter.push((data[i].afterRate*100).toFixed(2));
+        seriesBefore.push((data[i].beforeRate*100).toFixed(1));
+        seriesAfter.push((data[i].afterRate*100).toFixed(1));
       }
+      setTimeout(function(){
+        let myChart = echarts.init(vm.$refs.learning);
         let option = chartData.knowledgeEffect(xAxisData, seriesBefore ,seriesAfter);
         myChart.setOption(option);
         vm.echartsData.chart2 = myChart;
-      vm.updateResize();
+      },20);
     }
   }
 };

src/views/learning/item-list.vue

@@ -284,7 +284,7 @@ export default {
         // organizationData: "",
       },
       tags: [],
-      activeName: "zero",
+      activeName: "fifth",
       organizationNum: 0,
       dialogVisible: false,
       dialogUpdate: false,