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)"
        }
        ]))
    }
},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小蜜蜂127

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值