图表展示方式切换

components/top-box/top-box.vue

@@ -16,7 +16,7 @@
 					<text class="detail" @click="setSemesterPicker = true">{{semester}}</text>
 					<!-- 选择学期 -->
 					<view class="select-icon">
-						<view class="t-icon t-icon-youjiantou" @click="setSemesterPicker = true"></view>
+						<u-icon name="arrow-down" color="#FFF" @click="setSemesterPicker = true"></u-icon>
 					</view>
 				</view>
 			</view>
@@ -149,7 +149,7 @@
 			}
 
 			.select-icon {
-				margin:2rpx 0 0 10rpx;
+				margin:7rpx 0 0 10rpx;
 				width: 30rpx;
 				height: 30rpx;
 			}

gradepkg/area-chart/area-chart.vue

@@ -17,10 +17,10 @@
 			<view class="chart-name">
 				<view class="t-icon t-icon-xianxinggangqin"></view>
 				<text class="chart-name-text">{{semester}} 单科与平均对比</text>
-
-				<view class="search-box" @click="setSubjectPicker = true">
-					<!-- 按钮绑定当前选择科目通过picker控制选择科目的变化 -->
-					<button class="btn">{{subjectCurrent}}</button>
+				<!-- 按钮区域 -->
+				<view class="btn-box" @click="setSubjectPicker = true">
+					<text class="btn">{{subjectCurrent}}</text>
+					<u-icon name="arrow-down" color="#3B4144;"></u-icon>
 				</view>
 			</view>
 			<!-- 图表 -->
@@ -35,30 +35,52 @@
 			<view class="chart-name">
 				<view class="t-icon t-icon-xianxingshoufengqin"></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">
+			<view class="charts-box" v-if="scoreTypeCurrent == '得分对比'">
 				<qiun-data-charts type="area" :chartData="gradeData.subjectAreaChart.majorSubjectComparison"
 					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId99998" />
 			</view>
+			<view class="charts-box" v-if="scoreTypeCurrent == '得分率对比'">
+				<qiun-data-charts type="area" :chartData="gradeData.subjectAreaChart.majorSubjectComparison"
+					:loadingType="4" tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId991398" />
+			</view>
+			
 		</view>
+		
 		<!-- 副科成绩走势 -->
 		<view class="chart-container">
 			<view class="chart-name">
 				<view class="t-icon t-icon-xianxingshoufengqin"></view>
 				<text class="chart-name-text">{{semester}} 副科走势对比</text>
+				<!-- 按钮 -->
+				<view class="btn-box" @click="switchScoreTypePicker = true">
+					<text class="btn">{{scoreTypeCurrent}}</text>
+				</view>
 			</view>
 			<!-- 图表 -->
-			<view class="charts-box">
+			<view class="charts-box" v-if="scoreTypeCurrent == '得分对比'">
 				<qiun-data-charts type="area" :chartData="gradeData.subjectAreaChart.minorSubjectComparison"
 					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId99997" />
 			</view>
+			<view class="charts-box" v-if="scoreTypeCurrent == '得分率对比'">
+				<qiun-data-charts type="area" :chartData="gradeData.subjectAreaChart.minorSubjectComparison"
+					:loadingType="4" tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId129997" />
+			</view>
 		</view>
 
 		<!-- 选择器 -->
-		<u-picker :show="setSubjectPicker" :columns="subjectList" ref="uPicker" @confirm="pickerConfirm"
+		<u-picker :show="setSubjectPicker" :columns="subjectList" @confirm="pickerConfirm"
 			@cancel="pickerCancel" :closeOnClickOverlay="true" @change="changeHandler" :immediateChange="true">
 		</u-picker>
+		<u-picker :show="switchScoreTypePicker" :columns="scoreTypeList" @confirm="scoreTypeConfirm"
+			@cancel="scoreTypeCancel" :closeOnClickOverlay="true" @change="changeHandler" :immediateChange="true">
+		</u-picker>
 
 
 	</view>
@@ -91,27 +113,36 @@
 				//immediate 属性用来声明此监听器是否在页面初次加载完毕后立即调用
 				immediate: true
 			},
-
 		},
 		data() {
 			return {
 				//假数据
 				getdata: getdata,
+				//科目切换
 				setSubjectPicker: false,
+				//数据展示切换
+				switchScoreTypePicker: false,
 				//科目列表
 				subjectList: [],
+				//数据维度列表
+				scoreTypeList: [
+					['得分对比','得分率对比']
+				],
+				//当前选择图表展示方式
+				scoreTypeCurrent: '',
 				//当前选择科目
 				subjectCurrent: '',
-				//科目暂存区
+				//暂存区
 				temp: '',
 			};
 		},
 		onLoad() {
 			this.setSubject()
+			this.setScoreType()
 		},
 		methods: {
 			...mapMutations('m_chart', ['updateSubjectAreaComparison']),
-			//科目切换事件
+			//切换事件
 			changeHandler(e) {
 				this.temp = e.value[0]
 			},
@@ -125,6 +156,24 @@
 						this.subjectCurrent = this.getSubjectList[0]
 				}
 			},
