MiniPrograms/gradepkg/general-chart/general-chart.vue

<template>
	<view class="page-box">

		<!-- 返回按钮 -->
		<back></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="chart-container">
			<view class="chart-name">
				<view class="t-icon t-icon-beach"></view>
				<text class="chart-name-text">{{semester}} 总成绩对比</text>
				<!-- 按钮区域 -->
				<view class="btn-box">
					<text class="btn"  @click="tooltipMsg">图表详情</text>
					<u-icon name="question-circle" color="#3B4144;"  @click="tooltipMsg"></u-icon>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="area" :chartData="gradeData.semesterLineChart.generalComparison"
					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId9999" />
			</view>
		</view>
		<!-- 单科与平均成绩对比 -->
		<view class="chart-container">
			<view class="chart-name">
				<view class="t-icon t-icon-bridge"></view>
				<text class="chart-name-text">{{semester}} 单科与平均对比</text>
				<!-- 按钮区域 -->
				<view class="btn-box" @click="setSubjectPicker = true">
					<text class="btn">{{subjectCurrent}}</text>
					<u-icon name="arrow-down" color="#3B4144;"></u-icon>
				</view>
			</view>
			<!-- 图表 -->
			<view class="charts-box">
				<qiun-data-charts type="area" :chartData="gradeData.semesterLineChart.singleAverageComparison"
					:loadingType="4" background="none" tooltipFormat='tooltipScore' :canvas2d="true"
					canvasId="canvasId99999" />
			</view>
		</view>
		<!-- 单科成绩走势 -->
		<view class="chart-container">
			<view class="chart-name">
				<view class="t-icon t-icon-cape"></view>
				<text class="chart-name-text">{{semester}} 单科走势对比</text>
				<!-- 按钮 -->
				<view class="btn-box" @click="switchScoreTypePicker = true">
					<text class="btn">{{scoreTypeCurrent}}</text>
					<u-icon name="arrow-down" color="#3B4144;"></u-icon>
				</view>
			</view>
			<!-- 图表 -->
			<view class="charts-box" v-if="scoreTypeCurrent === '得分'">
				<qiun-data-charts type="area" :chartData="gradeData.semesterLineChart.subjectComparison"
					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId99998" />
			</view>
			<view class="charts-box" v-if="scoreTypeCurrent === '得分率'">
				<qiun-data-charts type="area" :chartData="gradeData.semesterLineChart.subjectComparison"
					:loadingType="4" tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId991398" />
			</view>
		</view>


		<!-- 选择器 -->
		<!-- 科目选择 -->
		<u-picker :show="setSubjectPicker" :columns="subjectList" @confirm="pickerConfirm" @cancel="pickerCancel"
			:closeOnClickOverlay="true" :immediateChange="true">
		</u-picker>
		<!-- 得分展示模式选择 -->
		<u-picker :show="switchScoreTypePicker" :columns="scoreTypeList" @confirm="scoreTypeConfirm"
			@cancel="pickerCancel" :closeOnClickOverlay="true" :immediateChange="true">
		</u-picker>


	</view>
</template>

<script>
	import getdata from '../../common/data.js'
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'

	export default {
		computed: {
			...mapState('m_children', ['childreninfo', 'semester']),
			...mapState('m_chart', ['gradeData']),
			...mapGetters('m_chart', ['getSubjectList'])
		},
		//picker选择科目的变化通过监听器，监听变化并做出对应图表的整体变化
		watch: {
			//对象形式监听subjectCurrent的变化
			subjectCurrent: {
				//newValue为变化后的新值
				handler(newValue) {
					//拿到对应图表数据
					let subjectChartData = this.getdata.find(x => x.series[0].name.includes(newValue))
					this.updateSubjectComparison(subjectChartData)
				},
				//immediate 属性用来声明此监听器是否在页面初次加载完毕后立即调用
				immediate: true
			},
		},
		data() {
			return {
				//模拟数据
				getdata: getdata.subjectData,
				//科目切换
				setSubjectPicker: false,
				//数据展示切换
				switchScoreTypePicker: false,
				//科目列表
				subjectList: [],
				//数据维度列表
				scoreTypeList: [
					['得分', '得分率']
				],
				//主科图表展示方式
				scoreTypeCurrent: '',
				//当前选择科目
				subjectCurrent: '',
			};
		},
		onLoad() {
			this.setSubject()
			this.setScoreType()
		},
		methods: {
			...mapMutations('m_chart', ['updateSubjectComparison']),
			//设置孩子科目
			setSubject() {
				//通过table获取孩子考试科目
				if (this.subjectList.length === 0) {
					let res = [this.getSubjectList]
					this.subjectList = res
					if (this.subjectCurrent === '')
						this.subjectCurrent = this.getSubjectList[0]
				}
				console.log('111',this.subjectList);
				console.log('222',this.subjectCurrent);
			},
			//设置默认图表模式
			setScoreType() {
				if (this.scoreTypeCurrent == '')
					this.scoreTypeCurrent = this.scoreTypeList[0][0]
			},
			//图表模式
			scoreTypeConfirm(e) {
				this.scoreTypeCurrent = e.value[0]
				uni.$showMsg('切换完成', 1000)
				this.switchScoreTypePicker = false
			},
			//切换科目
			pickerConfirm(e) {
				//改变subjectCurrent并由监听器处理数据图表同步改变
				this.subjectCurrent = e.value[0]
				uni.$showMsg('切换完成', 1000)
				this.setSubjectPicker = false
			},
			//取消picker
			pickerCancel() {
				uni.$showMsg('取消选择', 1000)
				this.setSubjectPicker = false
				this.switchScoreTypePicker = false
			},
			//提示信息
			tooltipMsg() {
				uni.$showMsg('点击图表展示更多信息', 1500)
			}
		}
	}
</script>

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

	.page-box {
		background: linear-gradient($color-blue, $page-background-color);
	}
</style>