chore: :hammer: 区域级看板曲线图显示tooltip

src/api/areaboard/types.ts

@@ -31,4 +31,5 @@ export interface AreaLineData {
   afterHeight: number; //训练后期全体学员高专注占比平均值
   afterNum: number[]; // 训练后区间人数
   curve: number[]; //整体变化曲线
+  num: number[]; //整体变化曲线对应人数
 }

src/components/Charts/LineChart.vue

@@ -28,12 +28,20 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  //[20, 30, 50, 78, 53, 47, 60,30, 50, 78, 53, 47, 60,30, 50, 78, 53, 47, 60]
-  data: {
+  //[[20, 30, 50, 78, 53, 47, 60,30, 50, 78, 53, 47, 60,30, 50, 78, 53, 47, 60],[人数]]
+  dataSets: {
     type: Array,
     default: [] as Array<number>,
   },
 });
+const tipFormatter = (params: any) => {
+  const num = <number[]>props.dataSets?.[1];
+  const label = [];
+  label.push(params.marker + "第" + params.name + "次");
+  label.push("人数：" + (num[params.dataIndex] || ""));
+  label.push("均值：" + params.value);
+  return label.join("<br>");
+};
 /**
  * 配置项
  */
@@ -44,6 +52,13 @@ const options = {
     x2: "12%",
     y2: "12%",
   },
+  tooltip: {
+    show: true,
+    trigger: "item",
+    extraCssText: "text-align:left",
+    transitionDuration: 0, //防止鼠标移入时页面出现抖动
+    formatter: tipFormatter,
+  },
   xAxis: {
     type: "category",
     data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
@@ -86,7 +101,7 @@ const options = {
   },
   series: [
     {
-      data: props.data,
+      data: props.dataSets?.[0] || [],
       type: "line",
       symbol: "circle",
       symbolSize: 10,

src/views/areaboard/index.vue

@@ -131,6 +131,7 @@ const lineStatus = ref(false);
 const lineMessage = ref("加载中...");
 const lineChartData = ref<AreaLineData>();
 const averageData = ref<number[][]>();
+const curveData = ref<number[][]>();
 async function getLineChartData(params: AreaParams) {
   lineStatus.value = false;
   getAreaBoardLines(params)
@@ -140,6 +141,10 @@ async function getLineChartData(params: AreaParams) {
       averageData.value = [];
       averageData.value?.push(lineChartData.value?.frontNum || []);
       averageData.value?.push(lineChartData.value?.afterNum || []);
+      // 曲线图
+      curveData.value = [];
+      curveData.value?.push(lineChartData.value?.curve || []);
+      curveData.value?.push(lineChartData.value?.num || []);
       lineStatus.value = true;
     })
     .catch((error) => {
@@ -309,7 +314,12 @@ onMounted(() => {
           <div class="charts-item">
             <p class="title">样本每次训练专注力评分均值整体变化曲线</p>
             <template v-if="lineStatus">
-              <line-chart id="lineChart1" :data="lineChartData?.curve" height="558px" width="100%" />
+              <line-chart
+                id="lineChart1"
+                :key="curveData?.toString()"
+                :data-sets="curveData || [[], []]"
+                height="558px"
+                width="100%" />
             </template>
             <div v-else class="empty">
               <img src="../../assets/empty.png" alt="数据为空" />