引入 echarts

package.json

@@ -18,6 +18,7 @@
     "axios-progress-bar": "^1.2.0",
     "axios-retry": "^3.2.0",
     "crypto-js": "^4.1.1",
+    "echarts": "^5.2.1",
     "js-cookie": "^3.0.1",
     "js-md5": "^0.7.3",
     "lodash-es": "^4.17.21",
@@ -28,6 +29,7 @@
     "tailwindcss": "^2.2.10",
     "ua-parser-js": "^0.7.28",
     "vue": "^3.2.14",
+    "vue-echarts": "^6.0.0",
     "vue-router": "4.0.10"
   },
   "devDependencies": {

src/features/allAnalysis/ScoreRate.vue

@@ -22,23 +22,28 @@
             <h3 class="section-title">等距（{{ scoreGap }}分）分组频数分布</h3>
             <a-button @click="openModal1">说明</a-button>
           </div>
-          <!-- TODO: 将下面的逻辑抽离到JS中，再将分段完成 -->
-          <table class="custom-table">
-            <tr>
-              <th>分数段</th>
-              <th>频数</th>
-              <th>频率（%）</th>
-              <th>累计频数</th>
-              <th>累计频数（%）</th>
-            </tr>
-            <tr v-for="(seg, index) in course.segements" :key="index">
-              <td>{{ seg[0] }}-</td>
-              <td>{{ seg[1] }}</td>
-              <td>{{ Math.round(seg[2] * 100) }}%</td>
-              <td>{{ seg[3] }}</td>
-              <td>{{ Math.round(seg[4] * 100) }}%</td>
-            </tr>
-          </table>
+          <div class="tw-flex tw-gap-4">
+            <table class="custom-table">
+              <tr>
+                <th>分数段</th>
+                <th>频数</th>
+                <th>频率（%）</th>
+                <th>累计频数</th>
+                <th>累计频数（%）</th>
+              </tr>
+              <tr v-for="(seg, index) in course.segements" :key="index">
+                <td>{{ seg[0] }}-</td>
+                <td>{{ seg[1] }}</td>
+                <td>{{ Math.round(seg[2] * 100) }}%</td>
+                <td>{{ seg[3] }}</td>
+                <td>{{ Math.round(seg[4] * 100) }}%</td>
+              </tr>
+            </table>
+
+            <div style="width: 400px; height: 300px">
+              <v-chart class="chart" :option="segementsLine(course)" />
+            </div>
+          </div>
 
           <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
             <h3 class="section-title">科目分数线分组的频数分布</h3>
@@ -49,7 +54,7 @@
               <a-button @click="openModal2">说明</a-button>
             </div>
           </div>
-          <div v-if="course.rangeConfig">
+          <div v-if="course.rangeConfig" class="tw-flex tw-gap-4">
             <table class="custom-table">
               <tr>
                 <th>分数段</th>
@@ -66,6 +71,10 @@
                 <td>{{ Math.round(seg[4] * 100) }}%</td>
               </tr>
             </table>
+
+            <div style="width: 400px; height: 300px">
+              <v-chart class="chart" :option="rangeSegementsLine(course)" />
+            </div>
           </div>
         </a-collapse-panel>
       </a-collapse>
@@ -260,6 +269,54 @@ function openModal1() {
 function openModal2() {
   EventBus.emit("SHOW_SETTING", "DESCRIBE030");
 }
+
+function segementsLine(course: any) {
+  console.log(course);
+  return {
+    title: {
+      text: "频率",
+      left: "center",
+    },
+    xAxis: {
+      type: "category",
+      data: course.segements.map((v) => v[0]),
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: course.segements.map((v) => v[1]),
+        type: "line",
+        smooth: true,
+      },
+    ],
+  };
+}
+
+function rangeSegementsLine(course: any) {
+  console.log(course);
+  return {
+    title: {
+      text: "频率",
+      left: "center",
+    },
+    xAxis: {
+      type: "category",
+      data: course.rangeSegements.map((v) => v[0]),
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: course.rangeSegements.map((v) => v[1]),
+        type: "line",
+        smooth: true,
+      },
+    ],
+  };
+}
 </script>
 
 <style scoped></style>

src/main.ts

@@ -15,6 +15,24 @@ import router from "@/router";
 import filters from "@/filters";
 // import Antd from "ant-design-vue";
 // import "ant-design-vue/dist/antd.css";
