Echarts柱状图多彩渐变实现方法

echarts柱状图显示不同颜色，echarts柱状图 itemStyle属性中添加color属性

第一种方式

color: params => {
    //  colorList是每根柱子的颜色，一组是一个渐变
    var colorList = [
        ['#62C467','#278D65'],
        ['#FF5B7A','#BC3535'],
        ['#FFF600','#D69105'],
        ['#FFB400','#F66800'],
        ['#00CCFF','#2A54B4'],
        ['#F75271','#754ABF']
    ]
    var index = params.dataIndex
    // 柱子个数超过colorList设置的个数，循环使用
    if (index >= colorList.length) {
        index =index - colorList.length
    }
    // 这里的this.$echarts是项目中的echarts示例，改成对应的名字就好
    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: colorList[index][0]
    }, {
        offset: 1,
        color: colorList[index][1]
    }])
},

第二种方式

color: function (params) {
    if (params.value%2===0){
        return (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 1,
            color: "rgba(63,253,255,.1)"
        },
            {
                offset: 0,
                color: "rgba(63,253,255,1)"
            }
        ]))

    }else {
        return (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 1,
            color: "rgba(6,120,255,.1)"
        },

        {
            offset: 0,
            color: "rgba(6,120,255,.6)"
        }
        ]))
    }
},