ECharts——餅狀圖(指示線、提示文字、分區樣式)

 option = {
            title: {
                text: '分佈圖', 
                left: 'center'
            }, 
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)" // 鼠標懸浮在各分區時的提示內容
            },
            legend: {  
                bottom: 10,
                left: 'center',
                data: ['1a', '2b', '3c', '4d', '5e' , '6f']
            },
            series: [{
                name: '',
                type: 'pie',
                radius: ['50%', '70%'],
                labelLine:{
                    normal:{
                        length:15,     // 指示線寬度
                        lineStyle: {
                            color: "#595959"    // 指示線顏色  
                        }
                    },
                },
                label: {
                    normal: {
                        // 各分區的提示內容
                        // params: 即下面傳入的data數組,通過自定義函數，展示你想要的內容和格式
                        formatter: function(params){ 
                            return params.name+"\n\n"+params.percent+"%";
                        },  
                        textStyle: {            // 提示文字的樣式
                            color: '#595959',
                            fontSize: 14
                        }
                    }
                },
                data: [
                    // 各分區樣式: value值，name表示各分區的標識、itemStyle模塊樣式
                    // 注意: name與上面的legend-data中必須保持一致，纔可展示按鈕組
                    { value: 39, name: '1a', percent: '39', itemStyle: { color: '#FFBD1C' }},
                    { value: 21, name: '2b', percent: '21', itemStyle: { color: '#13C2C2' }},
                    { value: 12, name: '3c', percent: '12', itemStyle: { color: '#267CFF' }},
                    { value: 8, name: '4d', percent: '8', itemStyle: { color: '#FF8C16' }},
                    { value: 9, name: '5e', percent: '9', itemStyle: { color: '#80B3FF' }},
                    { value: 11, name: '6f', percent: '11', itemStyle: { color: '#8543E0' }},
                ] 
            }]
        };

效果圖: