echarts中柱状图隔柱换色切渐变

一、隔柱换色

很多人会遇到柱状图隔柱换色的情况，我也遇到了两次，这次找到办法了，分享给大家。

color: function(params) { 
       //首先定义一个数组 
           var colorList = ['#41B79A','#F5A64C']; 
           if(params.dataIndex % 2 == 0){
                return colorList[0]
            }else{
                return colorList[1]
            }
        }, 

这个直接放在series中就可以（如果是3色换，就再添加一个颜色，再判断一下）。

series: [
        {   
            name: '排行',
            type: 'bar',
            barWidth: 8,
            barMinHeight:1,
            emphasis:{
                label:{
                    // width:15,
                }
            },
            color: function(params) { 
                　//首先定义一个数组 
                var colorList = [ 
                '#41B79A','#F5A64C'
                ]; 
                if(params.dataIndex % 2 == 0){
                    return colorList[0]
                }else{
                    
                    return colorList[1]
                }
                 
                }, 
            itemStyle: {
                normal: {
                    barBorderRadius: 10,
                    label:{
                        show:true,
                        position:'right',
                        color:'#4d4d4d',
                    },
                    
                },
               
            },
            data: [2, 2, 9, 3, 3, 5, 9, 6, 4, 10]
        },
        
    ]

二、换色切渐变

series: [{
		name: '完成培训',
        data: [120, 200, 150, 80, 70, 110, 130, 110, 130, 180, 230, 60],
        type: 'bar',
        barWidth: 24,
        label:{
            color:'#999999',
        },
        itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(
					0, 0, 0, 1,
					[
						{offset: 0, color: '#2B71D9'},
						{offset: 1, color: '#3CDAF2'}
					]
				)
            }
        },
    },{
		name: '合格人数',
        data: [100, 160, 120, 180, 170, 80, 150, 90, 100, 110, 240, 70],
        type: 'bar',
        barWidth: 24,
        label:{
            color:'#999999',
        },
        itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(
        			0, 0, 0, 1,
        			[
        				{offset: 0, color: '#FB5D54'},
        				{offset: 1, color: '#FCB62C'}
        			]
        		)
            }
        },
    }]