Vue echarts pie图渐进色

452 阅读1分钟

在文件中定义几种颜色的渐进色块组合,我这里是四种

let colorList = [
    {
        c1: '#ffb252',
        c2: '#ffde9b'
    },
    {
        c1: '#685aff',
        c2: '#7e72ff'
    },
    {
        c1: '#10d5a4',
        c2: '#04ca99'
    },
    {
        c1: '#2a65fa',
        c2: '#257df8'
    }
];

在series下的itemStyle属性中调用colorList

itemStyle: {
    emphasis: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)"
    },
    normal: {
        color: function (params) {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ 
            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                offset: 0,
                color: colorList[params.dataIndex].c1
            }, {
                offset: 1,
                color: colorList[params.dataIndex].c2
            }])
        }

    },
    emphasis: {
        borderWidth: 0,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

效果图

image.png