新增我的课程报告

src/components/pages/myReport/components/myCourseReport.vue

@@ -1,15 +1,158 @@
 <template>
   <div>
-    <div class="basicBox">
-      <div></div>
+    <div style="width: 95%; height: 100%; margin: 0 auto">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      randarJson: [
+        { target: "语言准确", count: 1, value: 5 },
+        { target: "借助多媒体工具", count: 1, value: 5 },
+        { target: "聚焦主题", count: 1, value: 5 },
+      ],
+      chartObj: null,
+      option: {
+        splitNumber: 5,
+        tooltip: {
+          triggerOn: "mousemove",
+          //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
+          confine: true,
+          enterable: true, //鼠标是否可以移动到tooltip区域内
+          backgroundColor: "rgba(255,255,255,0.7)",
+          textStyle: {
+            // 文字样式
+            align: "left",
+          },
+          left: "right",
+          top: "bottom",
+        },
+        radar: {
+          radius: ["0%", "70%"],
+          shape: "circle",
+          center: ["50%", "50%"],
+          axisName: {
+            textStyle: {
+              // 文字样式
+              color: "#58a5e6",
+            },
+            formatter: function (value, indicator) {
+              // value = value.replace(/\S{2}/g, function (match) {
+              //   return match + "\n";
+              // });
+              return value;
+            },
+          },
+          indicator: [
+            // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
+          ],
+        },
+        // 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: "rgba(255,0,0,0)", // 图表背景的颜色
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            color: "rgba(131,141,158,.1)", // 设置网格的颜色
+          },
+        },
+        series: [
+          {
+            name: "目标得分占比", // tooltip中的标题
+            type: "radar", // 表示是雷达图
+            symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
+            symbolSize: 8, // 拐点的大小
+            areaStyle: {
+              normal: {
+                width: 1,
+                opacity: 0.2,
+              },
+            },
+            data: [
+              {
+                // 设置各个指标原始值
+                value: [],
+                // 设置区域边框和区域的颜色
+                itemStyle: {
+                  normal: {
+                    color: "#58a5e6",
+                    lineStyle: {
+                      color: "#58a5e6",
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    getInfo() {
+      this.setChart();
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        if (this.randarJson.length) {
+          const chartObj = this.$echarts.init(
+            //劳动课程
+            this.$el.querySelector("#charts_canvas")
+          );
+          let radarOption = JSON.parse(JSON.stringify(this.option));
+          for (var i = 0; i < this.randarJson.length; i++) {
+            radarOption.radar.indicator.push({
+              name: this.randarJson[i].target,
+              max: 5,
+            });
+            radarOption.series[0].data[0].value.push(
+              (this.randarJson[i].value / this.randarJson[i].count).toFixed(1)
+            );
+          }
+
+          this.chartObj = chartObj;
+          this.chartObj.setOption(radarOption);
+        }
+      });
+      let _this = this;
+      window.addEventListener("resize", () => {
+        if (_this.chartObj) {
+          _this.chartObj.resize();
+        }
+      });
+    },
+  },
+  watch: {
+    userid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getInfo();
+    });
+  },
+};
 </script>
 
 <style scoped>
-
 </style>