build: 图表配置

src/views/base-charts/RadarChart.vue

@@ -1,138 +0,0 @@
-<!-- 五维雷达图 -->
-<template>
-  <div :id="id" :class="className" :style="{ height, width }" />
-</template>
-
-<script setup lang="ts">
-import * as echarts from "echarts";
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: "radarChart",
-    required: true,
-  },
-  className: {
-    type: String,
-    default: "",
-  },
-  width: {
-    type: String,
-    default: "160px",
-  },
-  height: {
-    type: String,
-    default: "160px",
-  },
-  color: {
-    type: String,
-    default: "#2f539b",
-  },
-  bgColor: {
-    type: String,
-    default: "#e6e8f9",
-  },
-  beforeData: {
-    type: String,
-    default: "0,0,0,0,0",
-    required: true,
-  },
-  afterData: {
-    type: String,
-    default: "0,0,0,0,0",
-    required: true,
-  },
-});
-
-const options = {
-  title: {
-    text: "5D脑电数据模型",
-    left: "5%",
-    top: "5%",
-    textStyle: {
-      fontSize: 18,
-      fontWeight: "normal",
-      color: "#09132e",
-    },
-  },
-  color: ["#937dff", "#ffb72d"],
-  legend: {
-    right: "5%",
-    top: "5%",
-    data: [
-      { name: "训练前", icon: "circle" },
-      { name: "训练后", icon: "circle" },
-    ],
-    textStyle: {
-      fontSize: 15,
-    },
-  },
-  radar: {
-    radius: "55%",
-    center: ["50%", "56%"],
-    indicator: [
-      { name: "专注力平均值", max: 100 },
-      { name: "高专注占比", max: 100 },
-      { name: "专注唤醒效率", max: 100 },
-      { name: "整体和谐度", max: 100 },
-      { name: "专注力稳定度", max: 100 },
-    ],
-    axisName: {
-      color: "#4284f2",
-      fontSize: 15,
-    },
-  },
-  series: [
-    {
-      name: "训练前 vs 训练后",
-      type: "radar",
-      symbolSize: 8,
-      data: [
-        {
-          value: props.beforeData?.split(","),
-          name: "训练前",
-          label: {
-            show: true,
-            position: "right",
-            color: "#937dff",
-            fontSize: 12,
-            formatter: function (params) {
-              return params.value;
-            },
-          },
-          areaStyle: {
-            color: "rgba(147, 125, 255, .8)",
-          },
-        },
-        {
-          value: props.afterData?.split(","),
-          name: "训练后",
-          label: {
-            show: true,
-            position: "right",
-            color: "#ffb72d",
-            fontSize: 15,
-            formatter: function (params) {
-              return params.value;
-            },
-          },
-          areaStyle: {
-            color: "rgba(255, 183, 45, .5)",
-          },
-        },
-      ],
-    },
-  ],
-};
-
-onMounted(() => {
-  const chart = echarts.init(
-    document.getElementById(<string>props.id) as HTMLDivElement
-  );
-  chart.setOption(options);
-
-  window.addEventListener("resize", () => {
-    chart.resize();
-  });
-});
-</script>

src/views/base-charts/RadarSingle.vue

