build: 看板图表样式2

src/views/charts-components/FocusBarChart.vue

@@ -1,90 +1,143 @@
 <!--  专注力四维柱状图 -->
 <template>
-	<div :id="id" :class="className" :style="{ height, width }" />
+  <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: "",
-	},
+  id: {
+    type: String,
+    default: "FocusBarChart",
+    required: true,
+  },
+  className: {
+    type: String,
+    default: "chart",
+  },
+  width: {
+    type: String,
+    default: "400px",
+  },
+  height: {
+    type: String,
+    default: "400px",
+  },
+  // dataSets:[[3.8, 4.7, 2.5, 5.0],[7.4, 8.3, 6.5, 9.0]]
+  dataSets: {
+    type: Array,
+    default: [] as Array<number>,
+  },
+  // star:[1,2,3,4]
+  star: {
+    type: Array,
+    default: [] as Array<number>,
+  },
 });
-
+const labelFormatter = ({ value, dataIndex }) => {
+  const star = props.star?.[dataIndex] * 1;
+  const label = [];
+  label.push(value);
+  if (star === 1) {
+    label.push("重度不足");
+  }
+  if (star === 2) {
+    label.push("轻度不足");
+  }
+  if (star === 3) {
+    label.push("中等水平");
+  }
+  if (star === 4) {
+    label.push("良好水平");
+  }
+  if (star === 5) {
+    label.push("优秀水平");
+  }
+  return label.join(" ");
+};
 /**
  * 配置项
  */
 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]
