echart.js 每一块上显示所占的百分比！但是当百分比有重复的时候 颜色会重复！

Question

如题，利用echart3做了一个饼状图，利用data的name属性设置显示每一块所占的百分比！当时当name值一样的时候，会出现颜色重复！

var option = {
            color:['#fecb5e','#ef7a82','#36d1bb','#fa8c35','#27aaf3'],
            series: [
                {
                    type:'pie',
                    radius: ['30%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        normal: {
                            borderColor: '#fff',
                            borderWidth: '2'
                        },
                        emphasis: {
                            borderColor: '#fff',
                            borderWidth: '2'
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'inner',
                            textStyle: {
                                fontSize: '9'
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '9'
                            }
                        }
                    },
                    data:[
                        {value:5, name:5%},
                        {value:20, name:20%},
                        {value:30, name:30%},
                        {value:30, name:305},
                        {value:15, name:15%}
                    ]
                }
            ]
        };

这样的话第三个底色个颜色就一样了！

我想要的是即使百分比一样 也按照color的值依次获取，name用来显示百分比！

Answer 1

你可以通过itemStyle对每个数据块单独制定颜色的，如下：

option = {
    series: [
        {
            type:'pie',
            radius: ['30%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: '2'
                },
                emphasis: {
                    borderColor: '#fff',
                    borderWidth: '2'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'inner',
                    textStyle: {
                        fontSize: '9'
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '9'
                    }
                }
            },
            data:[
                {value:5, name:'5%',itemStyle:{
                    normal:{
                        color:'#fecb5e'
                    }
                }},
                {value:20, name:'20%',itemStyle:{
                    normal:{
                        color:'#ef7a82'
                    }
                }},
                {value:30, name:'30%',itemStyle:{
                    normal:{
                        color:'#36d1bb'
                    }
                }},
                {value:30, name:'30%',itemStyle:{
                    normal:{
                        color:'#fa8c35'
                    }
                }},
                {value:15, name:'15%',itemStyle:{
                    normal:{
                        color:'#27aaf3'
                    }
                }}
            ]
        }
    ]
};

Answer 2

data中的name是用来表示系列名的，label是饼图图形上的文本标签，可用于说明图形的一些数据信息，结合formatter就可以实现你要的效果，其中的模板变量{c}表示的是数据值

option = {
    color:['#fecb5e','#ef7a82','#36d1bb','#fa8c35','#27aaf3'],
    series: [
        {
            type:'pie',
            radius: ['30%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: '2'
                },
                emphasis: {
                    borderColor: '#fff',
                    borderWidth: '2'
                }
            },
            label: {
                normal: {
                    show: true,
                    formatter: '{c}%',
                    position: 'inner',
                    textStyle: {
                        fontSize: '9'
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '9'
                    }
                }
            },
            data:[
                {value:5},
                {value:20},
                {value:30},
                {value:30},
                {value:15}
            ]
        }
    ]
};