vue+element+echarts 制作数据统计饼图

概要

vue+element+echarts：制作数据统计饼图

整体架构流程

1、安装环境：npm install
2、编译调试：npm run dev
3、部署打包：npm run build

主要代码

<div class="chart-pie" id="chartPie1">
mounted() {
			//获取页面的echarts图表
			this.chartPie1 = echarts.init(document.getElementById('chartPie1'));
},
this.formPie1(this.dataResult.hangup, 'dataPie1'); //挂断统计
this.chartPie1.setOption(this.dataPie1);
formPie1(dataPie, curveName) {
				let pieWidth = this.chartPie1.getWidth() / 2;
				let colors = ["#00C5D1", "#FFA572", "#D3D6DD"];
				let i = 0;
				this[curveName] = {
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)",
						transitionDuration: 0, //过度默认0.4s效果导致模糊
					},
					legend: {
						textStyle: {
							fontFamily: 'Source Han Sans CN, Source Han Sans CN',
							fontWeight: 400,
							fontSize: 12,
							color: '#6E87AB',
							lineHeight: 20,
							fontStyle: 'normal',
						},
						bottom: 2,
						left: 'center',
						data: ['正常挂断', '中途挂断', '无挂断状态'],
						selectedMode: false,
					},
					backgroundColor: '#fff', // 设置背景色
					series: [{
						name: '挂断统计',
						type: 'pie',
						radius: ['40%', '55%'],
						startAngle: 130, //饼图的起始角度配置
						minAngle: 5, //饼图的最小角度配置
						animationDuration: function(idx) {
							// 越往后的数据时长越大
							return idx * 600;
						},
						animationEasing: '挂断统计',
						animationDuration: 800,
						label: {
							alignTo: 'edge',
							formatter: '{name|{b}：{c}}\n{time|{d}%}',
							minMargin: 50,
							edgeDistance: 60,
							lineHeight: 24,
							rich: {
								time: {
									fontSize: 12,
									color: '#999',
								}
							}
						},
						labelLine: {
							length: 20,
							maxSurfaceAngle: 20
						},
						labelLayout: function(params) {
							const isLeft = params.labelRect.x < pieWidth;
							const points = params.labelLinePoints;
							// Update the end point.
							points[2][0] = isLeft ?
								params.labelRect.x :
								params.labelRect.x + params.labelRect.width;
							console.log("points：", points);
							return {
								labelLinePoints: points
							};
						},
						data: dataPie,
						itemStyle: {
							normal: {
								// 设置饼图的颜色
								color: function() {
									return colors[i++];
								}
							},
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
			},

小结

通过echarts官网查询参数：
图参数配置