爱站程序员基地先看效果图
这是echarts官网上的一个示例，直接看option：
option = {tooltip: {trigger: \'item\',formatter: \'{a} <br/>{b}: {c} ({d}%)\'},legend: {orient: \'vertical\',left: 10,data: [\'直达\', \'营销广告\', \'搜索引擎\', \'邮件营销\', \'联盟广告\', \'视频广告\', \'百度\', \'谷歌\', \'必应\', \'其他\']},series: [{name: \'访问来源\',type: \'pie\',radius: [\'40%\', \'55%\'],label: {formatter: \'{a|{a}}{abg|}\\n{hr|}\\n {b|{b}：}{c} {per|{d}%} \',backgroundColor: \'#eee\',borderColor: \'#aaa\',borderWidth: 1,borderRadius: 4,// shadowBlur:3,// shadowOffsetX: 2,// shadowOffsetY: 2,// shadowColor: \'#999\',// padding: [0, 7],rich: {a: {color: \'#999\',lineHeight: 22,align: \'center\'},// abg: {// backgroundColor: \'#333\',// width: \'100%\',// align: \'right\',// height: 22,// borderRadius: [4, 4, 0, 0]// },hr: {borderColor: \'#aaa\',width: \'100%\',borderWidth: 0.5,height: 0},b: {fontSize: 16,lineHeight: 33},per: {color: \'#eee\',backgroundColor: \'#334455\',padding: [2, 4],borderRadius: 2}}},data: [{value: 335, name: \'直达\'},{value: 310, name: \'邮件营销\'},{value: 234, name: \'联盟广告\'},{value: 135, name: \'视频广告\'},{value: 1048, name: \'百度\'},{value: 251, name: \'谷歌\'},{value: 147, name: \'必应\'},{value: 102, name: \'其他\'}]}]};
formatter，标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \\n 换行。
字符串模板的模板变量有：
- {a}：系列名。
- {b}：数据名。
- {c}：数据值。
- {d}：百分比。
- {@xxx}：数据中名为’xxx’的维度的值，如{@product}表示名为’product’` 的维度的值。
- {@
}：数据中维度n的值，如{@[3]} 表示维度 3 的值，从 0 开始计数。
本例中label的formatter：
formatter: \'{a|{a}}{abg|}\\n{hr|}\\n {b|{b}：}{c} {per|{d}%} \',
其中{a},{b},{c},{d}是模板变量，a,abg,hr,b,per是自定义变量，在rich中定义。