+import ECharts from "vue-echarts";
+import { use } from "echarts/core";
+
+import { CanvasRenderer } from "echarts/renderers";
+import { LineChart } from "echarts/charts";
+import {
+  GridComponent,
+  TitleComponent,
+  LegendComponent,
+} from "echarts/components";
+
+use([
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  TitleComponent,
+  LegendComponent,
+]);
 
 import { createPinia } from "pinia";
 
@@ -25,4 +43,6 @@ app.use(router);
 app.use(createPinia());
 app.config.globalProperties.$filters = filters;
 
+app.component("v-chart", ECharts);
+
 app.mount("#app");

yarn.lock

@@ -778,6 +778,14 @@ domutils@^2.5.2:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+echarts@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.nlark.com/echarts/download/echarts-5.2.1.tgz?cache=0&sync_timestamp=1632191301834&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-5.2.1.tgz#bd58ec011cd82def4a714e4038ef4b73b8417bc3"
+  integrity sha1-vVjsARzYLe9KcU5AOO9Lc7hBe8M=
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.2.1"
+
 electron-to-chromium@^1.3.857:
   version "1.3.866"
   resolved "https://registry.npmmirror.com/electron-to-chromium/download/electron-to-chromium-1.3.866.tgz#d446338f5ad6948b27a50739760e7b0b5cc5032f"
@@ -1688,6 +1696,11 @@ request-light@^0.5.4:
   resolved "https://registry.nlark.com/request-light/download/request-light-0.5.4.tgz#497a98c6d8ae49536417a5e2d7f383b934f3e38c"
   integrity sha1-SXqYxtiuSVNkF6Xi1/ODuTTz44w=
 
+resize-detector@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npm.taobao.org/resize-detector/download/resize-detector-0.3.0.tgz#fe495112e184695500a8f51e0389f15774cb1cfc"
+  integrity sha1-/klREuGEaVUAqPUeA4nxV3TLHPw=
+
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -1873,6 +1886,11 @@ token-stream@1.0.0:
   resolved "https://registry.npm.taobao.org/token-stream/download/token-stream-1.0.0.tgz#cc200eab2613f4166d27ff9afc7ca56d49df6eb4"
   integrity sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz?cache=0&sync_timestamp=1628722556410&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4=
+
 typescript@^4.4.3:
   version "4.4.3"
   resolved "https://registry.npmmirror.com/typescript/download/typescript-4.4.3.tgz?cache=0&sync_timestamp=1633937236966&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ftypescript%2Fdownload%2Ftypescript-4.4.3.tgz#bdc5407caa2b109efd4f82fe130656f977a29324"
@@ -2079,11 +2097,19 @@ vscode-vue-languageservice@^0.27.0:
     vscode-pug-languageservice "^0.27.24"
     vscode-typescript-languageservice "^0.27.25"
 
-vue-demi@*:
+vue-demi@*, vue-demi@^0.11.2:
   version "0.11.4"
   resolved "https://registry.nlark.com/vue-demi/download/vue-demi-0.11.4.tgz#6101992fe4724cf5634018a16e953f3052e94e2a"
   integrity sha1-YQGZL+RyTPVjQBihbpU/MFLpTio=
 
+vue-echarts@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.nlark.com/vue-echarts/download/vue-echarts-6.0.0.tgz?cache=0&sync_timestamp=1627907508392&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-echarts%2Fdownload%2Fvue-echarts-6.0.0.tgz#480263fc6ed2125b886bb1b7f05bf9273edee552"
+  integrity sha1-SAJj/G7SEluIa7G38Fv5Jz7e5VI=
+  dependencies:
+    resize-detector "^0.3.0"
+    vue-demi "^0.11.2"
+
 vue-router@4.0.10:
   version "4.0.10"
   resolved "https://registry.nlark.com/vue-router/download/vue-router-4.0.10.tgz?cache=0&sync_timestamp=1628495505697&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-router%2Fdownload%2Fvue-router-4.0.10.tgz#ec8fda032949b2a31d3273170f8f376e86eb52ac"
@@ -2157,3 +2183,10 @@ yaml@^1.10.0, yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.nlark.com/yaml/download/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha1-IwHF/78StGfejaIzOkWeKeeSDks=
+
+zrender@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz#5f4bbda915ba6d412b0b19dc2431beaad05417bb"
+  integrity sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=
+  dependencies:
+    tslib "2.3.0"