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' }},
                ] 
            }]
        };

效果图: