学习效果

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

@@ -138,7 +138,7 @@ export default {
     return {
       roleType: "L1",
       projectId: "",
-      dataType: 1,
+      dataType: 0,
       tableType: "0",
       echartsData: {
         chart0: {},
@@ -174,10 +174,12 @@ export default {
     vm.initCard();
     if(vm.dataType == 0) {
       setTimeout(function() {
+      // vm.$nextTick(() => {
         vm.setDistributeChart();
         vm.setRecordChart();
         vm.setDurationChart();
         vm.setCertificateChart();
+      // });
       }, 20);
     } else {
       vm.setTable();
@@ -988,6 +990,7 @@ export default {
     .person-title {
       font-size:18px;
       font-weight:700;
+      margin-bottom: 20px;
     }
     .person-radio {
       margin-top: 10px;

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

 <template>
   <div class="learning-effect">
-    <div class="learning" ref="learning"></div>
     <div class="education" ref="education"></div>
+    <div class="learning" ref="learning"></div>
   </div>
 </template>
 
 <script>
 import { openLoading, closeLoading } from "../../utils/utils";
 import * as commonUtil from "../../utils/utils";
-const echarts = require("echarts");
+import echarts from "echarts";
+let vm = null;
 export default {
   data() {
-    return {};
+    return {
+      echartsData: {
+        chart1: {},
+        chart2: {}
+      }
+    };
+  },
+  created() {
+    vm = this;
+    vm.$nextTick(() => {
+      vm.setEducation();
+      vm.setLearning();
+    });
   },
   mounted() {
     commonUtil.resizeHeight();
-    this.initEcharts();
   },
   methods: {
-    // 初始化图表
-    initEcharts() {
-      openLoading(this);
-      let trainChart = echarts.init(this.$refs["learning"]);
-      let educationChart = echarts.init(this.$refs["education"]);
-      let trainPara = {
-        color: ["#FF9999", "#66CCFF"],
-        text: '培训前后知识点掌握情况变化',
-        xAxisData:  [
-              "转诊与履约",
-              "转诊与履约",
-              "周三",
-              "治疗原则及降压目标",
-              "周五",
-              "治疗原则及降压目标",
-              "周日"
-        ],
-        seriesBeforeDate: [20, 32, 31, 34, 39, 33, 32],
-        seriesAfterDate: [86, 10, 96, 10, 16, 16, 15]
-      }
-      let educationPara = {
-        color: ["#33FFFF", "#FF9999"],
-        text: '不同学历培训前后正确率对比',
-        xAxisData:  [
-              "转诊与履约",
-              "转诊与履约",
-              "周三",
-              "治疗原则及降压目标",
-              "周五",
-              "治疗原则及降压目标",
-              "周日"
-        ],
-        seriesBeforeDate: [20, 32, 31, 34, 39, 33, 32],
-        seriesAfterDate: [86, 10, 96, 10, 16, 16, 15]
+    updateResize() {
+      this.$nextTick(function() {
+        window.onresize = function() {
+          vm.echartsData.chart1.resize();
+          vm.echartsData.chart2.resize();
         };
-      // 显示图表。
-      trainChart.setOption(this.echartOptions(trainPara));
-      educationChart.setOption(this.echartOptions(educationPara));
-      closeLoading(this)
+      });
     },
-    // 图表的参数
-    echartOptions(parameter) {
+    setEducation() {
+      let myChart = echarts.init(this.$refs.education);
       let option = {
-        color: parameter.color,
         title: {
-          text: parameter.text,
-          x: "center",
-          textStyle: {
-            //主标题文本样式
-            fontSize: 16,
-            fontWeight: "bolder",
-            color: "#333"
-          }
+          text: ""
         },
         tooltip: {
           trigger: "axis",
@@ -78,10 +50,9 @@ export default {
             type: "shadow"
           }
         },
+        color: ['#5D7092','#FFB01B'],
         legend: {
-          data: ["培训前正确率", "培训后正确率"],
-          right: 0,
-          top: 20
+          data: ["项目前总正确率", "项目后总正确率"]
         },
         grid: {
           left: "3%",
@@ -89,70 +60,94 @@ export default {
           bottom: "3%",
           containLabel: true
         },
-        xAxis: [
-          {
+        xAxis: {
           type: "category",
-            data: parameter.xAxisData,
+          data: ["本科", "大专", "中专及以下", "硕士", "博士", "其他"]
+        },
+        yAxis: {
+          min: 0,
+          max: 100,
+          type: "value",
           axisLabel: {
-              //坐标轴刻度标签的相关设置。
-              interval: 0,
-              rotate: "45"
-            }
+            formatter: "{value} %"
           }
-        ],
-        yAxis: [
+        },
+        series: [
+          {
+            name: "项目前总正确率",
+            type: "bar",
+            barWidth: 10,
+            data: [45, 45, 34, 34, 4, 8]
+          },
           {
-            name: "比率(%)",
+            name: "项目后总正确率",
+            type: "bar",
+            barWidth: 10,
+            data: [70, 66, 67, 67, 24, 24]
+          }
+        ]
+      };
+      myChart.setOption(option);
+      vm.echartsData.chart1 = myChart;
+      vm.updateResize();
+    },
+    setLearning() {
+      let myChart = echarts.init(this.$refs.learning);
+      let option = {
+        title: {
+          text: ""
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        color: ['#5D7092','#FFB01B'],
+        legend: {
+          data: ["培训前正确率", "培训后正确率"]
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            rotate: 45
+          },
+          type: "category",
+          data: ["推荐联合用药方案"]
+        },
+        yAxis: {
+          min: 0,
+          max: 100,
           type: "value",
           axisLabel: {
-              show: true,
-              interval: "auto",
             formatter: "{value} %"
-            },
-            show: true,
-            axisLine: {
-              // 轴线
-              show: false
           }
-          }
-        ],
+        },
         series: [
           {
             name: "培训前正确率",
             type: "bar",
-            barGap: "20%",
-            barMaxWidth: "50",
-            itemStyle: {
-              normal: {
-                label: {
-                  show: true,
-                  position: "top",
-                  formatter: "{c}%"
-                }
-              }
-            },
-            data: parameter.seriesBeforeDate
+            barWidth: 10,
+            data: [45]
           },
           {
             name: "培训后正确率",
             type: "bar",
-            barGap: "20%",
-            barMaxWidth: "50",
-            itemStyle: {
-              normal: {
-                label: {
-                  show: true,
-                  position: "top",
-                  formatter: "{c}%" //这是关键，在需要的地方加上就行了
-                }
-              }
-            },
-            data: parameter.seriesAfterDate
+            barWidth: 10,
+            data: [81]
           }
         ]
       };
-      return option;
-    }
+      myChart.setOption(option);
+      vm.echartsData.chart2 = myChart;
+      vm.updateResize();
+    },
   }
 };
 </script>

src/views/learning/item-list.vue

@@ -97,7 +97,7 @@
             :organizationList="organizationList"
           ></examination-analysisfrom>
         </el-tab-pane>
-        <el-tab-pane label="数据总览" name="fifth">
+        <el-tab-pane label="数据总览" name="zero">
           <data-all
             ref="childDataAll"
             :formInline="formInline"
@@ -106,9 +106,9 @@
             :organizationList="organizationList"
           ></data-all>
         </el-tab-pane>
-        <!-- <el-tab-pane label="学习效果分析" name="fifth" lazy>
+        <el-tab-pane label="学习效果分析" name="fifth" lazy>
           <learning-effect></learning-effect>
-        </el-tab-pane>-->
+        </el-tab-pane>
       </el-tabs>
       <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
         <p style="text-align:center">文件正在生成，你可以去“我的导出下载”页，下载文件</p>