MiniPrograms/subpkg/exam/subject.vue

<!-- 考试科目分析图表页面 -->
<template>
	<view class="page-view">
		<top-return color="#FFF" text="优劣科目"></top-return>
		<!-- 背景 -->
		<view class="bg-box1"></view>
		<!-- 头部学期信息 -->
		<top-semester></top-semester>
		<!-- 分析列表 -->
		<view class="card-view">
			<view class="card-item" v-for="(item,index) in analysisData" :key="index"
				:style="{background: item.color,height: 200+ 'rpx'}">
				<view class="analysis-box">
					<view class="flex-baseline">
						<view class="analysis-text">{{item.title}}</view>
						<view class="analysis-text" style="font-size: 40rpx; margin-left: 20rpx;"> {{item.data.name}}
						</view>
					</view>
					<view class="flex-baseline">
						<view class="analysis-data">{{item.data.value}}%</view>
						<view class="analysis-text" style="margin-left: 20rpx;">得分率</view>
					</view>
				</view>
				<view class="icon-box">
					<view :class="item.data.value>=40?(item.data.value>=70?'t-icon t-icon-a-bianzu6':'t-icon t-icon-a-bianzu7'): 't-icon t-icon-a-bianzu8'"></view>
				</view>
			</view>
			<!-- 图表 -->
			<view class="card-item" style="width: 100%;">
				<view class="card-title">
					<view class="front-tag"></view>
					<view class="title">最近考试得分率对比</view>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="rose" :chartData="examChartData.subjectChartData[0]" :tapLegend="true"
						tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="subject_chart1"/>
				</view>
			</view>

			<view class="card-item" style="width: 100%;">
				<view class="card-title">
					<view class="front-tag"></view>
					<view class="title">学期平均得分率对比</view>
				</view>
				<view class="chart-box">
					<qiun-data-charts type="rose" :chartData="examChartData.subjectChartData[1]" :tapLegend="true"
						tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="subject_chart2"/>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		computed: {
			...mapState('m_chart', ['examChartData']),
		},
		data() {
			return {
				//分析模块数据
				analysisData: [{
					title: '优势科目',
					data: '',
					color: '#4169E1'
				}, {
					title: '劣势科目',
					data: '',
					color: '#ff8caf',
				}]
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				this.getAnalysisData()
			},
			getAnalysisData() {
				//获取成绩最好科目
				this.analysisData[0].data = this.examChartData.subjectChartData[1].series[0].data.reduce((pre, cur) => pre
					.value > cur.value ? pre : cur)
				//劣势科目
				this.analysisData[1].data = this.examChartData.subjectChartData[1].series[0].data.reduce((pre, cur) => pre
					.value < cur.value ? pre : cur)
			}
		}
	}
</script>

<style lang="scss">
	@import 'gradelist_pages.scss';
</style>