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

㊎㊍㊌㊋㊏

已于 2022-01-27 17:48:37 修改

阅读量2.3k

点赞数 1

分类专栏： Echarts 小知识文章标签：前端

于 2020-05-12 11:03:19 首次发布

本文链接：https://blog.csdn.net/weixin_44368997/article/details/106071717

版权

Echarts 小知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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]
        }
    ]
};