echarts 柱状图 修改x轴位置 每个柱子不同颜色纵向渐变

先上效果在这里插入图片描述
代码:

option = {
    title: {
        text: '实时流速图',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['流速']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        position: 'top',
        boundaryGap: [0, 0.01]
    },
    yAxis: [{
        type: 'category',
        name: '距离海底深度',
        nameTextStyle: {
            padding: [0, 0, 10, 0]    // 四个数字分别为上右下左与原位置距离
        },
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14',
        '15', '16', '17', '18', '19', '20', '21', '22', '23']
    }],
    series: [
        {
            name:'',
            type:'bar',
            barWidth:22,
            //柱体的样式
            itemStyle:{
                normal:{
                        //柱体的颜色
                        //右,下,左,上(0,1,0,0)
                    color: function(params){
                        var colorList = [
	          					['#B5DAFF','#B5DAFF'],
	          					['#9DCEFF','#9DCEFF'],
	          					['#8AC5FF','#8AC5FF'],
	          					['#7BBDFF','#7BBDFF'],
	          					['#5EAEFF','#5EAEFF'],
	          					['#48A4FF','#48A4FF'],
	          					['#48A4FF','#48A4FF'],
	          					['#48A4FF','#48A4FF'],
	          					['#48A4FF','#48A4FF'],
	          					['#48A4FF','#48A4FF'],
	          					['#3399FF','#3399FF'],
	          					['#2894FF','#2894FF'],
	          					['#158AFF','#158AFF'],
	          					['#0071E1','#0071E1'],
	          					['#0069D2','#0069D2'],
	          					['#0058B0','#0067CE'],
	          					['#0058B0','#0058B0'],
	          					['#0052A4','#00509F'],
	          					['#00509F','#00509F'],
	          					['#004E9B','#004E9B'],
	          					['#004386','#004386'],
	          					['#003F7D','#003F7D'],
	          					['#003973','#003973'],
			          		];
                        var colorItem = colorList[params.dataIndex];
                        return new echarts.graphic.LinearGradient(0,1,0,0,[
                            {
                                offset:0,
                                color: colorItem[0]
                            },
                            {
                                offset:1,
                                color: colorItem[1]
                            }
                        ],false);
                    }
                }
            },
            data: [0.2,0.4,0.4,0.8,1,0.6,0.5,0.35,0.2,0.4,0.4,0.8,
            1,0.6,0.5,0.35,0.2,0.4,0.4,0.8,1,0.2,0.5]
        }
    ]
};
  • 1
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

㊎㊍㊌㊋㊏

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值