weapp-v1/components/ucharts-pie.vue

<template>
	<view class="ucharts-pie">
		<view class="title">第{{ season }}赛季产品销售量统计</view>
		<view class="total">
			<view class="text">产品总销量</view>
			<view class="num"> {{ total }} 套</view>
		</view>
		<canvas @touchstart="touchPie" :canvas-id="id" :id="id" :style="{'width':cWidth+'px','height':cHeight+'px'}"></canvas>
	</view>
</template>

<script>
	import uCharts from '../common/js/u-charts.js'
	let canvaPie = null
	export default {
		props: {
			chartData: Object,
			season: String
		},
		data() {
			return {
				id: 'ucharts-pie',
				cWidth:'',
				cHeight:'',
				color: ['#88D8C9', '#EF7D65', '#7ACDEA', '#0088ff', '#FED600'],
				total: 0
			}
		},
		methods: {
			touchPie (e) {
				canvaPie.showToolTip(e, {
					format: function (item) {
						return item.name + ' : ' + item.data 
					}
				});
			},
			updateData (data) {
				let total = 0
				data.series.forEach(item => {
					console.log(item.data)
					item.textColor = '#FA6342'
					total += item.data
				})
				this.total = total
				canvaPie.updateData(data)
			}
		},
		created () {
			this.cWidth= uni.upx2px(750);
			this.cHeight= uni.upx2px(370);
			this.chartData.series.forEach(item => {
				item.textColor = '#FA6342'
				this.total += +item.data
			})
		},
		mounted () {
			canvaPie = new uCharts({
				$this: this,  //传入this
				canvasId: this.id,  //传入id
				colors: this.color,  //柱状图颜色
				type: 'pie',  //类型柱状图
				fontSize: uni.upx2px(24),  //字体大小
				background:'#FFFFFF',  //背景色
				pixelRatio: 1,  //像素比，默认为1，仅支付宝小程序需要大于1，其他平台必须为1
				animation: true,  //展示动画
				series: this.chartData.series,  //数据
				extra: {
					pie: {
						offsetAngle: 90,  //饼图旋转角度
						labelWidth: uni.upx2px(8),
						activeRadius: uni.upx2px(6),
					}
				},
				width: this.cWidth,  //图表宽
				height: this.cHeight,  //图表高
			})
		}
	}
</script>

<style lang="scss" scoped>
	.ucharts-pie {
		width: 100%;
		height: 410rpx;
		position: relative;
		.title {
			position: absolute;
			width: 100%;
			height: 85rpx;
			line-height: 85rpx;
			text-align: center;
			font-size: 26rpx;
			color: rgba(42,42,42,1);
		}
		.total {
			position: absolute;
			z-index: 1;
			left: 60rpx;
			top: 60rpx;
			width: 130rpx;
			text-align: center;
			.text {
				height: 24rpx;
				line-height: 24rpx;
				font-size: 24rpx;
				color: rgba(153,153,153,1);
				margin-bottom: 12rpx;
			}
			.num {
				height: 30rpx;
				font-size: 30rpx;
				line-height: 30rpx;
				color: rgba(51,51,51,1);
			}
		}
		canvas {
			position: absolute;
			bottom: 0;
		}
	}
</style>