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() {
			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)
						console.log(this.$store.state.storeInfo.storeId)
						this.orderList = res.data.data
						
						
						for(var i=0;i<res.data.data.length;i++){
							let  monthPie = {
								series: []
							};
							let quarterPie = {
								series: []
							}
							for(var j=0;j<res.data.data[i].storeMonthList.length;j++){
								let monthObj = {
									data:null,
									name:'',
									percent:''
								}
								let quarterObj = {
									data:null,
									name:'',
									percent:'',
								}
								
								monthObj.data = res.data.data[i].storeMonthList[j].data
								monthObj.name = res.data.data[i].storeMonthList[j].name
								monthObj.percent = res.data.data[i].storeMonthList[j].percent
								quarterObj.data = res.data.data[i].storeQuarterList[j].data
								quarterObj.name = res.data.data[i].storeQuarterList[j].name
								quarterObj.percent = res.data.data[i].storeQuarterList[j].percent
								
								console.log('^^^^',monthObj)
								console.log('9999999',quarterObj)
								monthPie.series.push(monthObj)
								quarterPie.series.push(quarterObj)
							}
							
							console.log(`mouthPie${i}`,monthPie,quarterPie)
							 this.showPie(`mouthPie${i}`,monthPie);
							 this.showPie(`quarterPie${i}`,quarterPie)
						}
					}).catch(err => {
						console.log(err)
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							this.loading = false;
						}, 300)
					})
			},
			showPie(canvasId, chartData,percent) {
				console.log('8888888',canvasId,chartData,percent)
				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: 2,
						lineHeight: 26,
						margin: 1,
						//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: {
							offsetAngle: 0,
							ringWidth: 15 * _self.pixelRatio,
							labelWidth: 1
						}
					},
				});
				// 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)
				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>