ECharts制作饼图，显示百分比、指示线

效果图：

html模块

<template>
	<div>
		<div id="ipage-chart-send" ref="send" style="height: 212px;"></div>
	</div>
</template>

data定义模块

data(){
	return{
		AllStatisticsNum:{},
	}
}

JS模块

activated() {
	this.renderChart()
},

 renderChart(){
		 let myChartSend = echarts.init(this.$refs.send);
		 var sData = [{
		     name: "满意",
		     value: this.AllStatisticsNum.satisfiedNum?this.AllStatisticsNum.satisfiedNum:0  //后端返回的满意值
		 }, {
		     name: "基本满意",
		     value: this.AllStatisticsNum.generallyNum?this.AllStatisticsNum.generallyNum:0   //后端返回的基本满意值
		 }, 
		 {
		     name: "不满意",
		     value: this.AllStatisticsNum.unSatisfiedNum?this.AllStatisticsNum.unSatisfiedNum:0   //后端返回的不满意值
		 },
		 ];
	
		 var legendData1 = [];
		 var legendData2 = [];
		 for (var i = 0; i < sData.length; i++) {
		     var itemName = sData[i].name;
		     legendData1.push(itemName)
				 var value = sData[i].value;
		     
		 }
		 var colorList = ['#AED849', '#FFEA8C', '#FFB39B'];
		 var option = {
		     backgroundColor: {
		         type: 'linear',
		         x: 0,
		         y: 0,
		         x2: 1,
		         y2: 1,
		         colorStops: [{
		             offset: 0,
		             color: '#fff' // 0% 处的颜色
		         }, {
		             offset: 1,
		             color: '#fff' // 100% 处的颜色
		         }],
		         globalCoord: false // 缺省为 false
		     },
		     title: {
		         text: '统计',
		         x: '57%',
		         y: 'center',
		         textStyle: {
		             color: '#fff'
		         }
		     },
		     tooltip: {
		         trigger: 'item',
		         borderColor: 'rgba(255,255,255,.3)',
		         backgroundColor: 'rgba(13,5,30,.6)',
		         borderWidth: 1,
		         padding: 5,
		         formatter: function(parms) {
		             var str = parms.marker + "" + parms.data.name + "</br>" +
		                 "数量：" + parms.data.value + "</br>" +
		                 "占比：" + parms.percent + "%";
		             return str;
		         }
		     },
		     legend: [{
		         type: "scroll",
		         orient: 'vertical',
		         icon: 'square',
		         left: '70%',
		         align: 'left',
		         top: '20%',
		         itemGap: 20,
		         textStyle: {
		             color: '#AAAAAA'
		         },
		         data: legendData1,
		     }],
		     series: [{
		         type: 'pie',
		         z: 3,
		         center: ['35%', '50%'],
		         radius: ['30%', '55%'],
		         clockwise: true,
		         avoidLabelOverlap: true,
		         hoverOffset: 15,
		         itemStyle: {
		             normal: {
		                 color: function(params) {
		                     return colorList[params.dataIndex]
		                 }
		             }
		         },
		         label: {
		             show: true,
		             position: 'outside',
		             formatter: '{a|{b}：{d}%}\n{hr|}',
		             rich: {
		                 hr: {
		                     backgroundColor: 't',
		                     borderRadius: 3,
		                     width: 3,
		                     height: 3,
		                     padding: [3, 3, 0, -12]
		                 },
		                 a: {
		                     padding: [-10, 15, -10, 10]
		                 }
		             }
		         },
		         labelLine: {
		             normal: {
		                 length: 16,
		                 length2: 26,
		                 lineStyle: {
		                     width: 1
		                 }
		             }
		         },
		         data: sData
		     }, 
				 ]
		 };
		 myChartSend.setOption(option);
		 window.onresize = function() {
		   myChartSend.resize();
		 };
		}