ECharts按照固定的颜色循环饼图，ECharts替换颜色

ECharts画饼图颜色是默认随机的,也可以指定颜色，先看一下替换指定颜色的三种方法

一、 option下

 color: ['#ff6666', '#ff3399', '#FFFF00', '#FF8C00','#ff99cc']

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    color: ['#ff6666', '#ff3399', '#FFFF00', '#FF8C00','#ff99cc'],
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 520, name: '邮件营销'},
                {value: 20, name: '联e盟广告'},
                {value: 300, name: '视频广告'},
                {value: 1203, name: '直接访问2'},
                {value: 580, name: '邮e件营销'},
                {value: 484, name: '联r盟广告'},
                {value: 300, name: '视频广告'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'},
                {value: 735, name: '直接e访问'},
                {value: 580, name: '邮e件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

 

当数据的长度大于color数组的长度，颜色会随机取color的值，可能造成两个数据画出的颜色一样并且挨着。

二、series下

itemStyle: {
              normal: {
                color: function(colors) {
                var colorList = [
                '#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'
                ];
            return colorList[colors.dataIndex]
        }
    }
},

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'},
                {value: 50, name: '邮件营销2'},
                {value: 44, name: '联盟广告2'},
                {value: 300, name: '视频广告2'},
                {value: 580, name: '邮件营销2'},
                {value: 484, name: '联盟广告3'},
                {value: 100, name: '视频广告3'}
            ],
            itemStyle: {
                normal: {
                    color: function(colors) {
                    var colorList = [
                    '#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'
                    ];
                return colorList[colors.dataIndex]
        }
    }
},
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

当你的数组长度大于color的数组长度，其他的为空白，要提前指定数据的长度。

三、data下

itemStyle: {color:"red"}

 

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎',itemStyle: {color:"red"}},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

 这个是指定某条数据某个颜色。

当你已知饼图的数据长度和要求颜色时，以上方法都能很好的替换颜色。但当你不知道后台返回的数据长度，或者数据长度可能变化时，颜色又不用默认颜色时，就可以按照几个固定的颜色去循环整个饼图的颜色

 

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'},
                {value: 250, name: '设计'},
                {value: 300, name: '视频广告'},
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 1)'
                }
            },
            itemStyle: {
                        color:function(params) {
                        var colorItem = ['#ff6666', '#ff3399', '#FFFF00', '#FF8C00','#ff99cc'];
                        var currentItem=0;
                        var colorList=[];
                    for(var i=0;i<option.series[0].data.length;i++){
                        colorList.push(colorItem[i%5]);
                    }
                    return colorList[params.dataIndex]
                }
    },
        }
    ]
};