网课网站,门头沟做网站,注册帐号,淘宝网请人做淘宝客网站话不多说#xff0c;先上效果图。 要完成这个图并不难#xff0c;主要是下面那个图例比较难#xff0c;需要定制。
让我们从官方文档找找思路#xff0c;官方文档关于legend.formatter是这样的#xff1a;链接在这 难点在于#xff1a; 1.这里的图例文本包含两个变量先上效果图。 要完成这个图并不难主要是下面那个图例比较难需要定制。
让我们从官方文档找找思路官方文档关于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 datathis.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
