edu-uniapp/pages/aiCt/ucharts.vue

<template>
	<view class="report-content">
		<view class="topinfo">
			<image style="margin: 40upx;"  src="/static/img/ai_top.png"></image>
			<view class="mark">得分：18</view>
		</view>
		
		<view class="ehcarts-title">测评结果等级</view>
		
		<view>
			<image style="margin: 40upx;" src="/static/img/A.png"></image>
			<!-- <view>得分DSDSD</view> -->
		</view>
		
		<view class="ehcarts-title">评测分析</view>
		
		<view class="qiun-columns">
			<view >
				<view class="item">学科: 语文</view>
				
				<view class="item">试题数量: 100</view>
			</view>
			<view >	
				<view class="item">总分: 100</view>
				<view class="item">知识点: 100</view>
			</view>
			<view class="qiun-charts">
				<canvas canvas-id="canvasPie"
					id="canvasPie" 
					class="charts" 
					:width="cWidth * pixelRatio" 
					:height="cHeight * pixelRatio" 
					:style="{'width': cWidth + 'px', 'height' : cHeight+'px'}" 
					@touchstart="touchPie($event, 'canvasPie')">
				</canvas>
		    </view>
		</view> 
	    <view class="ehcarts-title">知识点掌握情况</view> 
		
		<view class="qiun-columns">
			<view class="qiun-charts3">
				<!--#ifdef MP-ALIPAY -->
				<canvas 
				canvas-id="canvasArcbar1"
				 id="canvasArcbar1" 
				 class="charts3" 
				 :style="{'position': relative, 'left': 20%,  'width':cWidth3*pixelRatio+'px','height':cHeight3*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left': '200px','margin-top':-cHeight3*(pixelRatio-1)/2+'px'}"></canvas>
				<canvas canvas-id="canvasArcbar2" id="canvasArcbar2" class="charts3" :style="{'width':cWidth3*pixelRatio+'px','height':cHeight3*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':cWidth3-cWidth3*(pixelRatio-1)/2+'px','margin-top':-cHeight3*(pixelRatio-1)/2+'px'}"></canvas>
				<!--#endif-->
				
				<!--#ifndef MP-ALIPAY -->
				<canvas 
				canvas-id="canvasArcbar1"
				 id="canvasArcbar1" class="charts3"></canvas>
				<canvas 
				canvas-id="canvasArcbar2"
				 id="canvasArcbar2" 
				 class="charts3" style="margin-left: 250upx;">
				 </canvas>
				<!--#endif-->
			</view>
			
		</view> 
		
		<view class="ehcarts-title">测评结果</view> 
		
		<view style="margin-top: 10px;" class="qiun-columns">
			<ai-progress 
			  content="知识点二"
			  :lineData="true" 
			  strokeWidth="20" 
			  :textInside="true" percentage="80">
			 </ai-progress>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	import aiProgress from '@/components/ai-progress/ai-progress.vue'
	import { mapGetters } from 'vuex'
	var _self;
	var canvasObj = {};

	export default {
		components: {aiProgress},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50
			}
		},
		
		computed: {
			...mapGetters({
				studentId: 'paper/getStudentId'
			})
		},
		onLoad() {
			_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(750);
			this.cHeight = uni.upx2px(500);
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(1100);
			this.cWidth3 = uni.upx2px(250);
			this.cHeight3 = uni.upx2px(250);
			this.arcbarWidth = uni.upx2px(24);
			this.gaugeWidth = uni.upx2px(30);

            this.getCtTestReport() 
			//this.fillData(Data);
		},
		
		onReady() {
			this.getServerData();
		},
		
		methods: {
			
		  getCtTestReport () {
			this.$httpApi.get('/front/paper/getQuestionByPaperId', params)
			   .then(response => {
				   
				}) 
		  },  
		  getServerData() {
			uni.showLoading({
				title: "正在加载数据..."
			})
			uni.request({
				url: 'https://unidemo.dcloud.net.cn/hello-uniapp-ucharts-data.json',
				data: {},
				success: function(res) {
					_self.fillData(res.data);
				},
				fail: () => {
					_self.tips = "网络错误，小程序端请检查合法域名";
				},
				complete() {
					uni.hideLoading();
				}
			});
		},
		
		fillData(data) {
			this.serverData = data;
			this.tips = data.tips;
			this.sliderMax = data.Candle.categories.length;
			let Pie = {
				series: []
			}
		
			let Arcbar1 = {
				series: []
			}
			let Arcbar2 = {
				series: []
			}
			Pie.series = data.Pie.series;
			Arcbar1.series = data.Arcbar1.series;
			Arcbar2.series = data.Arcbar2.series;
			this.showPie("canvasPie", Pie);
			this.showArcbar("canvasArcbar1", Arcbar1);
			this.showArcbar2("canvasArcbar2", Arcbar2);
		},
		
		showPie(canvasId, chartData) {
			canvasObj[canvasId] = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'pie',
				fontSize: 11,
				padding:[15,15,0,15],
				legend:{
					show:true,
					padding:5,
					lineHeight:11,
					margin:0,
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData.series,
				animation: false,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				dataLabel: true,
				extra: {
					pie: {
						lableWidth: 15
					}
				},
			})
		},
		
		showRadar(canvasId, chartData) {
			canvasObj[canvasId] = 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: false,
				dataLabel: true,
				categories: chartData.categories,
				series: chartData.series,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					radar: {
						max: 200 //雷达数值的最大值
					}
				}
			})
		},
		
		showArcbar(canvasId, chartData) {
			new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'arcbar',
				fontSize: 11,
				title: {
					name: Math.round(chartData.series[0].data * 100) + '%',
					color: chartData.series[0].color,
					fontSize: 25 * _self.pixelRatio
				},
				subtitle: {
					name: chartData.series[0].name,
					color: '#666666',
					fontSize: 15 * _self.pixelRatio
				},
				extra: {
					arcbar: {
						type: 'default',
						width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
					}
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData.series,
				animation: false,
				width: _self.cWidth3 * _self.pixelRatio,
				height: _self.cHeight3 * _self.pixelRatio,
				dataLabel: true,
			})
		},
		
		showArcbar2(canvasId, chartData) {
			new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'arcbar',
				fontSize: 11,
				title: {
					name: Math.round(chartData.series[0].data * 100) + '%',
					color: chartData.series[0].color,
					fontSize: 25 * _self.pixelRatio
				},
				subtitle: {
					name: chartData.series[0].name,
					color: '#666666',
					fontSize: 15 * _self.pixelRatio
				},
				extra: {
					arcbar: {
						type: 'default',
						width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
						backgroundColor: '#ffe3e8',
						startAngle: 1.25,
						endAngle: 0.75
					}
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData.series,
				animation: false,
				width: _self.cWidth3 * _self.pixelRatio,
				height: _self.cHeight3 * _self.pixelRatio,
				dataLabel: true,
			})
		},
		
		
		changeData() {
			canvasObj['canvasColumn'].updateData({
				series: _self.serverData.ColumnB.series,
				categories: _self.serverData.ColumnB.categories
			})
		},
					
					
		touchPie(e,id) {
			canvasObj[id].showToolTip(e, {
				  format: function(item) {
					  return item.name + ':' + item.data
				  }
			  })
		    },
		}
	}
