sailun-tbr-web/pages/me/Statistical-task/index.vue

<template>
	<view class="top">
		<view class="qiun-charts">
			<view v-for="(item,index) in orderList" :key="index">
				<view class="content">
					<view class="qiun-charts-one">
					</view>
					<text class="qiun-charts-two">{{item.brand}}</text>
					<view style="display: flex;justify-content: space-between;">
						<view class="qiun-charts-three">
							<view>
							</view>
							<view>
								{{item.month}}
							</view>
						</view>
						<view class="qiun-charts-four">
							<view>
							</view>
							<view>
								{{item.quarter}}
							</view>
						</view>
					</view>
					<view class="content-one">
						<!--  -->
						<canvas :canvas-id="'mouthPie' + index" :id="'mouthPie' + index" class="charts" @touchstart="touchPie($event,'mouthPie' + index)" ></canvas>
						<!-- -->
						<canvas :canvas-id="'quarterPie' + index" :id="'quarterPie' + index" class="charts"  @touchstart="touchPie($event,'quarterPie' + index)"></canvas>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var canvasObj = {};
	import {
		request
	} from '../../../common/request/request'
	require("promise.prototype.finally").shim()
	import uCharts from '@/components/u-charts/u-charts.js';
	import {
		isJSON
	} from '@/common/checker.js';
	var _self;
	// var canvaPie = null;

	export default {
		data() {
			return {
				orderList: [],
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				piearr: [],
				textarea: '',
				// pieObj:{
				// 	series:[
				// 		{
				// 			data:60,
				// 			name:'已完成'
				// 		},
				// 		{
				// 			data:40,
				// 			name:'未完成'
				// 		},
				// 	]
				// },
				// pieObj2:{
				// 	series:[
				// 		{
				// 			data:60,
				// 			name:'已完成'
				// 		},
				// 		{
				// 			data:40,
				// 			name:'未完成'
				// 		},
				// 	]
				// }
			}
		},
		onLoad() {
			
			_self = this;
			_self.cWidth = uni.upx2px(370);
			_self.cHeight = uni.upx2px(320);
			// this.showPie('canvasRing')
		},
		created() {
			
		},
		onShow() {
			this.getDate()
		},
		
		methods: {
			getDate() {
				request({
						url: '/myapp/storeBrandTask',
						method: 'post',
						data: {
							"storeId":this.$store.state.storeInfo.storeId,
							'userId':this.$store.state.storeInfo.userId

						}
					}).then(res => {
						console.log(res)
						this.orderList = res.data.data
						this.getPieData()
						
						
						// this.showPie('mouthPie0',monthPie);
					}).catch(err => {
						console.log(err)
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							this.loading = false;
						}, 300)
					})
			},
			getPieData(){
				console.log('5555')
				for(var i=0;i<this.orderList.length;i++){
					var  monthPie = {
						series: []
					};
					var quarterPie = {
						series: []
					}
					for(var j=0;j<this.orderList[i].storeMonthList.length;j++){
						let monthObj = {
							data:null,
							name:'',
							percent:'',
							format:(val)=>{
									console.log(val)
									// return val.toFixed(0) + ''
									return val * 100 + '%'
									}
							
						}
						let quarterObj = {
							data:null,
							name:'',
							percent:'',
							format:(val)=>{
									console.log(val)
									// return val.toFixed(0) + ''
									
									return val * 100 + '%'
									}
						}
						
						
						monthObj.data = this.orderList[i].storeMonthList[j].data
						monthObj.name = this.orderList[i].storeMonthList[j].name
						monthObj.percent = this.orderList[i].storeMonthList[j].percent
						
						quarterObj.data = this.orderList[i].storeQuarterList[j].data
						quarterObj.name = this.orderList[i].storeQuarterList[j].name
						quarterObj.percent = this.orderList[i].storeQuarterList[j].percent
						
						// console.log('^^^^',monthObj)
						// console.log('9999999',quarterObj)
						monthPie.series.push(monthObj)
						quarterPie.series.push(quarterObj)
						// console.log(quarterPie.series[0].format)
					}
					
					// console.log(`mouthPie${i}`,monthPie,quarterPie)
					
					 this.showPie(`mouthPie${i}`,monthPie);
					 this.showPie(`quarterPie${i}`,quarterPie)
					// this[`${this.refVal}`]
				}
				// this.showPie('mouthPie0',monthPie);
			},
			showPie(canvasId, chartData) {
				console.log('88888')
				console.log(canvasId,chartData)
				canvasObj[canvasId]=new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					padding: [5, 5, 5, 5],
					legend: {
						show: true,
						position: 'bottom',
						float: 'center',
						itemGap: 10,
						padding: 0,
						lineHeight: 26,
						margin: 6,
						//backgroundColor:'rgba(41,198,90,0.2)',
						//borderColor :'rgba(41,198,90,0.5)',
						borderWidth: 1
					},
					background: '#fff',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth,
					height: _self.cHeight,
					disablePieStroke: true,
					dataLabel: true,
					subtitle: {
						name:chartData.series[0].percent ,
						color: '#7cb5ec',
						fontSize: 12 * _self.pixelRatio,
					},
					title: {
						name: '已完成',
						color: '#666666',
						fontSize: 13 * _self.pixelRatio,
					},
					extra: {
						pie: {
							ringWidth: 12 * _self.pixelRatio,
							labelWidth: 0.1,
							offsetAngle:0
						}
					},
				});
				// this.piearr = canvaPie.opts.series;
			},
			// touchRing(e) {
			// 	canvaRing.touchLegend(e, {
			// 		animation: false
			// 	});
			// 	canvaRing.showToolTip(e, {
			// 		format: function(item) {
			// 			return item.name + ':' + item.data
			// 		}
			// 	});
			// },
			touchPie(e,id){
				console.log(e,id)
				
				// canvaPie.touchLegend(e, {
				// 	animation: false
				// });
				canvasObj[id].showToolTip(e, {
						format: function (item) {
								return item.name + ':' + item.data 
						}
				});
			},
			
			
			
			
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750rpx;
		height: 331rpx;
		background: url(../../../static/sailun/background.png) no-repeat;
		background-size: 750rpx 331rpx;
	
	}
	
	.qiun-charts-one {
		width: 6rpx;
		height: 30rpx;
		background: #0292FD;
		position: relative;
		top: 20rpx;
		left: 30rpx;
	}
	
	.qiun-charts-two {
		position: relative;
		top: -18rpx;
		left: 60rpx;
		font-size: 26rpx;
		font-weight: bold;
	}
	
	.content {
		width: 702rpx;
		height: 410rpx;
		background: #FFFFFF;
		box-shadow: 0px 10px 40px 0px rgba(223, 223, 223, 0.91);
		border-radius: 18px;
		margin: 0 auto;
		position: relative;
		top: 20rpx;
	
		margin-bottom: 40rpx;
	
	}
	
	.content-one {
		display: flex;
		justify-content: space-between;
	}
	
	.charts {
		width: 380rpx;
		height: 450rpx;
		position: relative;
		top: -20rpx;
	}
	
	.qiun-charts-three>view:nth-child(1) {
		width: 24rpx;
		height: 24rpx;
		border: 6rpx solid #0094FE;
		transform: rotate(50deg);
		position: relative;
		top: 20rpx;
		left: 30rpx;
	}
	
	.qiun-charts-three>view:nth-child(2) {
		width: 180rpx;
		height: 22rpx;
		background-color: #000000;
		color: #fff;
		font-size: 15rpx;
		opacity: 0.3;
		text-align: center;
		position: relative;
		top: -2rpx;
		left: 40rpx;
		border-top-right-radius: 12rpx;
	}
	
	.qiun-charts-four {
		position: relative;
		right: 200rpx;
	}
	
	.qiun-charts-four>view:nth-child(1) {
		width: 24rpx;
		height: 24rpx;
		border: 6rpx solid #0094FE;
		transform: rotate(50deg);
		position: relative;
		top: 20rpx;
		left: 30rpx;
	}
	
	.qiun-charts-four>view:nth-child(2) {
		width: 150rpx;
		height: 22rpx;
		background-color: #000000;
		color: #fff;
		font-size: 15rpx;
		opacity: 0.3;
		text-align: center;
		position: relative;
		top: -2rpx;
		left: 40rpx;
		border-top-right-radius: 12rpx;
	}
</style>