MiniPrograms/gradepkg/radar-chart/radar-chart.vue

<template>
	<view class="page-box">
		<back @click="returnList"></back>

		<view class="children-box">
			<image class="children-avatar" :src="childreninfo.avatar"></image>
			<view class="children-msg">
				<view class="children-name">{{childreninfo.name}}</view>
				<view class="children-class">{{childreninfo.class}}</view>
			</view>
		</view>

		<!-- 数据分析模块 -->
		<view class="data-box">
			<view class="data-box-item">
				<view class="item-text">考试成绩波动对比:</view>
				<view class="item-number">{{mainExamUndulate>=quizExamUndulate?'小考稳定':'大考稳定'}}</view>
				<view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 0 15rpx 10rpx 15rpx;">
					<view v-if="mainExamUndulate>=quizExamUndulate" class="t-icon t-icon-jiangbei-4"></view>
					<view v-if="mainExamUndulate<quizExamUndulate" class="t-icon t-icon-jiangbei-3"></view>
					<view v-if="mainExamUndulate>=quizExamUndulate" class="icon-text-item">重要考试时沉住气稳住心态</view>
					<view v-if="mainExamUndulate<quizExamUndulate" class="icon-text-item">普通考试也不能掉以轻心</view>
				</view>
			</view>

			<view class="data-box-item2">
				<view class="item-text">考试得分能力对比:</view>
				<view class="item-number">{{avgMain>=avgquiz?'大考能力强':'小考能力强'}}</view>
				<view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 0 15rpx 10rpx 15rpx;">
					<view v-if="avgMain<avgquiz" class="t-icon t-icon-jiangbei-4"></view>
					<view v-if="avgMain>=avgquiz" class="t-icon t-icon-jiangbei-3"></view>
					<view v-if="avgMain<avgquiz" class="icon-text-item">重要考试要多证明自己能力</view>
					<view v-if="avgMain>=avgquiz" class="icon-text-item">普通考试要注重得分与练习</view>
				</view>
			</view>
		</view>

		<!-- 图表列表 -->
		<view class="chart-container">
			<view class="chart-name">
				<view class="t-icon t-icon-xianxingsakesi"></view>
				<text class="chart-name-text">重要考试对比</text>
			</view>
			<!-- 图表 -->
			<view class="charts-box">
				<qiun-data-charts type="radar" :chartData="gradeData.abilityRadarChart.importantAnalyse"
					:loadingType="4" :canvas2d='true' canvasId='canvans8312399'/>
			</view>
		</view>

		<view class="chart-container">
			<view class="chart-name">
				<view class="t-icon t-icon-xianxingtouzi"></view>
				<text class="chart-name-text">普通测验记录</text>
			</view>
			<!-- 图表 -->
			<view class="charts-box">
				<qiun-data-charts type="radar" :chartData="gradeData.abilityRadarChart.commonAnalyse"
					:loadingType="4" :canvas2d='true' canvasId='canvans89139'/>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		computed: {
			...mapState('m_children', ['childreninfo', 'semester']),
			...mapState('m_chart', ['gradeData'])
		},

		data() {
			return {
				//查询参数
				queryObj: {},
				//成绩波动参数(标准差)
				mainExamUndulate: 0,
				quizExamUndulate: 0,
				//大小考每次考试平均成绩
				avgMain: 0,
				avgquiz: 0,
			};
		},
		methods: {
			confirm(e) {
				console.log('confirm', e)
				uni.$showMsg('切换完成')
				this.show = false
			},
			//返回成绩页面
			returnList() {
				uni.switchTab({
					url: '/pages/grade/grade'
				})
			},
			//成绩波动数据(标准差)
			getExamUndulate() {
				//求和函数封装
				function arrSum(array) {
					let cont = 0
					for (let i = 0; i < array.length; i++) {
						cont += array[i]
					}
					return cont;
				}
				const mainArr = []
				const quizArr = []
				//统计每次考试总成绩并存为数组
				for (let item of this.gradeData.abilityRadarChart.importantAnalyse.series) {
					mainArr.push(arrSum(item.data))
				}
				for (let item of this.gradeData.abilityRadarChart.commonAnalyse.series) {
					quizArr.push(arrSum(item.data))
				}
				//大小考试平均成绩
				this.avgMain = arrSum(mainArr) / mainArr.length
				this.avgquiz = arrSum(quizArr) / quizArr.length
				console.log(this.avgMain, this.avgquiz);
				//标准差函数
				function standardDeviation(arr) {
					let length = arr.length;
					let sum = arrSum(arr);
					let avg = sum / length;
					let temp = [];
					for (let i = 0; i < length; i++) {

						let dev = (arr[i]) - avg; //计算数组元素与平均值的差

						temp[i] = Math.pow(dev, 2); //计算差的平方
					}
					let powSum = arrSum(temp); //差的平方和
					let standardDeviation = parseFloat(Math.sqrt(powSum / length).toFixed(2)); //标准差
					return standardDeviation
				}
				this.mainExamUndulate = standardDeviation(mainArr)
				this.quizExamUndulate = standardDeviation(quizArr)
				console.log(this.mainExamUndulate);
				console.log(this.quizExamUndulate);
			},

		},
		onLoad() {
			this.getExamUndulate()
		}
	}
</script>

<style lang="scss">
	@import '@/gradepkg/common/chartpage.scss';
	.page-box {
		background: linear-gradient(#ff8caf, $page-background-color);
	}

	.data-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 40rpx 20rpx 20rpx 20rpx;

		.data-box-item2 {
			display: flex;
			flex-direction: column;
			background-color: #ff5959;
			border-radius: 15rpx;
			width: 340rpx;
			height: 290rpx;
			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 {
				width: 180rpx;
				height: 100rpx;
			}

			.item-number {
				font-size: 60rpx;
				margin: 10rpx 0 10rpx 25rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
		}

		.data-box-item {
			display: flex;
			flex-direction: column;
			background-color: #0052d4;
			border-radius: 15rpx;
			width: 340rpx;
			height: 290rpx;
			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 {
				width: 180rpx;
				height: 100rpx;
			}

			.item-number {
				font-size: 60rpx;
				margin: 10rpx 0 10rpx 25rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
		}
	}

	.icon-text-item {
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-left: 10rpx;
	}
</style>