个人博客地址：
http://xurui.club/2018/08/03/echart/
今天朋友写论文用到Echart做图，但是个性化的需要不知怎么做，找我帮忙。我很久没看前端的东西了，不过Echart那玩意好像很有意思，所以就接了下来。
先看需求。
1 将紫色框部分改成自己的内容
2 将红色框内容去掉
3 将蓝色框内容改成自己定义的类别，（三种）
于是看了下代码：
app.title = '嵌套环形图';
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
},
series: [
{
name:'访问来源',
type:'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直达', selected:true},
{value:679, name:'营销广告'},
{value:1548, name:'搜索引擎'}
]
},
{
name:'访问来源',
type:'pie',
radius: ['40%', '55%'],
label: {
normal: {
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:'其他'}
]
}
]
};
经过注释调试，发现需求1只要改最后一个data集合就好，把name和value换成自己自定义的内容。
而需求2 3 主要在
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} '
这里。把、
{c}
去掉即可。
最难搞的是需求3，用了2小时搞明白的。
这里是官方文档里的介绍
http://echarts.baidu.com/option.html#grid.tooltip.formatter
formatter有两种写法：一种字符串模板，另一种是回调函数。
字符串模型里写的是，我们要改的地方是该series中name的值，这里name只能有一个值，改name是不能了，所以我们可以像改需求1那样，在data中传一个变量。用回调函数，文档中对回调函数也没有写明白。这里用简单的语言再梳理一下。主要有两点：将需要的个性化信息显示出来，然后展现出好看的样式。
第一点：
我们的个性化需求在data里写
data:[
{value:335, name:'直达',flag:'type_1'},
{value:310, name:'邮件营销',flag:'type_1'},
{value:234, name:'联盟广告',flag:'type_1'},
{value:135, name:'视频广告',flag:'type_2'},
{value:1048, name:'百度',flag:'type_2'},
{value:251, name:'谷歌',flag:'type_2'},
{value:147, name:'必应',flag:'type_3'},
{value:102, name:'其他',flag:'type_3'}
]
也就是把我们需求3的内容
type_1,type_2,type_3
写在变量flag中，然后通过回调函数取出来，这里谁回调的先不管。
回调函数的写法：
formatter:function(params){
str = params.data.flag+ params.name+params.percent
return str
},
这里params就是我们的data，一条一条往里传。
看效果：
可以看到，内容改过了，就是丑了点。我们想改成原来的样子怎么办呢？这里正是官方文档中最让我头疼的，找了半天没找到，在网上也不找到解释的比较好的。
我们套用原有样式，只需要把我们的参数
params.name
这种替换到原来
{a}
这种的位置，我们的参数和其他内容用
+
连接。如下：
formatter:function(params){
str = '{a|'+ params.data.flag + '}{abg|}\n{hr|}\n {b|'+params.name+'：} {per|'+params.percent + '%}'
return str
},
// {a| 这种表示a样式，而{a}这种有固定的含义，{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比），样式里有条竖杠！记得区分。
最终效果：
