MiniPrograms/gradepkg/ability-chart/ability-chart.vue

<template>
	<view class="page-box">
		<back text="考试能力"></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" style="background-color: #4169E1;">
				<view class="item-text">成绩波动对比:</view>
				
				<view style="display: flex;align-items: baseline;">
					<view class="item-text" style="font-size: 50rpx;">{{mainExamUndulate>=quizExamUndulate?'小考':'大考'}}</view>
					<view class="item-text" style="margin-left: 0;">发挥稳定</view>
				</view>
				
				<view class="module-item-box">
					<view v-if="mainExamUndulate>=quizExamUndulate" class="t-icon t-icon-a-bianzu7"></view>
					<view v-if="mainExamUndulate<quizExamUndulate" class="t-icon t-icon-a-bianzu6"></view>
				</view>
			</view>

			<view class="data-box-item" style="background-color: #ff8caf;">
				<view class="item-text">得分能力对比:</view>
				
				
				<view style="display: flex;align-items: baseline;">
					<view class="item-text" style="font-size: 50rpx;">{{avgMain>=avgquiz?'大考':'小考'}}</view>
					<view class="item-text" style="margin-left: 0;">得分能力强</view>
				</view>
				
				<view class="module-item-box">
					<view v-if="avgMain<avgquiz" class="t-icon t-icon-a-bianzu7"></view>
					<view v-if="avgMain>=avgquiz" class="t-icon t-icon-a-bianzu6"></view>
				</view>
			</view>
		</view>

		<!-- 图表列表 -->
		<view class="chart-container">
			<view class="chart-name">
				<view class="start-tag"></view>
				<text class="chart-name-text">重要考试对比</text>
			</view>
			<!-- 图表 -->
			<view class="charts-box">
				<qiun-data-charts type="column" :chartData="gradeData.abilityChart.importantAnalyse"
					:loadingType="4" tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId876898"/>
			</view>
		</view>

		<view class="chart-container">
			<view class="chart-name">
				<view class="start-tag"></view>
				<text class="chart-name-text">普通测验记录</text>
			</view>
			<!-- 图表 -->
			<view class="charts-box">
				<qiun-data-charts type="column" :chartData="gradeData.abilityChart.commonAnalyse" :loadingType="4"
					tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId931238"/>
			</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: {
			//成绩波动数据(标准差)
			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.abilityChart.importantAnalyse.series) {
					mainArr.push(arrSum(item.data))
				}
				for (let item of this.gradeData.abilityChart.commonAnalyse.series) {
					quizArr.push(arrSum(item.data))
				}
				//大小考试平均成绩
				this.avgMain = arrSum(mainArr) / mainArr.length
				this.avgquiz = arrSum(quizArr) / quizArr.length
				//标准差函数
				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)
			},

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

<style lang="scss">
	@import '@/gradepkg/common/chartpage.scss';
</style>