-		}
-	]
+  color: ["#f8b865", "#91cc75"],
+  tooltip: {
+    show: true,
+  },
+  grid: {
+    left: "21%",
+    right: "15%",
+    top: "10%",
+    bottom: "5%",
+  },
+  xAxis: [
+    {
+      type: "value",
+      show: false,
+      min: 0,
+      max: 10,
+    },
+  ],
+  yAxis: [
+    {
+      type: "category",
+      data: ["分配性", "抗干扰性", "接受性", "持续性"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#00449b",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#4284f2",
+          width: 2,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "首次检测",
+      type: "bar",
+      data: props.dataSets?.[0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "#ffffff",
+      },
+      label: {
+        show: true,
+        position: "right",
+        formatter: labelFormatter,
+      },
+    },
+    {
+      name: "最近检测",
+      type: "bar",
+      data: props.dataSets?.[1],
+      showBackground: true,
+      backgroundStyle: {
+        color: "#ffffff",
+      },
+      label: {
+        show: true,
+        position: "right",
+        formatter: labelFormatter,
+      },
+    },
+  ],
 };
 
 onMounted(() => {
-	// 图表初始化
-	const chart = echarts.init(
-		document.getElementById(<string>props.id) as HTMLDivElement
-	);
-	chart.setOption(options);
-	// 大小自适应
-	window.addEventListener("resize", () => {
-		chart.resize();
-	});
+  // 图表初始化
+  const chart = echarts.init(
+    document.getElementById(<string>props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+  // 大小自适应
+  window.addEventListener("resize", () => {
+    chart.resize();
+  });
 });
 </script>

src/views/charts-components/IndicatorsBarChart.vue

@@ -0,0 +1,113 @@
+<!--  脑电评估检测指数分析看板 柱状图 -->
+<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: "indicatorsBarChart",
+    required: true,
+  },
+  className: {
+    type: String,
+    default: "chart",
+  },
+  width: {
+    type: String,
+    default: "400px",
+  },
+  height: {
+    type: String,
+    default: "400px",
+  },
+  // dataSets:[[50, 60, 55, 64.5],[55, 90, 70, 82.5]]
+  dataSets: {
+    type: Array,
+    default: [] as Array<number>,
+  },
+});
+/**
+ * 配置项
+ */
+const options = {
+  color: ["#f8b865", "#91cc75"],
+  grid: {
+    left: "10%",
+    right: "8%",
+    top: "8%",
+    bottom: "15%",
+  },
+  tooltip: {
+    show: true,
+  },
+  xAxis: [
+    {
+      type: "category",
+      data: ["专注指数", "放松指数", "认知执行指数", "心情指数"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#00449b",
+        interval: 0,
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#4284f2",
+          width: 2,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      show: true,
+      min: 0,
+      max: 100,
+      offset: -5,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#4284f2",
+          width: 1,
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "首次检测",
+      type: "bar",
+      data: props.dataSets?.[0],
+      barGap: 0,
+      barCategoryGap: "50%",
+    },
+    {
+      name: "最近检测",
+      type: "bar",
+      data: props.dataSets?.[1],
+    },
+  ],
+};
+
+onMounted(() => {
+  // 图表初始化
+  const chart = echarts.init(
+    document.getElementById(<string>props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+  // 大小自适应
+  window.addEventListener("resize", () => {
+    chart.resize();
+  });
+});
+</script>

src/views/charts-components/PercentBarChart.vue

@@ -28,40 +28,31 @@ const props = defineProps({
     type: String,
     default: "",
   },
-	// percent:[5,5,65,10,10]
-	percent: {
-		type: Array,
-		default: [],
-	},
-	// data:[1,2,13,2,2]
-	data: {
-		type: Array,
-		default: [],
-	},
+  // percent:[5,5,65,10,10]
+  percent: {
+    type: Array,
+    default: [] as Array<number>,
+  },
+  // data:[1,2,13,2,2]
+  data: {
+    type: Array,
+    default: [] as Array<number>,
+  },
 });
 
-const labelFormatter = (params) =>{
-	// 显示人数 加 百分比
-	console.log(params)
-	if (params.value > 0) {
-		return (props.data?.[params.dataIndex] +
-			"人 (" +
-				params.value +
-			"%)");
-	} else {
-		return "";
-	}
-}
+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];
+  // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+  const colorList = ["#68cfff", "#688fff", "#b890ef", "#ee7a66", "#f6c04c"];
+  return colorList[params.dataIndex];
 };
 /**
  * 配置项
@@ -115,7 +106,7 @@ const options = {
       label: {
         show: true,
         position: "right",
-				formatter: labelFormatter,
+        formatter: labelFormatter,
       },
       showBackground: true,
       backgroundStyle: {

src/views/charts-components/PieChart.vue

@@ -28,11 +28,11 @@ const props = defineProps({
     type: String,
     default: "",
   },
-	// data:[78,88,65,82,65]
-	data: {
-		type: Array,
-		default: [],
-	},
+  // data:[78,88,65,82,65]
+  data: {
+    type: Array,
+    default: [] as Array<number>,
+  },
 });
 /**
  * 配置项

src/views/charts-components/RadarChart.vue

@@ -1,252 +1,255 @@
 <!-- 五维雷达图 -->
 <template>
-	<div :id="id" :class="className" :style="{ height, width }" />
+  <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,
-	},
+  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: [] as Array<number>,
+  },
+  // star:[1,2,3,4,5]
+  star: {
+    type: Array,
+    default: [] as Array<number>,
+  },
+  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];
+  defaultData = toRefs(props.dataSets?.[1]);
+  beforeData = toRefs(props.dataSets?.[0]);
 } else {
-	defaultData = props.data;
+  defaultData = toRefs(props.dataSets?.[0]);
 }
 
 const globalColor = {
-	default: "#ffb72d",
-	before: "#937dff",
-	font: "#063b79",
-	white: "#ffffff",
-	red: "#F45028",
-	orange: "#FF9F29",
-	yellow: "#EDCB00",
-	green: "#53BE07",
-	blue: "#03C5EC"
+  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
-	};
+  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)
-}
+  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`);
-}
+  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 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 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
-					},
-				},
-			],
-		},
-	]
+  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: props.star?.[0] },
+      { name: "高专注占比", max: 100, star: props.star?.[1] },
+      { name: "专注唤醒效率", max: 100, star: props.star?.[2] },
+      { name: "整体和谐度", max: 100, star: props.star?.[3] },
+      { name: "专注力稳定度", max: 100, star: props.star?.[4] },
+    ],
+    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: 0.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;
-}
+  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: 0.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());
+  const chart = echarts.init(
+    document.getElementById(<string>props.id) as HTMLDivElement
+  );
+  chart.setOption(getOptions());
 
-	window.addEventListener("resize", () => {
-		chart.resize();
-	});
+  window.addEventListener("resize", () => {
+    chart.resize();
+  });
 });
 </script>

src/views/charts-components/RelaxBarChart.vue

@@ -0,0 +1,113 @@
+<!--  3维放松度分析柱状图 -->
+<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: "relaxBarChart",
+    required: true,
+  },
+  className: {
+    type: String,
+    default: "chart",
+  },
+  width: {
+    type: String,
+    default: "400px",
+  },
+  height: {
+    type: String,
+    default: "400px",
+  },
+  // dataSets:[[50, 60, 55],[55, 90, 70]]
+  dataSets: {
+    type: Array,
+    default: [] as Array<number>,
+  },
+});
+/**
+ * 配置项
+ */
+const options = {
+  color: ["#f8b865", "#91cc75"],
+  grid: {
+    left: "10%",
+    right: "8%",
+    top: "8%",
+    bottom: "15%",
+  },
+  tooltip: {
+    show: true,
+  },
+  xAxis: [
+    {
+      type: "category",
+      data: ["放松度平均值", "深度放松占比", "放松稳定度"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#00449b",
+        interval: 0,
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#4284f2",
+          width: 2,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      show: true,
+      min: 0,
+      max: 100,
+      offset: -5,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#4284f2",
+          width: 1,
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: "首次检测",
+      type: "bar",
+      data: props.dataSets?.[0],
+      barGap: 0,
+      barCategoryGap: "62%",
+    },
+    {
+      name: "最近检测",
+      type: "bar",
+      data: props.dataSets?.[1],
+    },
+  ],
+};
+
+onMounted(() => {
+  // 图表初始化
+  const chart = echarts.init(
+    document.getElementById(<string>props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+  // 大小自适应
+  window.addEventListener("resize", () => {
+    chart.resize();
+  });
+});
+</script>

src/views/evaluation/index.vue

@@ -4,6 +4,8 @@ import { useUserStore } from "@/store/modules/user";
 import EvaluateCard from "@/views/evaluation/components/EvaluateCard.vue";
 import RadarChart from "@/views/charts-components/RadarChart.vue";
 import FocusBarChart from "@/views/charts-components/FocusBarChart.vue";
+import RelaxBarChart from "@/views/charts-components/RelaxBarChart.vue";
+import IndicatorsBarChart from "@/views/charts-components/IndicatorsBarChart.vue";
 
 defineOptions({
   name: "EvaluateIndex",
@@ -28,9 +30,31 @@ const trainingCount = 200;
 
 let studentInfo = ref("");
 
+//
+const data = ref([78, 88, 65, 82, 65]);
+// 五维雷达图
+const radarData = ref([
+  [28, 38, 45, 32, 25],
+  [78, 88, 65, 82, 65],
+]);
+const radarStar = ref([1, 2, 3, 4, 5]);
 const radarTag = true;
-const data = ref([78,88,65,82,65]);
-const dataSets = ref([[28,38,45,32,25],[78,88,65,82,65]]);
+// 专注力四维柱状图
+const focusData = ref([
+  [3.8, 4.7, 2.5, 5.0],
+  [7.4, 8.3, 6.5, 9.0],
+]);
+const focusStar = ref([1, 2, 3, 4]);
+// 3维放松度分析柱状图
+const relaxData = ref([
+  [50, 60, 55],
+  [55, 90, 70],
+]);
+// 脑电评估检测指数分析看板
+const indicatorsData = ref([
+  [50, 60, 55, 64.5],
+  [55, 90, 70, 82.5],
+]);
 </script>
 
 <template>
@@ -71,54 +95,72 @@ const dataSets = ref([[28,38,45,32,25],[78,88,65,82,65]]);
             <div class="box-card">
               <RadarChart
                 id="radarChart1"
-								:dataSets="dataSets"
-								:tag="radarTag"
+                :data-sets="radarData"
+                :star="radarStar"
+                :tag="radarTag"
                 width="400px"
                 height="300px"
                 class="chart"
               />
-							<div class="info center">5D脑电数据模型</div>
+              <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 class="info">专注力四维分析</div>
-						</div>
+              <FocusBarChart
+                id="focusBarChart1"
+                :data-sets="focusData"
+                :star="focusStar"
+                width="400px"
+                height="300px"
+                class="chart"
+              />
+              <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>
+        <el-row :gutter="10">
+          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
+            <div class="box-card">
+              <RadarChart
+                id="radarChart2"
+                :data-sets="radarData"
+                :star="radarStar"
+                :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">
+              <RelaxBarChart
+                id="relaxBarChart1"
+                :data-sets="relaxData"
+                width="400px"
+                height="300px"
+                class="chart"
+              />
+              <div class="info">3维放松度分析</div>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
+            <div class="box-card">
+              <IndicatorsBarChart
+                id="indicatorsBarChart1"
+                :data-sets="indicatorsData"
+                width="400px"
+                height="300px"
+                class="chart"
+              />
+              <div class="info">脑电评估检测指数分析看板</div>
+            </div>
+          </el-col>
+        </el-row>
       </div>
     </div>
   </div>
@@ -130,11 +172,12 @@ const dataSets = ref([[28,38,45,32,25],[78,88,65,82,65]]);
   padding: 30px;
 }
 .evaluate-chart {
+  box-sizing: border-box;
   width: 100%;
   border-radius: 30px;
   background: #fff;
   position: relative;
-  padding-left: 386px;
+  padding: 0 10px 20px 386px;
 }
 :deep(.el-input__wrapper) {
   background: #ffffff;
@@ -210,21 +253,21 @@ const dataSets = ref([[28,38,45,32,25],[78,88,65,82,65]]);
     color: #23283c;
   }
   .box-card {
-		height: 338px;
+    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;
-			}
-		}
+    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

@@ -18,8 +18,13 @@ watch(
   }
 );
 
-const dataSets = ref([[15,5,25,36,45],[78,88,65,82,65]]);
-const pieData = ref([12,18,20,28,22]);
+// 五维雷达图
+const radarData = ref([
+  [28, 38, 45, 32, 25],
+  [78, 88, 65, 82, 65],
+]);
+// 专注力分布饼图
+const pieData = ref([12, 18, 20, 28, 22]);
 </script>
 
 <template>
@@ -48,10 +53,10 @@ const pieData = ref([12,18,20,28,22]);
     <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>
+          <div class="chart-title">5D脑电数据模型</div>
           <RadarChart
             id="radarChart"
-						:dataSets="dataSets"
+            :data-sets="radarData"
             width="450px"
             height="350px"
             class="chart"