uniapp 微信小程序端echarts扇形图_uni 扇形统计

 github地址：https://github.com/yah0130/echarts-wx-uniapp

插件地址：echarts-for-wx - DCloud 插件市场

具体流程参考github或者插件文档

 效果图

 主要代码：

<template>
	<view>
		<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
		</uni-ec-canvas>
	</view>
</template>
 
<script>
	import uniEcCanvas from '@/pagesIndex/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/pagesIndex/components/uni-ec-canvas/echarts'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				ec: {
					lazyLoad: true
				},
				option: {
					legend: {
						top: '0%',
						left: 'center',
						itemWidth: uni.upx2px(16), // 图例标记的图形宽度。
						itemHeight: uni.upx2px(16), //  图例标记的图形高度。
						itemGap: uni.upx2px(22), // 图例每项之间的间隔。
						textStyle: {
							color: "#000", // 文字的颜色。
							fontFamily: "sans-serif", // 文字的字体系列。
							fontSize: uni.upx2px(12), // 文字的字体大小。
							lineHeight: uni.upx2px(0), // 行高。
						},
					},
					//柱子颜色设置
					color: ['#78ce5e', '#fffd5e', '#F88421', '#42B1FF', '#FF5C50', '#B424D5', '#B89775', '#7D4E44',
						'#60AACD', '#97D6F4', '#3E6374', '#812890', '#E66520', '#D2D117', '#60594D', '#FF2C51',
						'#24C91D'
					],
					series: [{
						name: 'Access From',
						type: 'pie',
						// radius: '70%',
						radius: ['30%', '65%'],
						avoidLabelOverlap: false,
						data: [
							{ value: 1048, name: '10.80%' },
							{ value: 735, name: '20.80%' },
							{ value: 580, name: '5.80%' },
							{ value: 1048, name: '30.80%' },
							{ value: 735, name: '40.80%' },
							{ value: 580, name: '50.80%' },
							{ value: 1048, name: '60.80%' },
							{ value: 735, name: '70.80%' },
							{ value: 580, name: '80.90%' },
							{ value: 1048, name: '10.90%' },
							{ value: 735, name: '20.89%' },
							{ value: 580, name: '5.90%' },
							{ value: 1048, name: '30.90%' },
							{ value: 735, name: '40.90%' },
							{ value: 580, name: '50.90%' },
							{ value: 1048, name: '60.90%' },
 
						],
						label: {
							align: 'center',
							normal: {
                                formatter: '{c}万',    
								// position:'inner', //标签的位置
								color: '#000',
								textStyle: {
									fontSize: uni.upx2px(10),
								},
							},
 
						},
						labelLine: {
							normal: {
								length: 5,
								length2: 6
							},
 
						}
 
					}]
				}
			}
		},
		onLoad() {
			this.$nextTick(() => {
				this.$refs.canvas.init(this.initChart)
			})
 
		},
		methods: {
			initChart(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.option)
				console.log('setOption')
				return chart
			},
		}
	}
</script>
 
<style lang="scss">
	.uni-ec-canvas {
		width: 50%;
		height: 500rpx;
		display: block;
	}
</style>