</script>

<style>
	
	.report-content {
		width: 100%;
		height: 100%;
		
	}
	.mark {
		position: relative;
		right: 5%;
		text-align: center;
		font-size: 22px;
		font-weight: 700;
	}
	.ehcarts-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: white;
		padding: 30upx 30upx 30upx 50upx;
		margin-top: 20upx;
		width: 100%;
		position: relative;
		background-color:  #FF9966;
		border-bottom: 1px  #FF9966 solid
	}
	
	.qiun-columns .item {
		/* width: 20upx; */
		display: inline-block;
		float: left;
		margin-top: 20upx;
		margin-bottom: 20upx;
		margin-left: 50upx;
	}
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	/* 通用样式 */
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	/* 横屏样式 */
	.qiun-charts-rotate {
		width: 700upx;
		height: 1100upx;
		background-color: #FFFFFF;
		padding: 25upx;
	}

	.charts-rotate {
		width: 700upx;
		height: 1100upx;
		background-color: #FFFFFF;
	}

	/* 圆弧进度样式 */
	.qiun-charts3 {
		width: 750upx;
		height: 250upx;
		background-color: #FFFFFF;
		position: relative;
	}

	.charts3 {
		position: absolute;
		width: 250upx;
		height: 250upx;
		background-color: #FFFFFF;
	}

	.qiun-tip {
		display: block;
		width: auto;
		overflow: hidden;
		padding: 15upx;
		height: 30upx;
		line-height: 30upx;
		margin: 10upx;
		background: #ff9933;
		font-size: 30upx;
		border-radius: 8upx;
		justify-content: center;
		text-align: center;
		border: 1px solid #dc7004;
		color: #FFFFFF;
	}
</style>