MiniPrograms/gradepkg/line-chart/line-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="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="gradeData.semesterLineChart.lineComparison" :loadingType="4" :canvas2d='true' canvasId='canvans8931239'/>
			</view>
		</view>
		<!-- 主科总成绩图表 -->
		<view class="chart-container">
			<view class="chart-name">
				<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="gradeData.semesterLineChart.majorComparison" :loadingType="4" :canvas2d='true' canvasId='canvans85656939'/>
			</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="gradeData.semesterLineChart.minorComparison" :loadingType="4"/>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	
	export default {
		computed:{
			...mapState('m_children',['childreninfo','semester']),
			...mapState('m_chart', ['gradeData'])
		},
		
		data() {
			return {
				//查询参数
				queryObj: {},

			}
		},
		methods:{
			//返回成绩页面
			returnList(){
				uni.switchTab({
					url: '/pages/grade/grade'
				})
			},
		},
		onLoad(){
		}
	}
</script>

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