echarts 柱状图颜色设置

如果给柱状图设置颜色，我们执行在 option 中 传入 color 字段的一个数组。代码如下：

option = {
    color: ['#2EB7BD', '#3CE1D9', '#FBBACB', '#4695D1'],
    ...
}

上面是根据柱状图 legend 中 data 进行颜色区分。如果我们只有一个类别，分别给 xAxis 上的柱状图进行颜色区分，代码如下：

option = {
    ...
    series: [{
        data: [],
        type: 'bar',
        itemStyle: {
            normal: {
                color: function(params) {
                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
	            if (params.dataIndex >= colorList.length) {  //给大于颜色数量的柱体添加循环颜色的判断
                        index = params.dataIndex - colorList.length;
                    } 
                    return colorList[params.dataIndex]
                }
            }
        }
    }]
}

那么如何给柱状图添加渐变色呢？

0，0，1，0分别代表了右、下、左、上四个位置的颜色座标，然后再在下方的数组中：
{offset: 0, color: '#3977E6'},代表颜色座标为0的颜色
{offset: 0.5, color: '#3A8EE6'},代表颜色座标为0.5的颜色
{offset: 0.8, color: '#FAB6B6'},代表颜色座标为0.8的颜色
{offset: 1, color: '#37BBF8'}代表颜色座标为1处的颜色
 

option = {
    ...    
    series: [
        {
            name: '数量',
            type: 'bar',
            data: [],
            itemStyle: {
                normal: {
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            {offset: 0, color: '#3977E6'},
                            {offset: 1, color: '#37BBF8'}
                        ]
                    )
                }
            }
        }
    ]
};

折线区域颜色渐变：

option = {
    areaStyle:{
        normal:{
            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                offset: 0,
                color: 'rgba(80,141,255,0.39)'
            }, {
                offset: .34,
                color: 'rgba(56,155,255,0.25)'
            },{
                offset: 1,
                color: 'rgba(38,197,254,0.00)'
            }])
        }
    },
}

参考案例：echarts 柱状图渐变色背景