MiniPrograms/gradepkg/arcbar-chart/arcbar-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"
				v-bind:style="{background: gradeData.rankArcbarChart.recentAnalyse.series[0].color}">
				<view class="item-text">{{gradeData.rankArcbarChart.recentAnalyse.series[0].name}}</view>
				<view class="item-number">{{gradeData.rankArcbarChart.recentAnalyse.series[0].data/0.01}}%</view>
				<view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 0 15rpx 10rpx 15rpx;">
					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.4"
						class="t-icon t-icon-jiangbei-20"></view>
					<view
						v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.7"
						class="t-icon t-icon-jiangbei-19"></view>
					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.7"
						class="t-icon t-icon-jiangbei-18"></view>
					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.4" class="icon-text-item">要加把劲!
					</view>
					<view
						v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.7"
						class="icon-text-item">再接再厉!</view>
					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.7" class="icon-text-item">
						非常优秀!</view>
				</view>
			</view>

			<view class="data-box-item"
				v-bind:style="{background: gradeData.rankArcbarChart.recentAnalyse.series[1].color}">
				<view class="item-text">{{gradeData.rankArcbarChart.recentAnalyse.series[1].name}}</view>
				<view class="item-number">{{gradeData.rankArcbarChart.recentAnalyse.series[1].data/0.01}}%</view>
				<view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 0 15rpx 10rpx 15rpx;">
					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.4"
						class="t-icon t-icon-jiangbei-20"></view>
					<view
						v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.7"
						class="t-icon t-icon-jiangbei-19"></view>
					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.7"
						class="t-icon t-icon-jiangbei-18"></view>
					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.4" class="icon-text-item">还需提升!
					</view>
					<view
						v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.7"
						class="icon-text-item">继续努力!</view>
					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.7" class="icon-text-item">
						格外出色!</view>
				</view>
			</view>
		</view>

		<!-- 图表列表 -->
		<!-- 单次分析 -->
		<view class="chart-container">
			<view class="chart-name">
				<view class="t-icon t-icon-xianxingpaiqiu"></view>
				<text class="chart-name-text">近期排行占比分析</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="arcbar" :chartData="gradeData.rankArcbarChart.recentAnalyse" :loadingType="4" :canvas2d='true' canvasId='canvans8939' />
			</view>
		</view>
		<!-- 走势 -->
		<view class="chart-container">
			<view class="chart-name">
				<view class="t-icon t-icon-xianxinglanqiu"></view>
				<text class="chart-name-text">{{semester}} 排行占比走势对比</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="area" :chartData="gradeData.rankArcbarChart.semesterAnalyse" :loadingType="4"
					:opts="{dataLabel: false}" :canvas2d='true' canvasId='canvans899' />
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		computed: {
			...mapState('m_children', ['childreninfo', 'semester']),
			...mapState('m_chart', ['gradeData'])
		},
		data() {
			return {};
		},
		methods: {
			//返回成绩页面
			returnList() {
				uni.switchTab({
					url: '/pages/grade/grade'
				})
			},
		},
		onLoad() {}
	}
</script>

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

	.page-box {
		background: linear-gradient(#ffd071, $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-item {
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			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: 100rpx;
				height: 100rpx;
			}

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

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