echart.js 每一塊上顯示所占的百分比！但是當(dāng)百分比有重復(fù)的時(shí)候顏色會(huì)重復(fù)！

如題，利用echart3做了一個(gè)餅狀圖，利用data的name屬性設(shè)置顯示每一塊所占的百分比！當(dāng)時(shí)當(dāng)name值一樣的時(shí)候，會(huì)出現(xiàn)顏色重復(fù)！

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%}
                    ]
                }
            ]
        };

這樣的話(huà)第三個(gè)底色個(gè)顏色就一樣了！

我想要的是即使百分比一樣也按照color的值依次獲取，name用來(lái)顯示百分比！

回答

編輯回答

失心人

data中的name是用來(lái)表示系列名的，label是餅圖圖形上的文本標(biāo)簽，可用于說(shuō)明圖形的一些數(shù)據(jù)信息，結(jié)合formatter就可以實(shí)現(xiàn)你要的效果，其中的模板變量{c}表示的是數(shù)據(jù)值

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

圖片描述

2017年6月24日 18:28

編輯回答

糖果果

你可以通過(guò)itemStyle對(duì)每個(gè)數(shù)據(jù)塊單獨(dú)制定顏色的，如下：

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

2017年3月6日 07:44