Echarts 柱状图柱体颜色渐变效果

近日做项目时使用到了柱状图的渐变需求，在此记录下来

效果图：

 柱体颜色由下到上颜色逐渐变深变亮。

代码实现：将series中的itemstyle配置属性换成以下代码

 注意需要先导入

import * as echarts from 'echarts'

itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgba(30,186,157,0.1) '},
            { offset: 0.5, color: 'rgba(30,186,157,0.5)' },
            { offset: 0, color: 'rgba(30,186,157,1)' }
            ])
        },

LinearGradient（0，0，0，1）为1的话代表的是四个方向

第一个代表的是从左到右

第二个代表的是从上到下

第三个代表的是从右到左

第四个代表的是从下到上

这里要的效果是从下到上渐变，所以将第四个参数为1

offset支持的范围是0~1，即数据到达offset指定的数据时，就显示什么颜色