echarts - 特殊需求实现代码汇总之【柱图】篇

其实包括饼图、线图在内，和柱图都一样的感觉，他们的配置项基本也是对应的那几个，所以想实现某些相似的效果，只要找到对应的属性就可以了。

1.柱图渐变色设置

还记得上篇线图中的实现是在areaStyle的里边设置normal状态下的color吗？

柱图和他异曲同工，不过柱图不是areaStyle，而是itemStyle

item有单项的意思，我的字面理解是设置每一个单柱的样式。渐变也可以。

itemStyle: {
    normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#83bff6'
        },
        {
            offset: 0.5,
            color: '#188df0'
        },
        {
            offset: 1,
            color: '#188df0'
        }])
    },
    emphasis: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#2378f7'
        },
        {
            offset: 0.5,
            color: '#83bff6'
        },
        {
            offset: 1,
            color: '#2378f7'
        }])
    }
}

还有这种彩色渐变的效果，也是一个道理。

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        nameTextStyle: {
            color: 'red'
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        itemStyle: {
            normal: {
                barBorderRadius: [50, 50, 0, 0],
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(248,65,126,0.90)'
                    },
                    {
                        offset: 1,
                        color: '#638FFF'
                    }],
                    globalCoord: false
                }
            },
            emphasis: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(248,65,126,0.90)'
                    },
                    {
                        offset: 0.5,
                        color: 'rgba(113,23,103,0.40)'
                    },
                    {
                        offset: 1,
                        color: '#638FFF'
                    }],
                    globalCoord: false
                }
            }
        },
        data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};