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: '',
				// name: '',
				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

						}
					}).then(res => {
						console.log(res)
						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++){
								// var _this = this
								this.name = res.data.data[i].storeMonthList[j].data
								let name = ""
								console.log(this.name)
								let monthObj = {
									data:null,
									name:'',
								}
								let quarterObj = {
									data:null,
									name:'',
								}
								name= res.data.data[i].storeMonthList[j].data
								console.log(name)
								monthObj.data = res.data.data[i].storeMonthList[j].data
								monthObj.name = res.data.data[i].storeMonthList[j].name
								quarterObj.data = res.data.data[i].storeQuarterList[j].data
								quarterObj.name = res.data.data[i].storeQuarterList[j].name
								
								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)
							// this[`${this.refVal}`]
						}
						
						
						// let HstoreMonthList = res.data.data[0].storeMonthList
						// let SstoreMonthList = res.data.data[1].storeMonthList
						// for(var i=0;i<HstoreMonthList.length;i++){
						// 	let obj = {
						// 		data:null,
						// 		name:'',
						// 	}
						// 	obj.data = HstoreMonthList[i].data
						// 	obj.name = HstoreMonthList[i].name
						// 	console.log(obj)
						// 	Pie.series[i] = obj
						// }
						// this.showPie("canvasPie", Pie);
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						// for (let i = 0; i < res.data.data.length; i++) {
						// 	for(let j=0;j<res.data.data[i].storeMonthList.length;j++){
						// 		let obj = {
						// 			data:null,
						// 			name:'',
						// 		}
						// 		console.log(res.data.data[i].storeMonthList[j].data)
						// 		console.log(res.data.data[i].storeMonthList[j].name)
						// 		obj.data = res.data.data[i].storeMonthList[j].data
						// 		obj.name = res.data.data[i].storeMonthList[j].name
						// 		Pie.series[j] = obj
						// 	}
						// 	this.showPie("canvasPie", Pie);
							// this.pieObj = res.data.data[i].storeMonthList
							// for(let j =0;j<res.data.data[i].storeMonthList.length;j++){
							// 	let obj = {
							// 		name:'',
							// 		data:null
							// 	}
							// 	obj.name = res.data.data[i].storeMonthList[j].name
							// 	obj.data = res.data.data[i].storeMonthList[j].data
							// 	Pie.series[j] = obj
							// 	console.log('^^^^^',Pie)
							// 	this.showPie("canvasPie",Pie);
							// }
							// let obj = {
							// 	name:'',
							// 	data:null
							// }
							// obj.name = res.data.data[i]
						// Pie.series = res.data.data[i].storeMonthList;
						// console.log(this.pieObj)
						// console.log(Pie)
						
						
						
						// }
						
					}).catch(err => {
						console.log(err)
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							this.loading = false;
						}, 300)
					})
			},
			showPie(canvasId, chartData) {
				console.log('8888888',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: 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: false,
					width: _self.cWidth,
					height: _self.cHeight,
					disablePieStroke: true,
					dataLabel: true,
					subtitle: {
						// name: 40,1
						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,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: 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;
	}

	.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>