Echarts 餅狀圖 基礎圖形

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: [{},{},{}] 可以加多層