修改成绩页面内容

components/area-mini-chart/area-mini-chart.vue

@@ -2,24 +2,28 @@
 	<view class="chart-container">
 		<view class="chart-name">
 			<view class="t-icon t-icon-xtubiao-4"></view>
-			<text class="chart-name-text">单科成绩</text>
+			<text class="chart-name-text">单科走势</text>
 		</view>
 
 		<view class="charts-box">
-			<qiun-data-charts type="mini-area" :chartData="chartData" :loadingType="4" background="none"
+			<qiun-data-charts type="mini-area" :chartData="areaChartData" :loadingType="4" background="none"
 				:tapLegend="false" :canvas2d='true' canvasId='canvans1' />
 		</view>
 	</view>
 </template>
 
 <script>
+	import {mapState} from 'vuex'
+
 	export default {
 		name: "area-mini-chart",
 		//定义props属性,用来接收外界传递到当前组件的数据
 		props: {},
+		computed: {
+			...mapState('m_chart', ['areaChartData'])
+		},
 		data() {
 			return {
-				chartData: {},
 				queryObj: {}
 			};
 		},
@@ -41,58 +45,16 @@
 			// },
 
 			//获取图表数据
-			getChartData() {
-				this.chartData = {
-					categories: [
-						"测验1",
-						"测验2",
-						"测验3",
-						"测验4",
-						"测验5",
-						"测验6"
-					],
-					series: [{
-							"name": "数学成绩",
-							"data": [
-								90,
-								95,
-								92,
-								100,
-								88,
-								99
-							]
-						},
-						{
-							"name": "班级平均",
-							"data": [
-								85,
-								88,
-								84,
-								92,
-								93,
-								89
-							]
-						},
-						{
-							"name": "年纪平均",
-							"data": [
-								88,
-								79,
-								77,
-								74,
-								85,
-								89
-							]
-						}
-					],
-				}
-
-			}
+			// getChartData() {
+			// 	let areaChartData = 
+			// 	this.updateAreaChartData(areaChartData)
+			// }
+			
 		},
 		//创建组件生命周期函数
-		created() {
-			this.getChartData()
-		}
+		// created() {
+			// this.getChartData()
+		// }
 	}
 </script>
 

components/column-mini-chart/column-mini-chart.vue

@@ -2,13 +2,13 @@
 	<view class="chart-container">
 		<view class="chart-name">
 			<view class="t-icon t-icon-xtubiao-2"></view>
-			<text class="chart-name-text">近期成绩</text>
+			<text class="chart-name-text">近期考试</text>
 		</view>
 		
 		<view class="charts-box">
 		  <qiun-data-charts
 		    type="mini-column"
-		    :chartData="chartData"
+		    :chartData="columnChartData"
 		    :loadingType="4"
 		    background="none"
 		    :tapLegend="false"
@@ -18,59 +18,21 @@
 	</view>
 </template>
 
-<script>
+<script>
+	import {mapState} from 'vuex'
 	export default {
 		name:"column-mini-chart",
-		props:{},
+		props:{},
+		computed:{
+			...mapState('m_chart', ['columnChartData'])
+		},
 		data() {
 			return {
-				chartData: {},
-				queryObj: {}
 			};
 		},
 		methods:{
-			getChartData(){
-				this.chartData = {
-					categories: [
-						"数学",
-						"语文",
-						"英语",
-						"体育",
-						"科学",
-						"思品"
-					],
-					series: [{
-							"name": "最近成绩",
-							"data": [
-								91,
-								92,
-								94,
-								88,
-								82,
-								89
-							]
-						},
-						{
-							"name": "上次成绩",
-							"data": [
-								88,
-								84,
-								97,
-								92,
-								89,
-								81
-							]
-						}
-					],
-				}
-				
-				
-			}
-		},
-		//创建组件生命周期函数
-		created(){
-			this.getChartData()
-		}
+			
+		},
 	}
 </script>
 

