sailun-tbr-web/pages/home/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: [],
				data: '',
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				piearr: [],
				textarea: '',
				offsetX: 0
			}
		},
		onLoad() {

			_self = this;
			_self.cWidth = uni.upx2px(370);
			_self.cHeight = uni.upx2px(320);
			// this.showPie('canvasRing')
		},
		created() {
			uni.setNavigationBarTitle({
			    title: this.$t('taskStatistics.title')
			});
			
			// canvas 中间标题不同语言情况下不居中显示
			let self = this
			uni.getStorage({
			    key: 'lang',
			    success: function (res) {
					if (res.data && res.data === 'en') {
						self.offsetX = 12
					} else {
						self.offsetX = 0
					}
			    }
			});
			
			
		},
		onShow() {
			this.getDate()
		},

		methods: {
			getDate() {
				uni.showLoading({
					title: this.$t('unified.Loading')
				});
				request({
						url: '/myapp/storeBrandTask',
						method: 'post',
						data: {
							"storeId": this.$store.state.storeInfo.storeId,
							'userId': this.$store.state.storeInfo.userId

						}
					}).then(res => {
						this.orderList = res.data.data
						this.getPieData()
					}).catch(err => {
						
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							this.loading = false;
						}, 300)
					})
			},
			getPieData() {
				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) => {

								return (val * 100).toFixed()+"%"
							}
						}
						let quarterObj = {
							data: null,
							name: '',
							percent: '',
							format: (val) => {
								return (val * 100).toFixed()+"%"
							}
						}
						monthObj.data = this.orderList[i].storeMonthList[j].data
						this.data = this.orderList[i].storeMonthList[j].data
						monthObj.name = this.orderList[i].storeMonthList[j].name+":"+this.orderList[i].storeMonthList[j].data
						monthObj.percent = this.orderList[i].storeMonthList[j].percent
						quarterObj.data = this.orderList[i].storeQuarterList[j].data
						quarterObj.name = this.orderList[i].storeQuarterList[j].name+":"+this.orderList[i].storeQuarterList[j].data
						quarterObj.percent = this.orderList[i].storeQuarterList[j].percent
						quarterPie.series.push(quarterObj)
						monthPie.series.push(monthObj)
					}
					this.showPie(`mouthPie${i}`, monthPie);
					this.showPie(`quarterPie${i}`, quarterPie)
				}
			},
			showPie(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 9,
					padding: [5, 5, 5, 5],
					legend: {
						show: true,
						position: 'bottom',
						float: 'center',
						itemGap: 10,
						padding: 0,
						lineHeight: 26,
						margin: 6,
						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: 15 * _self.pixelRatio,
					},
					title: {
						name: this.$t('uView.finished'),
						color: '#666666',
						offsetX: this.offsetX,
						fontSize: 13 * _self.pixelRatio,
					},
					extra: {
						pie: {
							ringWidth: 12 * _self.pixelRatio,
							labelWidth: 0.1,
							offsetAngle: 0
						}
					},
				});
			},
			touchPie(e, id) {
				canvasObj[id].showToolTip(e, {
					format: function(item) {
						return item.name
					}
				});
			},
		}
	}
</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: 210rpx;
		line-height: 26rpx;
		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: 180rpx;
		line-height: 26rpx;
		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>