接到一个做数据可视化的需求，要求让柱状图的颜色实现渐变效果，如下图所示。应该如何实现呢？

如何实现

研究Echarts实现库发现普通的库提供的就是如下的方案，内容是纯色的，没有办法实现渐变

itemStyle属性

这个属性是用来设置柱状图显示方式的，其中包含了很多的属性，其中itemStyle属性就是用来设置柱状图样式的，我们可以通过这个属性来设置柱状图的样式。

• color：用来设置柱条的颜色
• borderColor：用来设置柱条的边框的颜色
• borderWidth：柱条边框的宽度
• borderType：柱条类型，有三种类型solid、dashed、dotted
• borderRadius：柱条圆角半径
• shadowBlur：图形的阴影模糊大小，可以配合shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
• shadowColor：阴影颜色
• shadowOffsetX：水平方向上阴影偏移量
• shadowOffsetY：垂直方向上的阴影偏移量
• opacity：图形的透明度
• decal：贴花图案

因为我们要设置颜色的渐变，所以需要对颜色属性进行调整，可以通过如下的方式来实现渐变的效果。

itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#72beff' },
          { offset: 0.5, color: '#8ecbff' },
          { offset: 1, color: '#b6dcff' }
      ])
},

这里引入了new echarts.graphic.LinearGradient来设置柱条颜色的渐变效果，并且分别指定了0、0.5、1 三个位置的的颜色值，设置完成之后最终效果就是如下所示。

这是普通样式显示效果，可以通过如下的内容来配置鼠标移入的效果。

emphasis: {
    itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#b6dcff' },
            { offset: 0.7, color: '#8ecbff' },
            { offset: 1, color: '#72beff' }
        ])
    }
},

配置完成之后鼠标移入的时候，会以反向的方式来显示柱条的渐变颜色。如下图所示

总结

通过上面的方式就可以实现柱状图柱条渐变颜色的设置，当然这是横向的柱条样式，纵向的柱条样式也可以通过这种方式来实现。