@@ -1,197 +0,0 @@
-<!-- 五维雷达图 -->
-<template>
-  <div :id="id" :class="className" :style="{ height, width }" />
-</template>
-
-<script setup lang="ts">
-import * as echarts from "echarts";
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: "radarSingle",
-    required: true,
-  },
-  className: {
-    type: String,
-    default: "",
-  },
-  width: {
-    type: String,
-    default: "160px",
-  },
-  height: {
-    type: String,
-    default: "160px",
-  },
-  color: {
-    type: String,
-    default: "#2f539b",
-  },
-  bgColor: {
-    type: String,
-    default: "#e6e8f9",
-  },
-  beforeData: {
-    type: String,
-    default: "0,0,0,0,0",
-    required: true,
-  },
-  afterData: {
-    type: String,
-    default: "0,0,0,0,0",
-    required: true,
-  },
-});
-function test(params) {
-  let tag = "";
-  let tagType = "";
-  if (params.dimensionIndex == 0) {
-    // 专注力平均值
-    if (params.value > 62.82) {
-      tag = "优秀";
-      tagType = "t1";
-    } else if (params.value <= 62.82 && params.value > 55.49) {
-      tag = "良好";
-      tagType = "t2";
-    } else if (params.value <= 55.49 && params.value > 48.91) {
-      tag = "轻度不足";
-      tagType = 2;
-    } else if (params.value <= 48.91 && params.value > 41.58) {
-      tag = "中等不足";
-    } else {
-      tag = "重度不足";
-    }
-  }
-  if (params.dimensionIndex == 1) {
-    // 高专注占比
-    if (params.value > 62.82) {
-      tag = "优秀";
-    } else if (params.value <= 62.82 && params.value > 55.49) {
-      tag = "良好";
-    } else if (params.value <= 55.49 && params.value > 48.91) {
-      tag = "轻度不足";
-    } else if (params.value <= 48.91 && params.value > 41.58) {
-      tag = "中等不足";
-    } else {
-      tag = "重度不足";
-    }
-  }
-  console.log(params.dimensionIndex);
-  return ["{title|" + params.value + "}", "{flag|" + tag + "}"].join("");
-}
-const options = {
-  color: ["#937dff", "#ffb72d"],
-  legend: {
-    right: "5%",
-    top: "5%",
-    data: [
-      { name: "训练前", icon: "circle" },
-      { name: "训练后", icon: "circle" },
-    ],
-    textStyle: {
-      fontSize: 15,
-    },
-  },
-  radar: {
-    radius: "50%",
-    center: ["50%", "56%"],
-    indicator: [
-      { name: "专注力平均值", max: 100 },
-      { name: "高专注占比", max: 100 },
-      { name: "专注唤醒效率", max: 100 },
-      { name: "整体和谐度", max: 100 },
-      { name: "专注力稳定度", max: 100 },
-    ],
-    axisName: {
-      color: "#2456a3",
-      fontSize: 15,
-    },
-  },
-  series: [
-    {
-      name: "训练前 vs 训练后",
-      type: "radar",
-      symbolSize: 8,
-      data: [
-        {
-          value: props.beforeData?.split(","),
-          name: "训练前",
-          label: {
-            show: true,
-            position: "right",
-            color: "#937dff",
-            fontSize: 12,
-            formatter: function (params) {
-              return params.value > 0 ? params.value : "";
-            },
-          },
-          areaStyle: {
-            color: "rgba(147, 125, 255, .8)",
-          },
-        },
-        {
-          value: props.afterData?.split(","),
-          name: "训练后",
-          label: {
-            show: true,
-            // 在文本中，可以对部分文本采用 rich 中定义样式。
-            // 这里需要在文本中使用标记符号：
-            // `{styleName|text content text content}` 标记样式名。
-            // 注意，换行仍是使用 '\n'。
-            // formatter: (a, b) => {
-            // 	i++;
-            // 	return `{title|${a}}\n{flag|${params[i]}}`
-            // }
-            formatter: function (params) {
-              return test(params);
-            },
-            rich: {
-              t0: { color: "#247eff" },
-              t1: {
-                backgroundColor: "#03c5ec",
-                padding: [2, 10, 2, 10],
-                borderRadius: 5,
-              },
-              t2: {
-                backgroundColor: "#53be07",
-                padding: [2, 10, 2, 10],
-                borderRadius: 5,
-              },
-              t3: {
-                backgroundColor: "#edcb00",
-                padding: [2, 5, 2, 5],
-                borderRadius: 5,
-              },
-              t4: {
-                backgroundColor: "#ff9f29",
-                padding: [2, 5, 2, 5],
-                borderRadius: 5,
-              },
-              t5: {
-                backgroundColor: "#f45028",
-                padding: [2, 5, 2, 5],
-                borderRadius: 5,
-              },
-            },
-          },
-          areaStyle: {
-            color: "rgba(255, 183, 45, .5)",
-          },
-        },
-      ],
-    },
-  ],
-};
-
-onMounted(() => {
-  const chart = echarts.init(
-    document.getElementById(<string>props.id) as HTMLDivElement
-  );
-  chart.setOption(options);
-
-  window.addEventListener("resize", () => {
-    chart.resize();
-  });
-});
-</script>

