build: "数据图表结构调整"

src/components/Charts/AverageBarChart.vue

@@ -0,0 +1,121 @@
+<!--  脑电评估检测指数分析看板 柱状图 -->
+<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: "averageBarChart",
+    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", "#8877ef"],
+  grid: {
+    left: "10%",
+    right: "8%",
+    top: "15%",
+    bottom: "10%",
+  },
+  tooltip: {
+    show: true,
+  },
+  legend: {
+    data: ["首次检测", "最近检测"],
+    top: 0,
+    right: "5%",
+  },
+  xAxis: [
+    {
+      type: "category",
+      //name:"高专注占比",
+      data: ["0-10%", "11-20%", "21-30%", "31-45%", "46%以上"],
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#09132e",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#aaaaaa",
+        },
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      name: "人数",
+      show: true,
+      min: 0,
+      max: 18,
+      boundaryGap: true,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#aaaaaa",
+        },
+      },
+      axisLabel: {
+        color: "#09132e",
+      },
+      splitNumber: 6,
+      axisTick: {
+        show: true,
+        alignWithLabel: true,
+      },
+    },
+  ],
+  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/components/Charts/FocusCircleChart.vue

@@ -0,0 +1,130 @@
+<!-- 圆形进度图 -->
+<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: "focusCircleChart",
+    required: true,
+  },
+  className: {
+    type: String,
+    default: "chart",
+  },
+  width: {
+    type: String,
+    default: "200px",
+  },
+  height: {
+    type: String,
+    default: "200px",
+  },
+  color: {
+    type: String,
+    default: "#2f539b",
+  },
+  bgColor: {
+    type: String,
+    default: "#e6e8f9",
+  },
+  title: {
+    type: String,
+    default: "高专注占比",
+  },
+  data: {
+    type: Number,
+    default: 0,
+    required: true,
+  },
+});
+
+const options = {
+  animation: true,
+  title: {
+    show: true,
+    //text: props.data + "%",
+    text: [`{t1|${props.data}}`, "{t2|%}"].join(""),
+    subtext: props.title,
+    x: "center",
+    y: "35%",
+    textStyle: {
+      color: props.color,
+      rich: {
+        t1: {
+          fontSize: "30px",
+          fontWeight: "bold",
+        },
+        t2: {
+          fontSize: "14px",
+        },
+      },
+    },
+    subtextStyle: {
+      fontSize: "16px",
+      color: "#09132e",
+    },
+  },
+  series: [
+    {
+      type: "gauge", // 仪表盘图
+      startAngle: 90,
+      endAngle: -270,
+      min: 0,
+      max: 1,
+      radius: "90%",
+      center: ["50%", "50%"],
+      progress: {
+        // 进度环
+        roundCap: true,
+        show: true,
+        width: 20,
+        itemStyle: {
+          color: props.color,
+        },
+      },
+      axisLine: {
+        // 背景环
+        roundCap: false,
+        lineStyle: {
+          width: 20,
+          color: [
+            [0, props.bgColor],
+            [1, props.bgColor],
+          ],
+        },
+      },
+      avoidLabelOverlap: true,
+      label: { show: false },
+      labelLine: {
+        show: false,
+      },
+      pointer: { show: false },
+      axisTick: { show: false },
+      splitLine: { show: false },
+      axisLabel: { show: false },
+      detail: { show: false },
+      data: [
+        {
+          value: props.data / 100, // 进度值，最高为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/PieChart.vue → src/components/Charts/PieChart.vue

@@ -38,7 +38,7 @@ const props = defineProps({
  * 配置项
  */
 const options = {
-	color:["#ed6767","#f6bb34","#8bc86f","#546fc6","#38c6ff"],
+  color: ["#ed6767", "#f6bb34", "#8bc86f", "#546fc6", "#38c6ff"],
   title: {
     text: props.title,
     left: "39%",

src/components/Charts/SimplePieChart.vue

@@ -0,0 +1,82 @@
+<!-- 圆饼图 -->
+<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: "simplePieChart",
+    required: true,
+  },
+  className: {
+    type: String,
+    default: "chart",
+  },
+  width: {
+    type: String,
+    default: "400px",
+  },
+  height: {
+    type: String,
+    default: "300px",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  // data:[78,88,65,82,65]
+  data: {
+    type: Array,
+    default: [] as Array<number>,
+  },
+});
+/**
+ * 配置项
+ */
+const options = {
+  color: ["#ed6767", "#f6bb34", "#8bc86f", "#546fc6", "#38c6ff"],
+  title: {
+    text: ["专注力数值", "比例"].join("\n"),
+    left: "47%",
+    top: "40%",
+    textStyle: {
+      fontSize: "1rem",
+      fontWeight: "normal",
+      color: "#666666",
+    },
+    textAlign: "center",
+  },
+  series: [
+    {
+      type: "pie",
+      radius: ["60%", "90%"],
+      avoidLabelOverlap: false,
+      label: { show: false },
+      center: ["50%", "50%"],
+      data: [
+        { 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" },
+      ],
+    },
+  ],
+};
+
+onMounted(() => {
+  // 图表初始化
+  const chart = echarts.init(
+    document.getElementById(<string>props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+  // 大小自适应
+  window.addEventListener("resize", () => {
+    chart.resize();
+  });
+});
+</script>

src/views/areaboard/index.vue

@@ -8,11 +8,11 @@ import {
   AreaParams,
 } from "@/api/areaboard/types";
 import AreaDataCard from "@/views/areaboard/components/AreaDataCard.vue";
-import LiquidChart from "@/views/charts-components/LiquidChart.vue";
-import PercentBarChart from "@/views/charts-components/PercentBarChart.vue";
-import CircleChart from "@/views/charts-components/CircleChart.vue";
-import LineChart from "@/views/charts-components/LineChart.vue";
-import AverageBarChart from "@/views/charts-components/AverageBarChart.vue";
+import LiquidChart from "@/components/Charts/LiquidChart.vue";
+import PercentBarChart from "@/components/Charts/PercentBarChart.vue";
+import CircleChart from "@/components/Charts/CircleChart.vue";
+import LineChart from "@/components/Charts/LineChart.vue";
+import AverageBarChart from "@/components/Charts/AverageBarChart.vue";
 import { GradeList } from "@/api/grade/types";
 import { getGradeSelect } from "@/api/grade";
 import {

src/views/charts-components/AverageBarChart.vue

@@ -1,121 +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: "averageBarChart",
-		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", "#8877ef"],
-	grid: {
-		left: "10%",
-		right: "8%",
-		top: "15%",
-		bottom: "10%",
-	},
-	tooltip: {
-		show: true,
-	},
-	legend: {
-		data: ["首次检测", "最近检测"],
-		top: 0,
-		right: "5%"
-	},
-	xAxis: [
-		{
-			type: "category",
-			//name:"高专注占比",
-			data: ["0-10%", "11-20%", "21-30%", "31-45%", "46%以上"],
-			axisTick: {
-				show: false,
-			},
-			axisLabel: {
-				color: "#09132e",
-			},
-			axisLine:{
-				show:true,
-				lineStyle: {
-					color: "#aaaaaa",
-				},
-			},
-		},
-	],
-	yAxis: [
-		{
-			type: "value",
-			name: "人数",
-			show: true,
-			min: 0,
-			max: 18,
-			boundaryGap: true,
-			axisLine:{
-				show:true,
-				lineStyle: {
-					color: "#aaaaaa",
-				},
-			},
-			axisLabel: {
-				color: "#09132e",
-			},
-			splitNumber: 6,
-			axisTick: {
-				show: true,
-				alignWithLabel: true,
-			}
-		},
-	],
-	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/FocusCircleChart.vue

@@ -1,130 +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: "focusCircleChart",
-		required: true,
-	},
-	className: {
-		type: String,
-		default: "chart",
-	},
-	width: {
-		type: String,
-		default: "200px",
-	},
-	height: {
-		type: String,
-		default: "200px",
-	},
-	color: {
-		type: String,
-		default: "#2f539b",
-	},
-	bgColor: {
-		type: String,
-		default: "#e6e8f9",
-	},
-	title: {
-		type: String,
-		default: "高专注占比",
-	},
-	data: {
-		type: Number,
-		default: 0,
-		required: true,
-	},
-});
-
-const options = {
-	animation: true,
-	title: {
-		show: true,
-		//text: props.data + "%",
-		text: [`{t1|${props.data}}`,"{t2|%}"].join(''),
-		subtext: props.title,
-		x: "center",
-		y: "35%",
-		textStyle: {
-			color: props.color,
-			rich:{
-				t1:{
-					fontSize: "30px",
-					fontWeight: "bold",
-				},
-				t2:{
-					fontSize: "14px",
-				}
-			},
-		},
-		subtextStyle:{
-			fontSize: "16px",
-			color: "#09132e",
-		}
-	},
-	series: [
-		{
-			type: "gauge", // 仪表盘图
-			startAngle: 90,
-			endAngle: -270,
-			min: 0,
-			max: 1,
-			radius: "90%",
-			center: ["50%", "50%"],
-			progress: {
-				// 进度环
-				roundCap: true,
-				show: true,
-				width: 20,
-				itemStyle: {
-					color: props.color,
-				},
-			},
-			axisLine: {
-				// 背景环
-				roundCap: false,
-				lineStyle: {
-					width: 20,
-					color: [
-						[0, props.bgColor],
-						[1, props.bgColor],
-					],
-				},
-			},
-			avoidLabelOverlap: true,
-			label: { show: false },
-			labelLine: {
-				show: false,
-			},
-			pointer: { show: false },
-			axisTick: { show: false },
-			splitLine: { show: false },
-			axisLabel: { show: false },
-			detail: { show: false },
-			data: [
-				{
-					value: props.data / 100, // 进度值，最高为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/SimplePieChart.vue

@@ -1,82 +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: "simplePieChart",
-		required: true,
-	},
-	className: {
-		type: String,
-		default: "chart",
-	},
-	width: {
-		type: String,
-		default: "400px",
-	},
-	height: {
-		type: String,
-		default: "300px",
-	},
-	title: {
-		type: String,
-		default: "",
-	},
-	// data:[78,88,65,82,65]
-	data: {
-		type: Array,
-		default: [] as Array<number>,
-	},
-});
-/**
- * 配置项
- */
-const options = {
-	color:["#ed6767","#f6bb34","#8bc86f","#546fc6","#38c6ff"],
-	title: {
-		text: ["专注力数值","比例"].join("\n"),
-		left: "47%",
-		top: "40%",
-		textStyle: {
-			fontSize: "1rem",
-			fontWeight: "normal",
-			color: "#666666",
-		},
-		textAlign:"center",
-	},
-	series: [
-		{
-			type: "pie",
-			radius: ["60%", "90%"],
-			avoidLabelOverlap: false,
-			label: {show: false,},
-			center: ["50%", "50%"],
-			data: [
-				{ 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" },
-			],
-		},
-	],
-};
-
-onMounted(() => {
-	// 图表初始化
-	const chart = echarts.init(
-		document.getElementById(<string>props.id) as HTMLDivElement
-	);
-	chart.setOption(options);
-	// 大小自适应
-	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/charts-components/LiquidChart.vue";
-import CircleChart from "@/views/charts-components/CircleChart.vue";
-import PercentBarChart from "@/views/charts-components/PercentBarChart.vue";
+import LiquidChart from "@/components/Charts/LiquidChart.vue";
+import CircleChart from "@/components/Charts/CircleChart.vue";
+import PercentBarChart from "@/components/Charts/PercentBarChart.vue";
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
 

src/views/evaluation/index.vue

@@ -2,10 +2,10 @@
 import { watch } from "vue";
 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";
+import RadarChart from "@/components/Charts/RadarChart.vue";
+import FocusBarChart from "@/components/Charts/FocusBarChart.vue";
+import RelaxBarChart from "@/components/Charts/RelaxBarChart.vue";
+import IndicatorsBarChart from "@/components/Charts/IndicatorsBarChart.vue";
 
 defineOptions({
   name: "EvaluateIndex",

src/views/student/download.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-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 PieChart from "@/components/Charts/PieChart.vue";
+import RadarChart from "@/components/Charts/RadarChart.vue";
+import CircleChart from "@/components/Charts/CircleChart.vue";
+import DoubleChart from "@/components/Charts/DoubleChart.vue";
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import { getUrlParam } from "@/utils";
 /**

src/views/student/result.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-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 PieChart from "@/components/Charts/PieChart.vue";
+import RadarChart from "@/components/Charts/RadarChart.vue";
+import CircleChart from "@/components/Charts/CircleChart.vue";
+import DoubleChart from "@/components/Charts/DoubleChart.vue";
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import { getUrlParam } from "@/utils";
 import { watch } from "vue";

src/views/training/result.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import RadarChart from "@/views/charts-components/RadarChart.vue";
-import FocusCircleChart from "@/views/charts-components/FocusCircleChart.vue";
-import CurveLineChart from "@/views/charts-components/CurveLineChart.vue";
-import SimplePieChart from "@/views/charts-components/SimplePieChart.vue";
+import RadarChart from "@/components/Charts/RadarChart.vue";
+import FocusCircleChart from "@/components/Charts/FocusCircleChart.vue";
+import CurveLineChart from "@/components/Charts/CurveLineChart.vue";
+import SimplePieChart from "@/components/Charts/SimplePieChart.vue";
 import { getUrlParam } from "@/utils";
 import { getTrainingResult } from "@/api/training";
 import { TrainingResult } from "@/api/training/types";