1.效果图
2.代码
<div id="main" style="width:800px;height:800px"></div>
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name:'外层',
type:'pie',
selectedMode: 'single',
radius: ['65%', '86%'],
/* label: {
normal: {
position: 'inside',
fontSize: 20,
color:'',
fontFamily:'Microsoft Yahei'
}
}, */
data:[
{value:2, name:'A'},
{value:3, name:'B'},
{value:3, name:'C'},
{value:2, name:'D'}
]
},
{
name:'内层',
type:'pie',
radius: ['25%', '60%'],
label: {
normal: {
position:'inside',
align:'right',
fontSize: 18,
fontFamily:'Microsoft YaHei',
color:"#FFEFE0"
}
},
data:[
{value:1, name:'A1'},
{value:1, name:'A2'},
{value:1, name:'B1'},
{value:1, name:'B2'},
{value:1, name:'B3'},
{value:1, name:'C1'},
{value:1, name:'C2'},
{value:1, name:'C3'},
{value:1, name:'D1'},
{value:1, name:'D2'}
]
},
{
name:'总',
type:'pie',
radius: ['0%', '20%'],
label: {
normal: {
position: 'center',
fontSize: 22,
fontFamily:'Microsoft YaHei',
color:'#80F0E3'
}
},
data:[
{value:10, name:'分成'}
]
}
]
};
myChart.setOption(option);
3.自我解释
1、radius: ['0%', '20%'], radius: ['25%', '60%'], radius: ['65%', '86%'],
中间多出的 5% 是图上空白地方（环形与环形 之间的白色部分）
2、data:[{value:2, name:'A'},{value:3, name:'B'}, {value:3, name:'C'}, {value:2, name:'D'}]
可以写成 data:list (list<map>其中 数据格式 [{value:2, name:'A'},{value:3, name:'B'}, {value:3, name:'C'}, {value:2, name:'D'}])
3、series: [{},{},{}] 可以加多层