#

src/components/pages/kindStudentEva/test/component/radar.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        ref="chartContainer"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    workNumList: {
+      type: Array
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+  mounted() {
+    // 假设已经在Vue上挂载了echarts实例，命名为this.$echarts
+    const chart = this.$echarts.init(this.$refs.chartContainer);
+
+    // 数据示例
+    const dataSeries = [
+      {
+        name: "Series 1",
+        data: [
+          { name: "Category 1", value: 80 },
+          { name: "Category 2", value: 50 },
+          { name: "Category 3", value: 60 },
+          { name: "Category 4", value: 70 },
+          { name: "Category 5", value: 90 }
+        ],
+        lineStyle: {
+          width: 2,
+          color: "#0080FF"
+        }
+      },
+      {
+        name: "Series 2",
+        data: [
+          { name: "Category 1", value: 60 },
+          { name: "Category 2", value: 70 },
+          { name: "Category 3", value: 80 },
+          { name: "Category 4", value: 50 },
+          { name: "Category 5", value: 70 }
+        ],
+        lineStyle: {
+          width: 2,
+          color: "#FF0000"
+        }
+      },
+      {
+        name: "Series 3",
+        data: [
+          { name: "Category 1", value: 20 },
+          { name: "Category 2", value: 20 },
+          { name: "Category 3", value: 20 },
+          { name: "Category 4", value: 20 },
+          { name: "Category 5", value: 20 }
+        ],
+        lineStyle: {
+          width: 2,
+          color: "green"
+        }
+      }
+    ];
+
+    // 配置选项
+    const option = {
+      legend: {
+        data: dataSeries.map(series => series.name)
+      },
+      radar: {
+        indicator: dataSeries[0].data.map(item => ({
+          text: item.name,
+          max: 100
+        }))
+      },
+      series: dataSeries.map(series => ({
+        name: series.name,
+        type: "radar",
+        data: [
+          {
+            value: series.data.map(item => item.value),
+            areaStyle: {
+              opacity: 0.5
+            },
+            lineStyle: series.lineStyle,
+            label: {
+              show: true,
+              formatter: "{c}",
+              fontSize: 12,
+              color: "#000"
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 14
+              }
+            }
+          }
+        ]
+      }))
+    };
+
+    // 设置选项并渲染雷达图
+    chart.setOption(option);
+  }
+};
+</script>
+
+<style scoped>
+.data_body {
+  height: 100%;
+  position: relative;
+  border-radius: 5px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 100%;
+}
+</style>

src/components/pages/kindStudentEva/test/report.vue

@@ -29,8 +29,8 @@
           <div>综合评价:</div>
           <div class="txt">表现优异，再接再厉!</div>
         </div>
-        <div>
-          <!-- <radarmap></radarmap> -->
+        <div class="radarCss">
+          <radar></radar>
         </div>
       </div>
       <div></div>
@@ -39,11 +39,11 @@
 </template>
 
 <script>
-// import radarmap from "./component/radarmap";
+import radar from "./component/radar.vue";
 export default {
-  // components: {
-  //   radarmap
-  // },
+  components: {
+    radar
+  },
   data() {
     return {
       options: [
@@ -55,9 +55,24 @@ export default {
       value: ""
     };
   },
-  methods: {},
+  methods: {
+    getData(){
+      let params = { 
+        uid:this.$route.query.suid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectMapStuScore", params)
+        .then(res => {
+          console.log(res);
+          let data=res.data[0][0];
+          console.log(JSON.parse(data.json));
+          // console.log(JSON.s);
+          // this.$emit("selectData");
+        });
+    }
+  },
   mounted() {
-    // this.eChartsData()
+    this.getData()
   },
   created() {}
 };
@@ -121,4 +136,8 @@ export default {
   box-sizing: border-box;
   padding: 0 15px;
 }
+.radarCss{
+  width: 400px;
+  height: 400px;
+}
 </style>