话不多说，先上效果图。
要完成这个图并不难，主要是下面那个图例比较难，需要定制。
让我们从官方文档找找思路，官方文档关于legend.formatter是这样的：链接在这
难点在于：
1.这里的图例文本包含两个变量，而formatter提供的变量模板只有name
2.两个变量的样式各不相同
3.对齐，换行与居中的应用formatter有两种：一是模板变量，而是回调函数。
显然，只有回调函数能够满足我们的需要。
自定义改造如下：
var pieChartData = [{value:1, name:'系统工具'},{value:3, name:'课程表'},{value:0, name:'意见反馈'},{value:43, name:'其他'}
]formatter: (name)=>{let data=this.pieChartData;let total = 0;let target;for (let i = 0, l = data.length; i < l; i ) {total = data[i].value;if (data[i].name == name) {target = data[i].value;}}let arr = ['{a|' name '}','{b|' ((target/total)*100).toFixed(2) '%}'
]return arr.join('\n')
},textStyle:{rich:{a:{fontSize:16,verticalAlign:'top',align:'center',padding:[0,15,28,0]},b:{fontSize:14,align:'center',padding:[0,15,0,0],lineHeight:25}}
}
更多专业前端知识，请上 【猿2048】www.mk2048.com
