echarts 饼图效果，显示其对应数值及百分比

需求：echarts 饼图效果，显示其对应数值及百分比

代码

<Chart1 :ecStyle="ecStyle" :ecOption="optionRight2"/>

<script>
	import Chart1 from "@/components/Chart";
	data(){
		return(){
			optionRight2:{
			  //表头菜单显示
			  //legend: {
				//left:'10%',
				//top:'5%',
				//bottom:'3%',
				//textStyle: {
					//color: '#fff'
				//}
			  //},
	          tooltip: {
	            trigger: 'item'
	          },
	          
	          series: [
	            {
	              name: '数量',
	              type: 'pie',
	              radius: ['35%', '60%'],
	              //center: ['50%', '58%'], 图表定位
	              avoidLabelOverlap: false,  //设置为true时，当数值为0时不重叠
	              itemStyle: {
	                borderRadius: 10,
	                borderColor: '#07076a',
	                borderWidth: 1
	              },
	              labelLine: {
	                show: true,
	              },
	              data: [
	                { value: 57, name: '商户',itemStyle:{color:'#fc8452'}},
	                { value: 117, name: '自由职业',itemStyle:{color:'#3ba272'}},
	                { value: 369, name: '大学生',itemStyle:{color:'#73c0de'}},
	                { value: 448, name: '农民工',itemStyle:{color:'#ee6666'}},
	                { value: 28, name: '医生',itemStyle:{color:'#fac858'}},
	                { value: 135, name: '工程师',itemStyle:{color:'#91cc75'}},
	                { value: 335, name: '其它',itemStyle:{color:'#5470c6'}},
	              ],
	              label:{
	                formatter:function(data){
	                  return `${data.name} ${data.value} 
	(${data.percent.toFixed(1)}%)`
	                }
	              }
	            }
	          ]
	        }
		}
	}
}

</script>

chart1组件

//chart1组件

<template>
    <div :style="ecStyle" ref="chartRef"></div>
</template>

<script>
export default {
    name: 'Chart',
    props: {
        ecStyle: {
            type: Object,
            default: function () {
                return {
                    width: '100%',
                    height: '100%'
                }
            }
        },
        ecOption: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    data() {
        return {
            chart: ''
        }
    },
    mounted() {
        this.setDrawChart()
    },
    methods: {
        setDrawChart() {
            this.chart = this.$echarts.init(this.$refs.chartRef)
            this.chart.clear()
            this.chart.setOption(this.ecOption)
            window.addEventListener('resize', this.chart.resize)
			
			//饼图点击的方法
			this.chart.on('click',function(param){
				//当前 name 代表饼图所定义的 name
				if(param.name == ''){}	
			})
			
        }
    },
    watch: {
        /**
         * 观察图表变化
         * @date 2020/8/26 13:54
         * @returns {Object}
         **/
        ecOption: {
            handler(newVal, oldVal) {
                if (this.chart) {
                    if (newVal) {
                        this.chart.setOption(newVal, true)
                    } else {
                        this.chart.setOption(oldVal)
                    }
                } else {
                    this.init()
                }
            },
            // 对象内部属性的监听
            deep: true
        }
    },
    destroyed() {
        /**
         * 销毁监听事件
         * @date 2020/8/26 13:55
         **/
        window.removeEventListener('resize', this.chart.resize)
    }
}
</script>

效果