考试分析的图表问题

src/utils/learning/chartData.js

@@ -578,4 +578,70 @@ export function knowledgeEffect(xAxisData, seriesBefore ,seriesAfter) {
     ]
   };
   return option;
+}
+
+export function examTimes() {
+  let option = {
+    title: {
+      text: "",
+      x: "left"
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+      }
+    },
+    color: ['#449284'],
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true
+    },
+    dataZoom: {
+      show: true,
+      start: 0,
+      end: 66
+    },
+    xAxis: [
+      {
+        axisLabel: {
+          interval: 0,
+          rotate: 35
+        },
+        type: "category",
+        data: [
+          "1次",
+          "2次"
+        ],
+        axisTick: {
+          alignWithLabel: true
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "完成时长 (天)"
+      }
+    ],
+    series: [
+      {
+        name: "时长",
+        type: "bar",
+        barWidth: 17,
+        data: [
+        ],
+        label: {
+          show: true,
+          position: "top",
+          formatter: "{c}", //这是关键，在需要的地方加上就行了
+          rotate: -90,
+          offset: [-5, -15]
+        }
+      }
+    ]
+  };
+  return option;
 }
\ No newline at end of file

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

@@ -21,10 +21,10 @@
         </el-card>
       </div>
     </div>
-    <!-- <div class="chart-title">完成项目考试次数情况</div>
-    <div class="chart" id="durationChart" ref="durationChart"></div>
-    <div class="chart-title">完成项目考试分数情况</div>
-    <div class="chart" id="durationChart" ref="durationChart"></div> -->
+    <div class="chart-title">完成项目考试次数情况</div>
+    <div class="chart" id="examTimes" ref="examTimes"></div>
+    <!-- <div class="chart-title">完成项目考试分数情况</div>
+    <div class="chart" id="examScore" ref="examScore"></div> -->
     <div class="table">
       <el-table :data="tableData" style="width: 100%" border>
         <el-table-column prop="examName" label="考试名" min-width="150" align="center"></el-table-column>
@@ -89,9 +89,11 @@
 
 <script>
 import { log } from "util";
-import * as operationData from "../../utils/operation";
 import { openLoading, closeLoading } from "../../utils/utils";
 import * as commonUtil from "../../utils/utils";
+import * as operationData from "../../utils/operation";
+import * as chartData from "../../utils/learning/chartData";
+import echarts from "echarts";
 let vm;
 export default {
   props: {
@@ -117,7 +119,11 @@ export default {
       pageNo: 1, //当前是第几页
       pageSize: 20, //页面总数
       labelTd: [],
-      showTd: [false, false, false, false]
+      showTd: [false, false, false, false],
+      echartsData: {
+        chart0: {},
+        chart1: {},
+      },
     };
   },
   created() {
@@ -229,6 +235,24 @@ export default {
       vm.cardData[0].value = data.afterExamCount + "门";
       vm.cardData[1].value = data.beforeExamCount + "门";
       vm.cardData[2].value = data.examTitleCount + "道";
+    },
+    updateResize() {
+      setTimeout(function() {
+        window.onresize = function() {
+          vm.echartsData.chart0.resize();
+          vm.echartsData.chart1.resize();
+        };
+      },100);
+    },
+    setExamTimes(data) {
+      let myChart = echarts.init(this.$refs.durationChart);
+      let option = chartData.examTimes();
+      myChart.setOption(option);
+      vm.echartsData.chart0 = myChart;
+      vm.updateResize();
+    },
+    setExamScore(data) {
+
     },
     // 跳转查看名单页面
     goPage(data) {