components/line-mini-chart/line-mini-chart.vue

@@ -2,7 +2,7 @@
 	<view class="chart-container">
 		<view class="chart-name">
 			<view class="t-icon t-icon-xtubiao-4"></view>
-			<text class="chart-name-text">走势对比</text>
+			<text class="chart-name-text">学期走势</text>
 		</view>
 		
 		<view class="charts-box">

gradepkg/arcbar-chart/arcbar-chart.vue

@@ -112,11 +112,16 @@
 </script>
 
 <style lang="scss">
-	.page-box{
+	.page-box {
 		height: 600rpx;
-		background: linear-gradient(#419eea, #f1f3f5);
-		.back{
-			padding: 100rpx 0 40rpx 40rpx;
+		background: linear-gradient(#ff6187, #f1f3f5);
+	
+		.back {
+			padding: 100rpx 0 30rpx 40rpx;
+			.t-icon{
+				width:50rpx;
+				height:50rpx;
+			}
 		}
 		
 		.children-box{

gradepkg/area-chart/area-chart.vue

@@ -12,26 +12,18 @@
 				<view class="children-class">{{childreninfo.class}}</view>
 			</view>
 		</view>
-		<!-- 操作按钮 -->
-		<view class="icon-box">
-			<view class="t-icon t-icon-mianxingdiannao1"></view>
 
-			<view style="display: flex; flex-direction: column; align-items: center;" @click="show = true">
-				<view class="t-icon t-icon-mianxingfangdajing"></view>
-				<view class="icon-text">科目</view>
-			</view>
-
-			<view style="display: flex; flex-direction: column; align-items: center;">
-				<view class="t-icon t-icon-mianxingjiandao"></view>
-				<view class="icon-text">剪报</view>
-			</view>
-
-		</view>
 		<!-- 图表区域 -->
+		<!-- 单科与平均成绩对比 -->
 		<view class="chart-container">
 			<view class="chart-name">
-				<view class="t-icon t-icon-canyon-nature-svgrepo-com"></view>
-				<text class="chart-name-text">{{semester}}单科成绩对比</text>
+				<view class="t-icon t-icon-xianxingguojixiangqi"></view>
+				<text class="chart-name-text">{{semester}} 单科与平均对比</text>
+				
+				<view class="search-box" @click="show = true">
+					<view class="t-icon t-icon-fangdajing"></view>
+					<view style="font-weight: bold;font-size: 26rpx;color: #3B4144;">科目</view>
+				</view>
 			</view>
 			<!-- 图表 -->
 			<view class="charts-box">
@@ -39,6 +31,20 @@
 					:canvas2d='true' canvasId='canvans999' />
 			</view>
 		</view>
+
+		<!-- 单科成绩对比 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-xianxingzhongguoxiangqi"></view>
+				<text class="chart-name-text">{{semester}} 单科走势对比</text>
+			</view>
+			<!-- 图表 -->
+			<view class="charts-box">
+				<qiun-data-charts type="area" :chartData="subjectChartData" :loadingType="4" :opts="{dataLabel: false}"
+					:canvas2d='true' canvasId='canvans899' />
+			</view>
+		</view>
+
 		<!-- 选择器 -->
 		<u-picker :show="show" :columns="subject" ref="uPicker" @confirm="selectSubject" @cancel="selectCancel"
 			:closeOnClickOverlay="true">
@@ -67,6 +73,83 @@
 				],
 				//查询参数
 				queryObj: {},
+				subjectChartData: {
+					categories: [
+						"测验1",
+						"测验2",
+						"测验3",
+						"测验4",
+						"测验5",
+						"测验6"
+					],
+					series: [{
+							"name": "数学",
+							"data": [
+								90,
+								95,
+								92,
+								100,
+								88,
+								99
+							]
+						},
+						{
+							"name": "语文",
+							"data": [
+								95,
+								98,
+								84,
+								92,
+								93,
+								89
+							]
+						},
+						{
+							"name": "英语",
+							"data": [
+								98,
+								89,
+								97,
+								84,
+								95,
+								89
+							]
+						},
+						{
+							"name": "科学",
+							"data": [
+								91,
+								72,
+								92,
+								89,
+								97,
+								92
+							]
+						},
+						{
+							"name": "体育",
+							"data": [
+								95,
+								89,
+								92,
+								87,
+								91,
+								83
+							]
+						},
+						{
+							"name": "思品",
+							"data": [
+								91,
+								82,
+								87,
+								84,
+								90,
+								85
+							]
+						}
+					],
+				}
 
 			};
 		},
@@ -103,7 +186,12 @@
 		background: linear-gradient(#ff6187, #f1f3f5);
 
 		.back {
-			padding: 100rpx 0 40rpx 40rpx;
+			padding: 100rpx 0 30rpx 40rpx;
+
+			.t-icon {
+				width: 50rpx;
+				height: 50rpx;
+			}
 		}
 
 		.children-box {
@@ -138,21 +226,8 @@
 			}
 		}
 
-		.icon-box {
-			display: flex;
-			justify-content: space-between;
-			margin: 0 80rpx 20rpx 80rpx;
-			padding-top: 60rpx;
-
-			.icon-text {
-				font-weight: bold;
-				font-size: 26rpx;
-				color: #3B4144;
-			}
-		}
-
 		.chart-container {
-			margin: 10rpx 20rpx;
+			margin: 40rpx 20rpx 0 20rpx;
 			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;
@@ -176,6 +251,12 @@
 					color: #3B4144;
 					margin-left: 10rpx;
 				}
+				.search-box{
+					display: flex; 
+					align-items: center; 
+					margin-left: auto;
+					margin-right: 40rpx;
+				}
 			}
 
 			.charts-box {

gradepkg/bar-chart/bar-chart.vue

@@ -119,10 +119,14 @@
 <style lang="scss">
 	.page-box {
 		height: 600rpx;
-		background: linear-gradient(#5fb7ff, #f1f3f5);
-
-		.back{
-			padding: 100rpx 0 40rpx 40rpx;
+		background: linear-gradient(#ff6187, #f1f3f5);
+	
+		.back {
+			padding: 100rpx 0 30rpx 40rpx;
+			.t-icon{
+				width:50rpx;
+				height:50rpx;
+			}
 		}
 		
 		.children-box{

gradepkg/column-chart/column-chart.vue

@@ -11,28 +11,28 @@
 				<view class="children-class">{{childreninfo.class}}</view>
 			</view>
 		</view>
-		
-		<view class="icon-box">
-			<view class="t-icon t-icon-xuexirenwu"></view>
-			<view class="t-icon t-icon-ceshi"></view>
-			
-			<view style="display: flex; flex-direction: column; align-items: center;">
-				<view class="t-icon t-icon-mulu"></view>
-				<view class="icon-text">返回</view>
+		<!-- 图表列表 -->
+		<!-- 近期成绩对比自身 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-xianxinghuaban"></view>
+				<text class="chart-name-text">近期成绩对比</text>
+			</view>
+			<view class="charts-box">
+				<qiun-data-charts type="column" :chartData="columnChartData" :loadingType="4" background="none" />
 			</view>
-			
 		</view>
-
-
+		<!-- 近期成绩对比平均 -->
 		<view class="chart-container">
 			<view class="chart-name">
-				<view class="t-icon t-icon-buoumao-xiyouse"></view>
-				<text class="chart-name-text">近期成绩对比</text>
+				<view class="t-icon t-icon-xianxingpingpangqiu"></view>
+				<text class="chart-name-text">近期学科能力</text>
 			</view>
 			<view class="charts-box">
-				<qiun-data-charts type="column" :chartData="chartData" :loadingType="4" background="none" />
+				<qiun-data-charts type="radar" :chartData="radarChartData" :loadingType="4" />
 			</view>
 		</view>
+		
 	</view>
 </template>
 
@@ -41,12 +41,15 @@
 	
 	export default {
 		computed:{
-			...mapState('m_children',['childreninfo','semester'])
+			...mapState('m_children',['childreninfo','semester']),
+			...mapState('m_chart',['columnChartData'])
 		},
 		
 		data() {
 			return {
-				chartData: {
+				//查询参数
+				queryObj: {},
+				radarChartData: {
 					categories: [
 						"数学",
 						"语文",
@@ -56,32 +59,42 @@
 						"思品"
 					],
 					series: [{
-							"name": "最近成绩",
+							"name": "孩子",
 							"data": [
 								91,
 								92,
 								94,
-								88,
+								82,
 								82,
 								89
 							]
 						},
 						{
-							"name": "上次成绩",
+							"name": "班平均",
 							"data": [
-								88,
-								84,
-								97,
-								92,
-								89,
+								82,
+								83,
+								77,
+								83,
+								91,
 								81
 							]
+						},
+						{
+							"name": "年级平均",
+							"data": [
+								77,
+								78,
+								73,
+								80,
+								86,
+								85
+							]
 						}
 					],
 				},
-				//查询参数
-				queryObj: {},
-
+				
+				
 			};
 		},
 		methods:{
@@ -103,11 +116,16 @@
 </script>
 
 <style lang="scss">
-	.page-box{
+	.page-box {
 		height: 600rpx;
-		background: linear-gradient(#f9cd98, #f1f3f5);
-		.back{
-			padding: 100rpx 0 40rpx 40rpx;
+		background: linear-gradient(#ffd071, #f1f3f5);
+	
+		.back {
+			padding: 100rpx 0 30rpx 40rpx;
+			.t-icon{
+				width:50rpx;
+				height:50rpx;
+			}
 		}
 		
 		.children-box{
@@ -138,19 +156,8 @@
 				}
 			}
 		}
-		.icon-box{
-			display: flex;
-			justify-content: space-between;
-			margin: 0 80rpx 20rpx 80rpx;
-			padding-top: 60rpx;
-			.icon-text{
-				font-weight: bold;
-				font-size: 26rpx;
-				color: #3B4144;
-			}
-		}
 		.chart-container {
-			margin: 0 20rpx;
+			margin: 40rpx 20rpx 0 20rpx;
 			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;

gradepkg/line-chart/line-chart.vue

@@ -1,9 +1,10 @@
 <template>
 	<view class="page-box">
+		<!-- 返回按钮 -->
 		<view class="back">
 			<view class="t-icon t-icon-fanhui2-copy" @click="returnList"></view>
 		</view>
-		
+		<!-- 学生信息头部 -->
 		<view class="children-box">
 			<image class="children-avatar" :src="childreninfo.avatar"></image>
 			<view class="children-msg">
@@ -11,25 +12,35 @@
 				<view class="children-class">{{childreninfo.class}}</view>
 			</view>
 		</view>
-		
-		<view class="icon-box">
-			<view class="t-icon t-icon-xuexirenwu"></view>
-			<view class="t-icon t-icon-ceshi"></view>
-			
-			<view style="display: flex; flex-direction: column; align-items: center;">
-				<view class="t-icon t-icon-mulu"></view>
-				<view class="icon-text">返回</view>
+		<!-- 图表区域 -->
+		<!-- 总成绩图表 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-xianxingjiazigu"></view>
+				<text class="chart-name-text">{{semester}} 总成绩对比</text>
+			</view>
+			<view class="charts-box">
+				<qiun-data-charts type="line" :chartData="lineChartData" :loadingType="4"/>
 			</view>
-			
 		</view>
-		
+		<!-- 主科总成绩图表 -->
 		<view class="chart-container">
 			<view class="chart-name">
-				<view class="t-icon t-icon-buoumao-haibaoshuangse"></view>
-				<text class="chart-name-text">{{semester}}总成绩对比</text>
+				<view class="t-icon t-icon-xianxinghuaxue"></view>
+				<text class="chart-name-text">{{semester}} 主科总成绩对比</text>
 			</view>
 			<view class="charts-box">
-				<qiun-data-charts type="line" :chartData="chartData" :loadingType="4"/>
+				<qiun-data-charts type="line" :chartData="majorChartData" :loadingType="4"/>
+			</view>
+		</view>
+		<!-- 副科总成绩图表 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-xianxingpaobu"></view>
+				<text class="chart-name-text">{{semester}} 副科总成绩对比</text>
+			</view>
+			<view class="charts-box">
+				<qiun-data-charts type="line" :chartData="minorChartData" :loadingType="4"/>
 			</view>
 		</view>
 		
@@ -41,12 +52,15 @@
 	
 	export default {
 		computed:{
-			...mapState('m_children',['childreninfo','semester'])
+			...mapState('m_children',['childreninfo','semester']),
+			...mapState('m_chart', ['lineChartData'])
 		},
 		
 		data() {
-			return {
-				chartData: {
+			return {
+				//查询参数
+				queryObj: {},
+				majorChartData: {
 					categories: [
 						"测验1",
 						"测验2",
@@ -55,39 +69,77 @@
 						"测验5",
 					],
 					series: [{
-							"name": "孩子总分",
+							"name": "语数外总分",
 							"data": [
-								400,
-								390,
-								380,
-								399,
-								366,
+								266,
+								277,
+								258,
+								288,
+								294,
 							]
 						},
 						{
 							"name": "班级平均分",
 							"data": [
-								360,
-								377,
-								355,
-								322,
-								338,
+								255,
+								257,
+								260,
+								264,
+								250,
 							]
 						},
 						{
 							"name": "年级平均分",
 							"data": [
-								333,
-								346,
-								364,
-								347,
-								355,
+								245,
+								260,
+								252,
+								247,
+								255,
+							]
+						}
+					],
+				},
+				minorChartData: {
+					categories: [
+						"测验1",
+						"测验2",
+						"测验3",
+						"测验4",
+						"测验5",
+					],
+					series: [{
+							"name": "科学体育思品总分",
+							"data": [
+								280,
+								290,
+								280,
+								299,
+								266,
+							]
+						},
+						{
+							"name": "班级平均分",
+							"data": [
+								260,
+								277,
+								255,
+								222,
+								238,
+							]
+						},
+						{
+							"name": "年级平均分",
+							"data": [
+								233,
+								246,
+								268,
+								242,
+								256,
 							]
 						}
 					],
 				},
-				//查询参数
-				queryObj: {},
 				
 			}
 		},
@@ -110,12 +162,16 @@
 </script>
 
 <style lang="scss">
-	.page-box{
+	.page-box {
 		height: 600rpx;
-		background: linear-gradient(#5fb7ff, #f1f3f5);
-		
-		.back{
-			padding: 100rpx 0 40rpx 40rpx;
+		background: linear-gradient(#a5c6ff, #f1f3f5);
+	
+		.back {
+			padding: 100rpx 0 30rpx 40rpx;
+			.t-icon{
+				width:50rpx;
+				height:50rpx;
+			}
 		}
 		
 		.children-box{
@@ -146,20 +202,9 @@
 				}
 			}
 		}
-		.icon-box{
-			display: flex;
-			justify-content: space-between;
-			margin: 0 80rpx 20rpx 80rpx;
-			padding-top: 60rpx;
-			.icon-text{
-				font-weight: bold;
-				font-size: 26rpx;
-				color: #3B4144;
-			}
-		}
 		
 		.chart-container {
-			margin: 0 20rpx;
+			margin: 40rpx 20rpx 0 20rpx;
 			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;

gradepkg/mainradar-chart/mainradar-chart.vue

@@ -114,11 +114,16 @@
 </script>
 
 <style lang="scss">
-	.page-box{
+	.page-box {
 		height: 600rpx;
 		background: linear-gradient(#ff6187, #f1f3f5);
-		.back{
-			padding: 100rpx 0 40rpx 40rpx;
+	
+		.back {
+			padding: 100rpx 0 30rpx 40rpx;
+			.t-icon{
+				width:50rpx;
+				height:50rpx;
+			}
 		}
 		
 		.children-box{

gradepkg/radar-chart/radar-chart.vue

@@ -131,11 +131,16 @@
 </script>
 
 <style lang="scss">
-	.page-box{
+	.page-box {
 		height: 600rpx;
-		background: linear-gradient(#c1cbf7, #f1f3f5);
-		.back{
-			padding: 100rpx 0 40rpx 40rpx;
+		background: linear-gradient(#ff6187, #f1f3f5);
+	
+		.back {
+			padding: 100rpx 0 30rpx 40rpx;
+			.t-icon{
+				width:50rpx;
+				height:50rpx;
+			}
 		}
 		
 		.children-box{

gradepkg/rose-chart/rose-chart.vue

@@ -11,41 +11,40 @@
 				<view class="children-class">{{childreninfo.class}}</view>
 			</view>
 		</view>
-		
-		<view class="icon-box">
-			<view class="t-icon t-icon-xuexirenwu"></view>
-			<view class="t-icon t-icon-ceshi"></view>
-			
-			<view style="display: flex; flex-direction: column; align-items: center;">
-				<view class="t-icon t-icon-mulu"></view>
-				<view class="icon-text">返回</view>
+
+		<!-- 图表列表 -->
+		<!-- 单次考试 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-xianxingmeishuhuahua"></view>
+				<text class="chart-name-text">最近考试科目分析</text>
+			</view>
+			<view class="charts-box">
+				<qiun-data-charts type="rose" :chartData="roseChartData" :loadingType="4" :tapLegend="true" />
 			</view>
-			
 		</view>
-
-
+		<!-- 学期平均 -->
 		<view class="chart-container">
 			<view class="chart-name">
-				<view class="t-icon t-icon-shizimao"></view>
-				<text class="chart-name-text">科目分析</text>
+				<view class="t-icon t-icon-xianxingyouyong"></view>
+				<text class="chart-name-text">{{semester}} 各科目平均值分析</text>
 			</view>
-
 			<view class="charts-box">
-				<qiun-data-charts type="rose" :chartData="chartData" :loadingType="4" :tapLegend="true" />
+				<qiun-data-charts type="rose" :chartData="meanChartData" :loadingType="4" :tapLegend="true" />
 			</view>
 		</view>
 		
 		<!-- 数据分析模块 -->
-		<!-- <view class="data-box">
-			<view class="data-box-item" v-bind:style="{background: chartData.series[0].color}">
-				<view class="item-text">{{chartData.series[0].name}}</view>
+		<view class="data-box">
+			<view class="data-box-item" style="{background: #0052d4;}">
+				<view class="item-text">您的孩子优势科目为:{{bestSubject.name}}</view>
 				<view class="item-number">{{chartData.series[0].data/0.01}}%</view>
 				<view style="display: flex;align-items: center;">
 					<view class="t-icon t-icon-jiangbei-6"></view>
 					<view class="icon-text-item">继续加油!</view>
 				</view>
 			</view>
-			<view class="data-box-item" v-bind:style="{background: chartData.series[1].color}">
+			<view class="data-box-item" style="{background: #ff5959}">
 				<view class="item-text">{{chartData.series[1].name}}</view>
 				<view class="item-number">{{chartData.series[1].data/0.01}}%</view>
 				<view style="display: flex;align-items: center;">
@@ -53,7 +52,7 @@
 					<view class="icon-text-item">继续加油!</view>
 				</view>
 			</view>
-		</view> -->
+		</view>
 		
 	</view>
 </template>
@@ -63,12 +62,15 @@
 	
 	export default {
 		computed:{
-			...mapState('m_children',['childreninfo','semester'])
+			...mapState('m_children',['childreninfo','semester']),
+			...mapState('m_chart', ['areaChartData'])
 		},
 		
 		data() {
 			return {
-				chartData: {
+				//最好科目
+				bestSubject: {},
+				roseChartData: {
 					series: [{
 						"data": [{
 								"name": "数学",
@@ -76,7 +78,7 @@
 							},
 							{
 								"name": "语文",
-								"value": 85
+								"value": 86
 							},
 							{
 								"name": "英语",
@@ -97,11 +99,44 @@
 						]
 					}]
 				},
-				//查询参数
-				queryObj: {},
-
+				meanChartData: {
+					series: [
+						{
+						"data": [{
+								"name": "数学",
+								"value": 97
+							},
+							{
+								"name": "语文",
+								"value": 82
+							},
+							{
+								"name": "英语",
+								"value": 99
+							},
+							{
+								"name": "科学",
+								"value": 80
+							},
+							{
+								"name": "体育",
+								"value": 77
+							},
+							{
+								"name": "思品",
+								"value": 95
+							}
+						]
+					}]
+				},
+				
+				
 			};
 		},
+		onLoad(){
+			// this.getChartData()
+			this.getGradeDetail()
+		},
 		methods:{
 			//返回成绩页面
 			returnList(){
@@ -109,23 +144,28 @@
 					url: '/pages/grade/grade'
 				})
 			},
-			//获取表格数据
-			// async getChartData(){
-				
-			// },
-		},
-		onLoad(){
-			// this.getChartData()
+			//通过map方法返回成绩的数组
+			getGradeDetail(){
+				//获取成绩最好科目
+				this.bestSubject = this.meanChartData.series[0].data.reduce((pre,cur)=>pre.value>cur.value?pre:cur)
+				console.log(this.bestSubject);
+			}
 		}
+		
 	}
 </script>
 
 <style lang="scss">
-	.page-box{
+	.page-box {
 		height: 600rpx;
-		background: linear-gradient(#f97f41, #f1f3f5);
-		.back{
-			padding: 100rpx 0 40rpx 40rpx;
+		background: linear-gradient(#a5c6ff, #f1f3f5);
+	
+		.back {
+			padding: 100rpx 0 30rpx 40rpx;
+			.t-icon{
+				width:50rpx;
+				height:50rpx;
+			}
 		}
 		
 		.children-box{
@@ -156,19 +196,8 @@
 				}
 			}
 		}
-		.icon-box{
-			display: flex;
-			justify-content: space-between;
-			margin: 0 80rpx 20rpx 80rpx;
-			padding-top: 60rpx;
-			.icon-text{
-				font-weight: bold;
-				font-size: 26rpx;
-				color: #3B4144;
-			}
-		}
 		.chart-container {
-			margin: 0 20rpx;
+			margin: 40rpx 20rpx 0 20rpx;
 			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;
@@ -198,45 +227,45 @@
 				height: 550rpx;
 			}
 		}
-		// .data-box{
-		// 	display: flex;
-		// 	flex-direction: row;
-		// 	align-items: center;
-		// 	flex-wrap: wrap;
-		// 	justify-content: space-between;
-		// 	margin: 20rpx;
-		// 	.data-box-item{
-		// 		display: flex;
-		// 		flex-direction: column;
-		// 		background-color: #FFFFFF;
-		// 		border-radius: 15rpx;
-		// 		width: 340rpx;
-		// 		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
-		// 		.item-text{
-		// 			font-size: 30rpx;
-		// 			font-weight: bold;
-		// 			color: #FFFFFF;
-		// 			margin: 30rpx 0 0 30rpx;
-		// 		}
-		// 		.t-icon{
-		// 			margin-bottom: 30rpx;
-		// 			margin-left: 20rpx;
-		// 			width: 100rpx;
-		// 			height: 100rpx;
-		// 		}
-		// 		.item-number{
-		// 			font-size: 80rpx;
-		// 			margin-left: 30rpx;
-		// 			color: #FFFFFF;
-		// 			font-weight: bold;
-		// 		}
-		// 	}
-		// }
+		.data-box{
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			margin: 20rpx;
+			.data-box-item{
+				display: flex;
+				flex-direction: column;
+				background-color: #FFFFFF;
+				border-radius: 15rpx;
+				width: 340rpx;
+				box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
+				.item-text{
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #FFFFFF;
+					margin: 30rpx 0 0 30rpx;
+				}
+				.t-icon{
+					margin-bottom: 30rpx;
+					margin-left: 20rpx;
+					width: 100rpx;
+					height: 100rpx;
+				}
+				.item-number{
+					font-size: 80rpx;
+					margin-left: 30rpx;
+					color: #FFFFFF;
+					font-weight: bold;
+				}
+			}
+		}
+	}
+	.icon-text-item{
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #FFFFFF;
+		margin-left: 10rpx;
 	}
-	// .icon-text-item{
-	// 	font-size: 30rpx;
-	// 	font-weight: bold;
-	// 	color: #FFFFFF;
-	// 	margin-left: 10rpx;
-	// }
 </style>

information/chart.js

@@ -49,14 +49,90 @@ export default {
 					]
 				}
 			],
-		}
-		
+		},
+		lineChartData: {
+					categories: [
+						"测验1",
+						"测验2",
+						"测验3",
+						"测验4",
+						"测验5",
+					],
+					series: [{
+							"name": "孩子总分",
+							"data": [
+								400,
+								390,
+								380,
+								399,
+								366,
+							]
+						},
+						{
+							"name": "班级平均分",
+							"data": [
+								360,
+								377,
+								355,
+								322,
+								338,
+							]
+						},
+						{
+							"name": "年级平均分",
+							"data": [
+								333,
+								346,
+								364,
+								347,
+								355,
+							]
+						}
+					],
+				},
+		columnChartData: {
+					categories: [
+						"数学",
+						"语文",
+						"英语",
+						"体育",
+						"科学",
+						"思品"
+					],
+					series: [{
+							"name": "最近成绩",
+							"data": [
+								91,
+								92,
+								94,
+								88,
+								88,
+								98
+							]
+						},
+						{
+							"name": "上次成绩",
+							"data": [
+								88,
+								84,
+								97,
+								92,
+								89,
+								96
+							]
+						}
+					],
+				}
 
 	}),
 	//模块方法(修改数据)
 	mutations: {
+		//更新图表数据
 		updateAreaChartData(state,areaChartData){
 			state.areaChartData = areaChartData
+		},
+		updateLineChartData(state,lineChartData){
+			state.lineChartData = lineChartData
 		}
 
 	},

pages/subscribe/subscribe.vue

@@ -50,7 +50,7 @@
 <style lang="scss">
 	.container {
 		height: 400rpx;
-		background: linear-gradient(#ff5959, #f1f3f5);
+		background: linear-gradient(#ff6187, #f1f3f5);
 		display: flex;
 
 		// .steps-card{

uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -128,9 +128,9 @@ const cfu = {
 			"#0052d4",
 			"#ff5959",
 			"#f9b248",
+			"#c1cbf7",
 			"#3CA272",
-			"#73C0DE",
-			"#ff55a3"
+			"#5fb7ff"
 		],
 		"padding": [
 			-20,
@@ -623,7 +623,11 @@ const cfu = {
 		"color": [
 			"#0052d4",
 			"#ff5959",
-			"#f9b248"
+			"#f9b248",
+			"#c1cbf7",
+			"#3CA272",
+			"#5fb7ff"
+			
 		],
 		"padding": [
 			1,