在最近的项目中,客户希望实现同心圆,和官网上的饼图略有区别。
要求:每层只有一个数据,而且每个环之间没有间隙,最内层圆为实心。
然后重新研究了一下嵌套环形图(http://echarts.baidu.com/demo.html#pie-nest)。
app.title = '嵌套环形图';
option = {
tooltip: {
trigger: 'item',
formatter: "{a}
{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
},
series: [
//数组的元素根据下标从里向外排布,
{
name:'访问来源',
type:'pie',
selectedMode: 'single',
radius: [0, '30%'],
//表示文本显示在环上
label: {
normal: {
position: 'inner'
}
},
//指引线,如果show属性为true,c则有一个指引线直到文本(length设置线的长度)
labelLine: {
normal: {
show: false
}
},
data:[
{value:1548, name:'搜索引擎'}
]
},
{
name:'访问来源',
type:'pie',
radius: [30, '30%'],
labelLine: {
normal: {
show: true,
length:40
}
},
data:[
{value:1048, name:'百度'}
]
},{
name:'访问来源',
type:'pie',
radius: [60, '30%'],
data:[
{value:1048, name:'营销广告'}
]
}
]
};empty