+			//设置默认图表模式
+			setScoreType(){
+				if(this.scoreTypeCurrent == '')
+				this.scoreTypeCurrent = this.scoreTypeList[0][0]
+			},
+			//切换统计图表模式
+			scoreTypeConfirm(e){
+				this.scoreTypeCurrent = this.temp
+				let that = this
+				setTimeout(function(){
+					uni.$showMsg('切换完成', 1000)
+					that.switchScoreTypePicker = false
+				},100)
+			},
+			scoreTypeCancel() {
+				uni.$showMsg('取消选择', 1000)
+				this.switchScoreTypePicker = false
+			},
 			//切换科目
 			pickerConfirm(e) {
 				//改变subjectCurrent并由监听器处理数据图表同步改变

gradepkg/common/chartpage.scss

@@ -59,19 +59,17 @@
 					margin-left: 10rpx;
 				}
 
-				.search-box {
+				.btn-box {
 					display: flex;
 					align-items: center;
 					margin-left: auto;
-					margin-right: 60rpx;
+					margin-right: 50rpx;
+					border-radius: $card-border-radius;
 					.btn {
+						margin-right: 10rpx;
 						line-height: 60rpx;
-						border-radius: $card-border-radius;
-						border: none;
-						color: #FFFFFF;
-						font-size: 26rpx;
-						font-weight: bold;
-						background-image: linear-gradient(to right, #de5f89, #f7bea2);
+						color: #3B4144;
+						font-size: 28rpx;
 					}
 				}
 			}

gradepkg/common/databox.scss

@@ -27,6 +27,18 @@
 				color: #FFFFFF;
 				font-weight: bold;
 			}
+			.item-number-mid {
+				font-size: 54rpx;
+				margin: 10rpx 0 10rpx 30rpx;
+				color: #FFFFFF;
+				font-weight: bold;
+			}
+			.item-number-mini{
+				font-size: 34rpx;
+				margin: 0rpx 0 10rpx 30rpx;
+				color: #FFFFFF;
+				font-weight: bold;
+			}
 			
 			.analysis-box{
 				display: flex;

gradepkg/rose-chart/rose-chart.vue

@@ -14,7 +14,8 @@
 		<view class="data-box">
 			<view class="data-box-item">
 				<view class="item-text">本学期优势科目为:</view>
-				<view class="item-number">{{bestSubject.name}}{{bestSubject.value}}分</view>
+				<view class="item-number-mid">{{bestSubject.name}}</view>
+				<view class="item-number-mini">得分率为:  {{bestSubject.value}}%</view>
 				<view class="analysis-box">
 					<view v-if="bestSubject.value>=80" class="t-icon t-icon-jiangbei-9"></view>
 					<view v-if="bestSubject.value<80 && bestSubject.value>=50" class="t-icon t-icon-jiangbei-10"></view>
@@ -27,7 +28,8 @@
 
 			<view class="data-box-item" style="background-color: #ff5959;">
 				<view class="item-text">本学期劣势科目为:</view>
-				<view class="item-number">{{worstSubject.name}}{{worstSubject.value}}分</view>
+				<view class="item-number-mid">{{worstSubject.name}}</view>
+				<view class="item-number-mini">得分率为:  {{worstSubject.value}}%</view>
 				<view class="analysis-box">
 					<view v-if="worstSubject.value>=80" class="t-icon t-icon-jiangbei-9"></view>
 					<view v-if="worstSubject.value<80 && bestSubject.value>=50" class="t-icon t-icon-jiangbei-10">
@@ -45,22 +47,22 @@
 		<view class="chart-container">
 			<view class="chart-name">
 				<view class="t-icon t-icon-xianxingyouyong"></view>
-				<text class="chart-name-text">{{semester}} 科目得分平均值分析</text>
+				<text class="chart-name-text">{{semester}} 科目得分率平均值分析</text>
 			</view>
 			<view class="charts-box">
 				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.semesterAnalyse" :loadingType="4"
-					:tapLegend="true" tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId713897"/>
+					:tapLegend="true" tooltipFormat='tooltipScoreShort'/>
 			</view>
 		</view>
 		<!-- 单次考试 -->
 		<view class="chart-container">
 			<view class="chart-name">
 				<view class="t-icon t-icon-xianxingmeishuhuahua"></view>
-				<text class="chart-name-text">最近考试科目得分分析</text>
+				<text class="chart-name-text">最近考试科目得分率分析</text>
 			</view>
 			<view class="charts-box">
 				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.recentAnalyse" :loadingType="4"
-					:tapLegend="true" tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId809061"/>
+					:tapLegend="true" tooltipFormat='tooltipScoreShort'/>
 			</view>
 		</view>
 

information/chart.js

@@ -153,10 +153,10 @@ export default {
 							"name": "年级平均分",
 							"data": [
 								533,
-								446,
-								464,
+								476,
+								484,
 								547,
-								455,
+								485,
 								502
 							]
 						}

uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -98,7 +98,7 @@ const cfu = {
 			return category + ' ' + item.name + ': ' + item.data + ' 分 '
 		},
 		"tooltipScoreShort": function(item, category, index, opts) {
-			return item.name + ': ' + item.data + ' 分 '
+			return item.name + '得分率: ' + item.data + ' % '
 		},
 		"tooltipPercent": function(item, category, index, opts) {
 			return category + ' ' + item.name + ': ' + item.data + ' % '