二手网站开发文档模板/系统优化的意义

由于legen.formatter return的数据并不支持直接换行所以只能用/n进行换行。但是使用\n后的内容并不能很好的进行对齐，刚开始也是困扰了我很久，毕竟UI图已经定稿只能硬着头皮上了。

说一下我的方法:

1.使用formatter 先拿到想要的数据然后用\n进行换行

   formatter: function (name) {var target;for (var j = 0; j < legenddata.length; j++) {if (legenddata[j].name === name) {target = legenddata[j].value}}return "{a|"+[name]+"}"+'\n'+"{b|"+'总金额'+[target]+"}"},

2.\n换行后用rich进行控制

textStyle:{rich:{a:{align:'center',color:'#222222',padding:[25,0,10,0],//主要是通过padding来控制位置fontSize:14,fontWeight:400},// 控制b:{align:'center',color:'#999999',position:'absolute',padding:[0,0,0,-40],//主要是通过padding来控制位置fontSize:12,fontWeight:400}}}

最后给大家贴一段示例代码

var legenddata = [{value: 1048, name: '搜索引擎'},{value: 735, name: '直接访问'},{value: 580, name: '邮件营销'},{value: 484, name: '联盟广告'},{value: 300, name: '视频广告'}]
option = {tooltip: {trigger: 'item',formatter: '{b}\n{c}元({d}%)'},legend: {top: '1%',left: '1%', orient: 'vertical', formatter: function (name) {var target;for (var j = 0; j < legenddata.length; j++) {if (legenddata[j].name === name) {target = legenddata[j].value}}return "{a|"+[name]+"}"+'\n'+"{b|"+'总金额'+[target]+"}"},textStyle:{rich:{a:{align:'center',color:'#222222',padding:[25,0,10,0],fontSize:14,fontWeight:400},b:{align:'center',color:'#999999',position:'absolute',padding:[0,0,0,-40],fontSize:12,fontWeight:400}}}},series: [{type: 'pie',radius: ['40%', '20%'],center: ['50%', '40%'],labelLine: {length: 100,},label: {formatter: '{d}%',borderWidth: 1,borderRadius: 4,rich: {a: {color: '#6E7079',lineHeight: 22,align: 'center'},hr: {borderColor: '#8C8D8E',width: '100%',borderWidth: 1,height: 0},b: {color: '#4C5058',fontSize: 14,fontWeight: 'bold',lineHeight: 33},per: {color: '#fff',backgroundColor: '#4C5058',padding: [3, 4],borderRadius: 4}}},data: legenddata}]
};