uniapp使用uCharts绘制ring图

<template>
    <view class="qiun-charts">
        <canvas canvas-id="canvasRing" id="canvasRing" class="charts"
            :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
            @touchstart="touchRing"></canvas>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';

	var _self;
	var canvaRing = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: ''
			}
		},
		onLoad(option) {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
		},
		methods: {
			getHomeData() {
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: this.$URL + 'xxxx',
					method: 'get',
					data: {},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success(res) {
						uni.hideLoading();
						if (res.data.code == 200) {
							//饼状图
							_self.getRingData(res.data.obj.storeStatList)

						} else {
							if (res.data.msg == 'oops') {
								uni.reLaunch({
									url: '../login/login'
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						}
					},
					fail(err) {
						uni.hideLoading();
						console.log(err);
					}
				})
			},
			getRingData(storeStatList) {
				let myRes;
				if (storeStatList.length != 0) {
					myRes = storeStatList;
				} else {
					myRes = [{
							typeName: '超市',
							statActPrice: 0
						},
						{
							typeName: '食堂',
							statActPrice: 0
						}
					];
				}

				console.log('myRes:', myRes);

				let Ring = {
					series: []
				};
				let ringArr = [];
				for (let i in myRes) {
					let ringObj = {};
					ringObj.name = myRes[i].typeName;
					ringObj.data = myRes[i].statActPrice;
					ringArr.push(ringObj);
				}
				Ring.series = ringArr;
                //自定义文案示例，需设置format字段
				for (let i = 0; i < Ring.series.length; i++) {
					Ring.series[i].format = () => {
						return Ring.series[i].name + Ring.series[i].data
					};
				}
				_self.showRing('canvasRing', Ring);

			},
			//饼状图
			showRing(canvasId, chartData) {
				console.log('chartData.series', chartData.series);
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					colors: ['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d', '#00FFFF',
						'#FF00FF'
					],
					fontSize: 11,
					legend: {
						show: true,
						position: 'bottom',
						float: 'center',
						itemGap: 10,
						padding: 5,
						lineHeight: 26,
						margin: 5,
						borderWidth: 1
					},
					//圆中间那个标题
					title: {
					     name: '70%',
					    color: '#7cb5ec',
					     fontSize: 25*_self.pixelRatio,
					     offsetY:-10*_self.pixelRatio,
					 },
					//圆中间副标题
					 subtitle: {
					     name: '收益率',
					     color: '#666666',
					     fontSize: 15*_self.pixelRatio,
					     offsetY:0*_self.pixelRatio,
					 },
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 15 * _self.pixelRatio,
							labelWidth: 15
						}
					}
				});
			},
			touchRing(e) {
				canvaRing.touchLegend(e, {
					animation: true
				});
				canvaRing.showToolTip(e, {
					format: function(item) {
						console.log("item: ", item);
						return item.name + ':' + item.data;
					}
				});
			},
		}
	}
</script>

<style lang="less">
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>