build: 区域级数据看板图表调试

.eslintignore

@@ -10,5 +10,5 @@ public
 src/assets
 
 .eslintrc.cjs
-.prettierrc.cjs
-.stylelintrc.cjs
+.prettier.cjs
+.stylelint.cjs

src/views/areaboard/index.vue

@@ -65,9 +65,9 @@ onMounted(() => {
 	// 图表数据
 	getChartData(0);
 });
-const indicatorsData = ref([
-	[50, 60, 55, 64.5],
-	[55, 90, 70, 82.5],
+const averageData = ref([
+	[5, 6, 5, 4, 3],
+	[9, 10, 15, 12, 8],
 ]);
 </script>
 
@@ -217,14 +217,30 @@ const indicatorsData = ref([
 			<el-row :gutter="20">
 				<el-col :md="24" :lg="12" :xl="8">
 					<div class="charts-item">
-						<p class="title">学员专注力训练高专注占比分析</p>
+						<p class="title pos">学员专注力训练高专注占比分析</p>
 						<AverageBarChart
 								id="averageBarChart1"
-								:data-sets="indicatorsData"
-								width="400px"
-								height="300px"
+								:data-sets="averageData"
+								width="520px"
+								height="520px"
 								class="chart"
 						/>
+						<el-row :gutter="15" class="bottom">
+							<el-col :span="12">
+								<p class="l">
+									<span>训练前期全体学员</span>
+									<span>高专注占比平均值</span>
+									<b>13.5</b>
+								</p>
+							</el-col>
+							<el-col :span="12">
+								<p class="r">
+									<span>训练后期全体学员</span>
+									<span>高专注占比平均值</span>
+									<b>33.7</b>
+								</p>
+							</el-col>
+						</el-row>
 					</div>
 				</el-col>
 				<!-- 学员专注力评分分级占比分析 -->
@@ -326,12 +342,15 @@ const indicatorsData = ref([
   text-align: center;
   position: relative;
   .title {
-	margin: 0;
-	height: 78px;
-	line-height: 78px;
-	text-align: left;
-	text-indent: 2em;
-	font-size: 18px;
+		margin: 0;
+		height: 78px;
+		line-height: 78px;
+		text-align: left;
+		text-indent: 2em;
+		font-size: 18px;
+		&.pos{
+	  	margin-bottom: -50px;
+		}
   }
   .item {
 	padding-bottom: 30px;
@@ -347,6 +366,32 @@ const indicatorsData = ref([
   .bar {
 	margin-top: 60px;
   }
+  .bottom{
+		padding:0 20px 20px 20px;
+		.el-col p{
+			position: relative;
+			box-sizing: border-box;
+			white-space: nowrap;
+			border-radius: 10px;
+			padding:10px 20px;
+			text-align: left;
+			color: #ffffff;
+			&.l{
+				background: #f8b865;
+			}
+			&.r{
+				background: #8877ef;
+			}
+			span{display: block}
+			b{
+				position: absolute;
+				right:20px;
+				top:22px;
+				font-size: 26px;
+				font-style: normal;
+			}
+		}
+  }
   .empty {
 	box-sizing: border-box;
 	height: 400px;
@@ -355,13 +400,13 @@ const indicatorsData = ref([
 	background-image: url("../../assets/empty.png");
 	background-repeat: no-repeat;
 	background-position: center 30%;
-	p {
-	  font-size: 14px;
-	  color: #a1a1a1;
-	  &.red {
-		color: #e04962;
-	  }
-	}
+		p {
+			font-size: 14px;
+			color: #a1a1a1;
+			&.red {
+			color: #e04962;
+			}
+		}
   }
 }
 </style>

src/views/charts-components/AverageBarChart.vue

@@ -5,7 +5,6 @@
 
 <script setup lang="ts">
 import * as echarts from "echarts";
-
 const props = defineProps({
 	id: {
 		type: String,
@@ -38,49 +37,58 @@ const options = {
 	grid: {
 		left: "10%",
 		right: "8%",
-		top: "8%",
-		bottom: "15%",
+		top: "15%",
+		bottom: "10%",
 	},
 	tooltip: {
 		show: true,
 	},
+	legend: {
+		data: ["首次检测", "最近检测"],
+		top: 0,
+		right: "5%"
+	},
 	xAxis: [
 		{
 			type: "category",
-			data: ["专注指数", "放松指数", "认知执行指数", "心情指数"],
+			//name:"高专注占比",
+			data: ["0-10%", "11-20%", "21-30%", "31-45%", "46%以上"],
+			axisTick: {
+				show: false,
+			},
 			axisLabel: {
-				fontSize: 14,
-				color: "#00449b",
-				interval: 0,
+				color: "#09132e",
 			},
-			axisLine: {
+			axisLine:{
+				show:true,
 				lineStyle: {
-					color: "#4284f2",
-					width: 2,
+					color: "#aaaaaa",
 				},
 			},
-			axisTick: {
-				show: false,
-			},
 		},
 	],
 	yAxis: [
 		{
 			type: "value",
+			name: "人数",
 			show: true,
 			min: 0,
-			max: 100,
-			offset: -5,
-			axisLine: {
-				show: true,
+			max: 18,
+			boundaryGap: true,
+			axisLine:{
+				show:true,
 				lineStyle: {
-					color: "#4284f2",
-					width: 1,
+					color: "#aaaaaa",
 				},
 			},
-			splitLine: {
-				show: false,
+			axisLabel: {
+				color: "#09132e",
 			},
+			splitNumber: 6,
+			axisTick: {
+				show: true,
+				alignWithLabel: true,
+			}
 		},
 	],
 	series: [
@@ -110,4 +118,4 @@ onMounted(() => {
 		chart.resize();
 	});
 });
-</script>
+</script>

src/views/charts-components/LineChart.vue

@@ -44,21 +44,49 @@ const options = {
 		y2: "10%",
 	},
 	xAxis: {
-		type: 'category',
+		type: "category",
 		data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
+		boundaryGap: true,
 		axisLabel: {
+			color: "#09132e",
 			interval: (value, index) => { return (index%4)==0;}
 		},
+		axisLine:{
+			show:true,
+			lineStyle: {
+				color: "#aaaaaa",
+			},
+		},
+		axisTick: {
+			show: true,
+			alignWithLabel: true,
+		}
 	},
 	yAxis: {
-		type: 'value',
+		type: "value",
 		max: 100,
-		interval: 10
+		interval: 10,
+		axisLabel: {
+			color: "#09132e",
+		},
+		axisLine:{
+			show:true,
+			lineStyle: {
+				color: "#aaaaaa",
+			},
+		},
+		splitNumber: 10,
+		axisTick: {
+			show: true,
+			alignWithLabel: true,
+		}
 	},
 	series: [
 		{
 			data: [20, 30, 50, 78, 53, 47, 60,30, 50, 78, 53, 47, 60,30, 50, 78, 53, 47, 60],
-			type: 'line',
+			type: "line",
+			symbol: "circle",
+			symbolSize: 10,
 			lineStyle:{
 				normal:{
 					color:{
@@ -81,7 +109,19 @@ const options = {
 				}
 			}
 		}
-	]
+	],
+	visualMap: {
+		type: "continuous",
+		min: 0,
+		max: 100,
+		text: ["HIGH", "LOW"],
+		realtime: false,
+		calculable: false,
+		color: ["#ffd223", "#9685fb"],
+		itemWidth: 30,
+		right: "2%",
+		bottom: "5%",
+	},
 };
 
 onMounted(() => {