uni-app 饼状图

大体样式为这种：

一、下载组件：

秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

下载好组件之后用import 导入到项目中

二、代码部分：

<view class="chartsMain" style="width: 99.9%;">
	<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie">        
    </canvas>
</view>

import uCharts from "@/uni_modules/u-charts/u-charts.js";
	var _self;
	var canvaPie = null;
export default {		 
	data() {
        return {
            pixelRatio: 1,
			cWidth: '',
			cHeight: '',
            // 饼状图
			"Pie": {
				"series": []
			},
        }
    },
    onLoad() {
		//页面加载
        _self = this;
        this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(420);
    },
    methods: {
        //在获取后端数据时调用this.getServerData()
		getServerData() {
			_self.showPie("canvasPie", this.Pie);
		},
		touchPie(e) {
            //点击扇形显示信息
			canvaPie.showToolTip(e, {
				format: function(item) {
					console.log(item)
					return item.name + ':' + item.data
                    //注意！需要显示的字段名必须为'name'和'data'
				}
			});
		},
		// 饼状图
		showPie(canvasId, chartData) {
			canvaPie = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'pie',
				fontSize: 11,
				legend: true,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: _self.Pie.series,
				animation: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				dataLabel: true,
				extra: {
					pie: {
						lableWidth: 15
					}
				},
			});
			console.log(this.Pie.series)
		},
    }
}

.chartsMain {
	width: 750rpx;
	height: 450rpx;
	padding-top: 15rpx;
	background: #fff;
	margin-bottom: 24rpx;
	border-top: 2rpx solid #f2f2f2;
	.charts {
		width: 750rpx;
		height: 450rpx;
		box-sizing: border-box;
	}
}