雷达图

components/user/personalLearning.vue

@@ -39,9 +39,9 @@
 					</view>
 					<view class="title-text">成绩分布</view>
 				</view>
-				<view class="box2-table-box df fdr">
-					<!-- <radar class=""></radar> -->
-					<web-view class='webview' :src="url" v-if="url.length"></web-view>
+				<!-- <view class="box2-table-box df fdr"> -->
+				<view class="box2-table-box-cjfb df fdr aic">
+					<canvas canvas-id="canvasRadar" class="charts myRadar radarChat"></canvas>
 					<!-- 五维图暂缓 -->
 				</view>
 			</view>
@@ -130,16 +130,35 @@
 	</view>
 </template>
 <script>
-	// import radar from './radar.vue'
+	import uCharts from '@/components/u-charts/u-charts.js';
+	var _self;
+	var canvaRadar = null;
 	export default {
 		components: {
-			// radar
+			uCharts
 		},
-		onLoad() {
-
+		mounted() {
+			_self = this;
+			//#ifdef MP-ALIPAY
+			uni.getSystemInfo({
+				success: function(res) {
+					if (res.pixelRatio > 1) {
+						//正常这里给2就行，如果pixelRatio=3性能会降低一点
+						//_self.pixelRatio =res.pixelRatio;
+						_self.pixelRatio = 2;
+					}
+				}
+			});
+			//#endif
+			this.cWidth = uni.upx2px(900);
+			this.cHeight = uni.upx2px(900);
 		},
 		data() {
 			return {
+				cWidth: '',
+				cHeight: '',
+				pixelRatio: 1,
+				textarea: '',
 				url:'https://www.yuyekeji.cn/H5/radar.html',
 				//0添加1个人
 				showIndex_userInfo: 1,
@@ -183,28 +202,110 @@
 				this.model.Score_xnyscz=userController.getScore_xnyscz();
 			},
 			updateLearnProgress(data) {
-				// console.log('data=',data)
-				
-				if( data[0].Score!=-1)
-				{
-					this.YLRZ_P = parseInt(data[0].Score/10*100);
+				if (data[0].Score != -1) {
+					this.YLRZ_P = parseInt(data[0].Score / 10 * 100);
 				}
-				if( data[1].Score!=-1)
-				{
-					this.SJKC_P = parseInt(data[1].Score/5*100);
+				if (data[1].Score != -1) {
+					this.SJKC_P = parseInt(data[1].Score / 5 * 100);
 				}
-				
-				
+			
 				let totalScore = 0;
-				for(let i=2;i<16;i++)
-				{
-					if(data[i].Score!=-1)
-					{
+				for (let i = 2; i < 16; i++) {
+					if (data[i].Score != -1) {
 						totalScore++;
 					}
 				}
-				
-				this.XNSY_P = parseInt(totalScore/14*100);
+			
+				this.XNSY_P = parseInt(totalScore / 14 * 100);
+			
+				//五维图
+				let aData = [];
+				let miniPoint = 0;
+				//原理认知
+				if (data[0].Score == '-1') {
+					aData.push(miniPoint);
+				} else {
+					aData.push(parseInt(data[0].Score));
+				}
+			
+				//实景考察
+				if (data[1].Score == '-1') {
+					aData.push(miniPoint);
+				} else {
+					aData.push(parseInt(data[1].Score));
+				}
+				//虚拟技术搭建
+				let XNJSDJ_score = 0;
+				for (let i = 2; i < 5; i++) {
+					if (data[i].Score != '-1') {
+						XNJSDJ_score += parseInt(data[i].Score);
+					}
+				}
+				// = parseInt(data[3])+parseInt(data[4])+parseInt(data[5]);
+				aData.push(XNJSDJ_score);
+			
+				//虚拟艺术创作
+				// let XNYSCZ_score = parseInt(data[6])+parseInt(data[7])+parseInt(data[8])+parseInt(data[9])+parseInt(data[10])+parseInt(data[11])+parseInt(data[12])+parseInt(data[13])+parseInt(data[14])+parseInt(data[15]);
+				let XNYSCZ_score = 0;
+				for (let i = 6; i < 15; i++) {
+					if (data[i].Score != '-1') {
+						XNYSCZ_score += parseInt(data[i].Score);
+					}
+				}
+				aData.push(XNYSCZ_score);
+				// console.log('data=',data);
+				//教师评分（加分项目）
+				if (data[15].Score == '-1') {
+					aData.push(miniPoint);
+				} else {
+					aData.push(parseInt(data[15].Score));
+				}
+				// aData.push(parseInt(data[16]));
+				console.log('aData=', aData)
+			
+				this.getServerData(aData);
+			},
+			getServerData(aData) {
+				// let data = {"categories":["维度1","维度2","维度3","维度4","维度5","维度6"],"series":[{"name":"成交量1","data":[90,110,165,195,187,172]},{"name":"成交量2","data":[190,210,105,35,27,102]}]}
+				// let data = {"categories":["原理认知","实景勘察","虚拟技术搭建","虚拟艺术创作","教师评分(加分项目)"],"series":[{"name":"成绩分布","data":[90,110,165,195,187]}]}
+				// let data = {"categories":["维度1","维度2","维度3"],"series":[{"name":"成交量1","data":[90,110,165,195,187,172]}]}
+				let data = {
+					"categories": ["原理认知", "实景考察", "虚拟技术搭建", "虚拟艺术创作", "教师评分(加分项目)"],
+					"series": [{
+						"name": "成绩分布",
+						"data": aData
+					}]
+				}
+				_self.showRadar("canvasRadar", data);
+			},
+			showRadar(canvasId, chartData) {
+				canvaRadar = new uCharts({
+					$this: _self,
+					canvasId: canvasId,
+					type: 'radar',
+					fontSize: 11,
+					padding: [15, 15, 0, 15],
+					legend: {
+						show: true,
+						padding: 5,
+						lineHeight: 11,
+						margin: 0,
+					},
+					background: '#FFFFFF',
+					pixelRatio: _self.pixelRatio,
+					animation: true,
+					dataLabel: true,
+					categories: chartData.categories,
+					series: chartData.series,
+					width: _self.cWidth * _self.pixelRatio,
+					height: _self.cHeight * _self.pixelRatio,
+					extra: {
+						radar: {
+							max: 200, //雷达数值的最大值
+							gridType: 'radar' //radar或者circle可选，网格样式，默认radar
+						}
+					}
+				});
 			},
 		}
 	}
@@ -306,6 +407,19 @@
 		width: px2vw(1377);
 	}
 
+	.box2-table-box-cjfb {
+		display: flex;
+		/*父元素设置flex属性*/
+		justify-content: center;
+		/*水平主轴居中*/
+		align-items: center;
+		/*垂直交叉轴居中*/
+
+		width: px2vw(1377);
+		height: px2vw(500);
+		//宽度
+	}
+
 	.box2-table-box-left {
 		width: px2vw(500);
 	}
@@ -488,8 +602,11 @@
 		line-height: px2vw(26);
 		margin-left: px2vw(40);
 	}
-	.webview{
-		height: 650upx;
-		width: 500upx;
+	
+	.radarChat {
+		// border: 1px solid #DDDDDD;
+	
+		width: px2vw(600);
+		height: px2vw(600);
 	}
 </style>