vue echarts饼状图百分比展示

设置label的formatter。

label: {
	show: true,
	formatter: '{b} : {d}%'
},

已封装好，可直接复制使用。

<template>
	<!-- 饼状图 -->
	<div ref="echart" :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '500px'
			},
			height: {
				type: String,
				default: '300px'
			},
			chartData: {
				type: Array,
				required: true
			},
		},
		data() {
			return {
				chart: null,
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOptions(val)
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart()
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$refs.echart);
				this.setOptions(this.chartData)
			},
			setOptions(data) {
				this.chart.setOption({
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {d}%'
					},
					legend: {
						orient: 'vertical',
						left: 'right',
						top: 'bottom'
					},
					series: [{
						type: 'pie',
						radius: '50%',
						data: data,
						itemStyle: {
							normal: {
								label: {
									show: true,
									formatter: '{b} : {d}%'
								},
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
						}
					}]
				})
			}
		}
	}
</script>