嵌套饼图和单个饼图差别不大,需要之一的是,如果使用嵌套饼图,只能有一个标题和一个图例,因为虽然是两个饼图,但是是一个echarts实例
需要注意的地方:
1. 注意外外部饼图和内部饼图的关系,如果外部饼图是内部饼图的细分,注意内外饼图的配色。
2. 注意标签的位置,饼图的默认标签在外部,嵌套饼图使,内饼图标签最好设置在内部。
myChart = echarts.init(document.getElementById(domeId));
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'horizontal',
x : 'center',
y: 'bottom',
data:[],
itemWidth: 14,
textStyle:{
color: '#ffffff'
},
type: 'scroll',
inactiveColor: '#333',
pageIconColor: '#3E88FF', //翻页下一页的三角按钮颜色
pageIconInactiveColor: '#333', //翻页(即翻页到头时)
pageIconSize: 14, //翻页按钮大小
pageFormatter: '',//隐藏翻页的数字
},
calculable : false,
series : [
{
name:name1, //内圈名称
type:'pie',
selectedMode: 'single',
radius : [0, '30%'],
x: '20%',
width: '40%',
funnelAlign: 'right',
max: 1548,
itemStyle : {
normal : {
label : {
position : 'inner'
},
labelLine : {
show : false
},
color:function(params) {
//自定义颜色
var colorList = innerColor;
return colorList[params.dataIndex]
},
}
},
data:[{name: "", value: 0}]
},
{
name:name2, //外圈名称
type:'pie',
radius : ['50%', '60%'],
x: '40%',
width: '35%',
funnelAlign: 'left',
max: 1048,
itemStyle : {
normal : {
color:function(params) {
//自定义颜色
var colorList = outColor;
return colorList[params.dataIndex]
}
}
},
data:[{name: "", value: 0}]
},
]
};
myChart.setOption(option);