add chart

src/features/allAnalysis/ScoreRate.vue

@@ -101,6 +101,7 @@ import {
 import EventBus from "@/plugins/eventBus";
 import { message } from "ant-design-vue";
 import { RANGE_POINT_TYPE } from "@/constants/constants";
+import { EChartsOption } from "echarts/types/dist/shared";
 
 let activeKey = $ref(["0"]);
 
@@ -275,7 +276,7 @@ function segementsLine(course: any) {
   return {
     title: {
       text: "频率",
-      left: "center",
+      left: "left",
     },
     xAxis: {
       type: "category",
@@ -291,7 +292,7 @@ function segementsLine(course: any) {
         smooth: true,
       },
     ],
-  };
+  } as EChartsOption;
 }
 
 function rangeSegementsLine(course: any) {
@@ -299,7 +300,7 @@ function rangeSegementsLine(course: any) {
   return {
     title: {
       text: "频率",
-      left: "center",
+      left: "left",
     },
     xAxis: {
       type: "category",
@@ -315,7 +316,7 @@ function rangeSegementsLine(course: any) {
         smooth: true,
       },
     ],
-  };
+  } as EChartsOption;
 }
 </script>
 

src/features/paperAnalysis/QuestionBianPai.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tw-flex">
+  <div class="tw-flex tw-gap-4" style="background-color: #e1e6f1">
     <a-table
       row-key="id"
       :columns="columns"
@@ -7,13 +7,20 @@
       :pagination="{ pageSize: 200, hideOnSinglePage: true }"
     ></a-table>
 
-    <a-button @click="openModal">说明</a-button>
+    <div class="tw-flex tw-gap-4">
+      <div style="width: 400px; height: 300px">
+        <v-chart class="chart" :option="chartOption(props.questions)" />
+      </div>
+
+      <a-button @click="openModal">说明</a-button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import EventBus from "@/plugins/eventBus";
 import { Question } from "@/types";
+import { EChartsOption } from "echarts/types/dist/shared";
 
 const props = defineProps<{ questions: Question[] }>();
 
@@ -38,4 +45,29 @@ const columns = [
 function openModal() {
   EventBus.emit("SHOW_SETTING", "DESCRIBE050");
 }
+
+function chartOption(questions: any) {
+  console.log(questions);
+  return {
+    title: {
+      text: "难度",
+      left: "left",
+    },
+    xAxis: {
+      type: "category",
+      data: questions.map((v) => v.mainNumber + "-" + v.subNumber),
+      name: "题号",
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: questions.map((v) => v.difficulty),
+        type: "line",
+        smooth: true,
+      },
+    ],
+  } as EChartsOption;
+}
 </script>