src/views/base-charts/DoubleChart.vue → src/views/charts-components/DoubleChart.vue

@@ -61,7 +61,7 @@ const options = {
       colorBy: "series",
       itemStyle: {
         color: props.color,
-        borderColor: "#fff",
+        borderColor: "#ffffff",
         borderWidth: 10,
       },
       label: { show: false },

src/views/charts-components/FocusBarChart.vue

@@ -0,0 +1,90 @@
+<!--  专注力四维柱状图 -->
+<template>
+	<div :id="id" :class="className" :style="{ height, width }" />
+</template>
+
+<script setup lang="ts">
+import * as echarts from "echarts";
+
+const props = defineProps({
+	id: {
+		type: String,
+		default: "FocusBarChart",
+		required: true,
+	},
+	className: {
+		type: String,
+		default: "chart",
+	},
+	width: {
+		type: String,
+		default: "400px",
+	},
+	height: {
+		type: String,
+		default: "400px",
+	},
+	title: {
+		type: String,
+		default: "",
+	},
+});
+
+/**
+ * 配置项
+ */
+const options = {
+	grid: {
+		left: "5%",
+		right: "5%",
+		top: "8%",
+		containLabel: true,
+	},
+	xAxis: [
+		{
+			type: "value",
+			show: false,
+			min: 0,
+			max: 10,
+		},
+	],
+	yAxis: [
+		{
+			type: "category",
+			data: ["分配性", "抗干扰性", "接受性", "持续性"],
+			axisLine: {
+				lineStyle:{
+					color: "#00449b",
+				}
+			},
+			axisTick: {
+				show: false,
+			},
+		},
+	],
+	series: [
+		{
+			name: '首次检测',
+			type: 'bar',
+			data: [3.8, 4.7, 2.5, 5.0]
+		},
+		{
+			name: '最近检测',
+			type: 'bar',
+			data: [7.4, 8.3, 6.5, 9.0]
+		}
+	]
+};
+
+onMounted(() => {
+	// 图表初始化
+	const chart = echarts.init(
+		document.getElementById(<string>props.id) as HTMLDivElement
+	);
+	chart.setOption(options);
+	// 大小自适应
+	window.addEventListener("resize", () => {
+		chart.resize();
+	});
+});
+</script>

src/views/base-charts/LiquidChart.vue → src/views/charts-components/LiquidChart.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   },
   className: {
     type: String,
-    default: "",
+    default: "chart",
   },
   width: {
     type: String,

src/views/base-charts/BarChart.vue → src/views/charts-components/PercentBarChart.vue

@@ -1,4 +1,4 @@
-<!--  柱状图 -->
+<!--  评分占比柱状图 -->
 <template>
   <div :id="id" :class="className" :style="{ height, width }" />
 </template>
@@ -9,12 +9,12 @@ import * as echarts from "echarts";
 const props = defineProps({
   id: {
     type: String,
-    default: "barChart",
+    default: "percentBarChart",
     required: true,
   },
   className: {
     type: String,
-    default: "",
+    default: "chart",
   },
   width: {
     type: String,
@@ -28,25 +28,44 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  percentData: {
-    type: String,
-    default: "0,0,0,0,0",
-    required: true,
-  },
-  numberData: {
-    type: String,
-    default: "0,0,0,0,0",
-    required: true,
-  },
+	// percent:[5,5,65,10,10]
+	percent: {
+		type: Array,
+		default: [],
+	},
+	// data:[1,2,13,2,2]
+	data: {
+		type: Array,
+		default: [],
+	},
 });
-function showText(index): String {
-  return (
-    props.numberData?.split(",")[index] +
-    "人 (" +
-    props.percentData?.split(",")[index] +
-    "%)"
-  );
+
+const labelFormatter = (params) =>{
+	// 显示人数 加 百分比
+	console.log(params)
+	if (params.value > 0) {
+		return (props.data?.[params.dataIndex] +
+			"人 (" +
+				params.value +
+			"%)");
+	} else {
+		return "";
+	}
 }
+const colorFormatter = function (params) {
+	// 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+	const colorList = [
+		"#68cfff",
+		"#688fff",
+		"#b890ef",
+		"#ee7a66",
+		"#f6c04c",
+	];
+	return colorList[params.dataIndex];
+};
+/**
+ * 配置项
+ */
 const options = {
   title: {
     text: props.title,
@@ -91,31 +110,19 @@ const options = {
   ],
   series: [
     {
-      data: props.percentData?.split(","),
+      data: props.percent,
       type: "bar",
       label: {
         show: true,
         position: "right",
-        formatter(params) {
-          return params.value == 0 ? "" : showText(params.dataIndex);
-        },
+				formatter: labelFormatter,
       },
       showBackground: true,
       backgroundStyle: {
         color: "#f2f2fb",
       },
       itemStyle: {
-        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
-        color: function (params) {
-          const colorList = [
-            "#68cfff",
-            "#688fff",
-            "#b890ef",
-            "#ee7a66",
-            "#f6c04c",
-          ];
-          return colorList[params.dataIndex];
-        },
+        color: colorFormatter,
       },
       barCategoryGap: "50%",
     },

src/views/base-charts/PieChart.vue → src/views/charts-components/PieChart.vue

@@ -22,21 +22,21 @@ const props = defineProps({
   },
   height: {
     type: String,
-    default: "400px",
+    default: "300px",
   },
   title: {
     type: String,
     default: "",
   },
-  data: {
-    type: String,
-    default: "1,0,0,0,0",
-    required: true,
-  },
+	// data:[78,88,65,82,65]
+	data: {
+		type: Array,
+		default: [],
+	},
 });
-function getDataValue(i): number {
-  return props.data?.split(",")[i];
-}
+/**
+ * 配置项
+ */
 const options = {
   title: {
     text: props.title,
@@ -68,11 +68,11 @@ const options = {
       },
       center: ["50%", "55%"],
       data: [
-        { value: getDataValue(0), name: "0-20" },
-        { value: getDataValue(1), name: "21-40" },
-        { value: getDataValue(2), name: "41-60" },
-        { value: getDataValue(3), name: "61-80" },
-        { value: getDataValue(4), name: "81-100" },
+        { value: props.data?.[0], name: "0-20" },
+        { value: props.data?.[1], name: "21-40" },
+        { value: props.data?.[2], name: "41-60" },
+        { value: props.data?.[3], name: "61-80" },
+        { value: props.data?.[4], name: "81-100" },
       ],
     },
   ],

src/views/charts-components/RadarChart.vue

@@ -0,0 +1,252 @@
+<!-- 五维雷达图 -->
+<template>
+	<div :id="id" :class="className" :style="{ height, width }" />
+</template>
+
+<script setup lang="ts">
+import * as echarts from "echarts";
+
+const props = defineProps({
+	id: {
+		type: String,
+		default: "radarChart",
+		required: true,
+	},
+	className: {
+		type: String,
+		default: "chart",
+	},
+	width: {
+		type: String,
+		default: "400px",
+	},
+	height: {
+		type: String,
+		default: "300px",
+	},
+	// dataSets:[[28,38,45,32,25],[78,88,65,82,65]]
+	dataSets: {
+		type: Array,
+		default: [],
+	},
+	// data:[78,88,65,82,65]
+	data: {
+		type: Array,
+		default: [],
+	},
+	tag: {
+		type: Boolean,
+		default: false,
+	},
+});
+// 是否有对比数据
+const isCompare = props.dataSets?.length > 1;
+let defaultData;
+let beforeData;
+if (isCompare) {
+	defaultData = props.dataSets?.[1];
+	beforeData = props.dataSets?.[0];
+} else {
+	defaultData = props.data;
+}
+
+const globalColor = {
+	default: "#ffb72d",
+	before: "#937dff",
+	font: "#063b79",
+	white: "#ffffff",
+	red: "#F45028",
+	orange: "#FF9F29",
+	yellow: "#EDCB00",
+	green: "#53BE07",
+	blue: "#03C5EC"
+};
+/**
+ * 指示器 及 状态tag 自定义rich
+ */
+const tagBaseRich = (bgColor) => {
+	return {
+		color: globalColor.white,
+		padding: [4, 10, 4, 10],
+		borderRadius: 10,
+		backgroundColor: bgColor
+	};
+};
+const indicatorRich = {
+	tit:{
+		color: globalColor.font,
+		fontSize: 14,
+		padding: 5
+	},
+	red: tagBaseRich(globalColor.red),
+	orange: tagBaseRich(globalColor.orange),
+	yellow: tagBaseRich(globalColor.yellow),
+	green: tagBaseRich(globalColor.green),
+	blue: tagBaseRich(globalColor.blue)
+}
+const indicatorFormatter = (name, indicator) => {
+	if (!props.tag) {
+		return `{tit|${name}}`;
+	}
+	const {star} = indicator;
+	const label = [];
+	label.push(`{tit|${name}}`);
+	if (star === 1) {
+		label.push(`{red|重度不足}`);
+	}
+	if (star === 2) {
+		label.push("{orange|中等不足}");
+	}
+	if (star === 3) {
+		label.push("{yellow|轻度不足}");
+	}
+	if (star === 4) {
+		label.push("{green|良好}");
+	}
+	if (star === 5) {
+		label.push("{blue|优秀}");
+	}
+	return label.join(`\n`);
+}
+
+/**
+ * 在图中定位每个数据的位置
+ */
+const positionLabelData = (data, idx)=>{
+	const labelValue = [0,0,0,0,0];
+	labelValue[idx] = data[idx];
+	// idx = 0,1,2,3,4 对应 top,left,left,right,right
+	let pos = "bottom";
+	if(idx=== 0) {
+		pos = "top";
+	}
+	if(idx === 1 || idx === 2) {
+		pos = "left";
+	}
+	if(idx === 3 || idx === 4) {
+		pos = "right";
+	}
+	return {
+		value: labelValue,
+		label: {
+			show: true,
+			fontSize: 12,
+			position: pos,
+			formatter:  (params) => {
+				return params.value > 0 ? params.value : "";
+			}
+		}
+	};
+}
+const positionFormatter = (data) => {
+	const result = [];
+	for (let idx in data) {
+		result.push(positionLabelData(data, idx*1));
+	}
+	return result;
+}
+/**
+ * 配置项
+ */
+const options = {
+	color: [globalColor.default],
+	legend: {
+		right: "5%",
+		top: "5%",
+		data: [{ name: "训练前", icon: "circle" }, { name: "训练后", icon: "circle" }],
+		textStyle: { fontSize: 12},
+		show: false
+	},
+	radar: {
+		radius: "50%",
+		center: ["50%", "55%"],
+		// 指示器 及 状态tag
+		indicator: [
+			{ name: "专注力平均值", max: 100, star: 1},
+			{ name: "高专注占比", max: 100, star: 2},
+			{ name: "专注唤醒效率", max: 100, star: 3},
+			{ name: "整体和谐度", max: 100, star: 4},
+			{ name: "专注力稳定度", max: 100, star: 5},
+		],
+		axisName: {
+			rich: indicatorRich,
+			formatter: indicatorFormatter,
+		},
+	},
+	series: [
+		// 数据分散定位
+		{
+			name: "训练后",
+			type: "radar",
+			symbolSize: 0,
+			label: {
+				show: true,
+				color: globalColor.default,
+				fontSize: 16,
+				distance: 5
+			},
+			lineStyle:{width:0},
+			data:positionFormatter(defaultData)
+		},
+		// 覆盖区域的样式
+		{
+			name: "训练前 vs 训练后",
+			type: "radar",
+			symbolSize: 5,
+			data: [
+				{
+					value: defaultData,
+					name: "训练后",
+					lineStyle:{color: globalColor.default},
+					itemStyle:{color: globalColor.default},
+					areaStyle: {
+						color: globalColor.default,
+						opacity: .5
+					},
+				},
+			],
+		},
+	]
+};
+const getOptions = () => {
+	if(isCompare){
+		options.color = [globalColor.before, globalColor.default];
+		options.legend.show = true;
+		options.series[1].data.unshift({
+			value: beforeData,
+			name: "训练前",
+			lineStyle:{color: globalColor.before},
+			itemStyle:{color: globalColor.before},
+			areaStyle: {
+				color: globalColor.before,
+				opacity: .5
+			},
+		});
+		options.series.unshift({
+			name: "训练前",
+			type: "radar",
+			symbolSize: 0,
+			label: {
+				show: true,
+				color: globalColor.before,
+				fontSize: 16,
+				//distance: 5
+			},
+			lineStyle:{width:0},
+			data:positionFormatter(beforeData)
+		});
+	}
+	return options;
+}
+
+onMounted(() => {
+	const chart = echarts.init(
+		document.getElementById(<string>props.id) as HTMLDivElement
+	);
+	chart.setOption(getOptions());
+
+	window.addEventListener("resize", () => {
+		chart.resize();
+	});
+});
+</script>

src/views/dashboard/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import DataCard from "@/views/dashboard/components/DataCard.vue";
-import LiquidChart from "@/views/base-charts/LiquidChart.vue";
-import CircleChart from "@/views/base-charts/CircleChart.vue";
-import BarChart from "@/views/base-charts/BarChart.vue";
+import LiquidChart from "@/views/charts-components/LiquidChart.vue";
+import CircleChart from "@/views/charts-components/CircleChart.vue";
+import PercentBarChart from "@/views/charts-components/PercentBarChart.vue";
 defineOptions({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: "DashboardIndex",
@@ -63,6 +63,10 @@ const dataStatus = ref(1);
 onMounted(() => {
   //queryClassList();
 });
+
+
+const percentData = [5,5,65,10,10];
+const percentNumber = [1,2,13,2,2];
 </script>
 
 <template>
@@ -176,26 +180,26 @@ onMounted(() => {
           <el-row justify="space-between">
             <el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="12">
               <div class="bar">
-                <BarChart
+                <PercentBarChart
                   id="barChart1"
                   width="400px"
                   height="500px"
                   title="全体学员初期训练专注力评分占比"
-                  percent-data="5,5,65,10,10"
-                  number-data="1,2,13,2,2"
+                  :percent="percentData"
+                  :data="percentNumber"
                   class="chart"
                 />
               </div>
             </el-col>
             <el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="12">
               <div class="bar">
-                <BarChart
+                <PercentBarChart
                   id="barChart2"
                   width="400px"
                   height="500px"
                   title="全体学员训练近期专注力评分平均占比"
-                  percent-data="10,25,65,30,10"
-                  number-data="1,2,13,6,10"
+									:percent="percentData"
+									:data="percentNumber"
                   class="chart"
                 />
               </div>

src/views/evaluation/index.vue

@@ -2,7 +2,8 @@
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
 import EvaluateCard from "@/views/evaluation/components/EvaluateCard.vue";
-import RadarSingle from "@/views/base-charts/RadarSingle.vue";
+import RadarChart from "@/views/charts-components/RadarChart.vue";
+import FocusBarChart from "@/views/charts-components/FocusBarChart.vue";
 
 defineOptions({
   name: "EvaluateIndex",
@@ -26,6 +27,10 @@ const focusCount = 50;
 const trainingCount = 200;
 
 let studentInfo = ref("");
+
+const radarTag = true;
+const data = ref([78,88,65,82,65]);
+const dataSets = ref([[28,38,45,32,25],[78,88,65,82,65]]);
 </script>
 
 <template>
@@ -64,21 +69,56 @@ let studentInfo = ref("");
         <el-row :gutter="10">
           <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
             <div class="box-card">
-              <RadarSingle
-                id="radarChart"
-                after-data="78,88,65,82,65"
-                width="350px"
+              <RadarChart
+                id="radarChart1"
+								:dataSets="dataSets"
+								:tag="radarTag"
+                width="400px"
                 height="300px"
                 class="chart"
               />
+							<div class="info center">5D脑电数据模型</div>
             </div>
           </el-col>
           <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
-            <div class="box-card"></div>
+            <div class="box-card">
+							<div class="info">专注力四维分析</div>
+						</div>
           </el-col>
           <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8"></el-col>
         </el-row>
         <div class="title">脑电检测分析</div>
+				<el-row :gutter="10">
+					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
+						<div class="box-card">
+							<RadarChart
+										id="radarChart2"
+										:data="data"
+										width="400px"
+										height="300px"
+										class="chart"
+							/>
+							<div class="info center">5D脑电数据模型</div>
+						</div>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
+						<div class="box-card">
+							<FocusBarChart
+										id="focusBarChart1"
+										:data="data"
+										width="400px"
+										height="300px"
+							/>
+							<div class="info">3维放松度分析</div>
+						</div>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
+						<div class="box-card">
+
+							<div class="info">脑电评估检测指数分析看板</div>
+						</div>
+					</el-col>
+				</el-row>
       </div>
     </div>
   </div>
@@ -106,6 +146,7 @@ let studentInfo = ref("");
 .student-search {
   box-sizing: border-box;
   width: 342px;
+  min-height: 100%;
   border: 1px solid #e6e8eb;
   border-radius: 30px;
   padding-top: 34px;
@@ -169,9 +210,21 @@ let studentInfo = ref("");
     color: #23283c;
   }
   .box-card {
+		height: 338px;
     box-sizing: border-box;
     background: #f3f6fd;
     border-radius: 20px;
+		overflow: hidden;
+		.info{
+			height: 38px;
+			line-height: 38px;
+			font-size: 14px;
+			background: #4284f2;
+			color: #ffffff;
+			&.center{
+				text-align: center;
+			}
+		}
   }
 }
 </style>

src/views/student/result.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import PieChart from "@/views/base-charts/PieChart.vue";
-
+import PieChart from "@/views/charts-components/PieChart.vue";
+import RadarChart from "@/views/charts-components/RadarChart.vue";
+import CircleChart from "@/views/charts-components/CircleChart.vue";
+import DoubleChart from "@/views/charts-components/DoubleChart.vue";
+import SvgIcon from "@/components/SvgIcon/index.vue";
 defineOptions({
   name: "StudentResult",
   inheritAttrs: false,
 });
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
-import RadarChart from "@/views/base-charts/RadarChart.vue";
-import CircleChart from "@/views/base-charts/CircleChart.vue";
-import DoubleChart from "@/views/base-charts/DoubleChart.vue";
-import SvgIcon from "@/components/SvgIcon/index.vue";
 const userStore = useUserStore();
 watch(
   () => userStore.schoolId,
@@ -18,6 +17,9 @@ watch(
     console.log(newValue, oldValue);
   }
 );
+
+const dataSets = ref([[15,5,25,36,45],[78,88,65,82,65]]);
+const pieData = ref([12,18,20,28,22]);
 </script>
 
 <template>
@@ -46,10 +48,10 @@ watch(
     <el-row class="result-chart" :gutter="15">
       <el-col :xs="24" :sm="7" :md="7">
         <div class="box-card">
+					<div class="chart-title">5D脑电数据模型</div>
           <RadarChart
             id="radarChart"
-            before-data="15,5,25,36,45"
-            after-data="78,88,65,82,65"
+						:dataSets="dataSets"
             width="450px"
             height="350px"
             class="chart"
@@ -94,7 +96,7 @@ watch(
               <div class="charts last">
                 <PieChart
                   id="pieChart"
-                  data="12,18,20,28,22"
+                  :data="pieData"
                   width="400px"
                   height="350px"
                   class="chart"