纹理填充柱状图，渐变色Echarts图

渐变颜色纹理填充柱状图

在这里插入图片描述，效果如图，渐变式进度柱状图。

思路：先写一个渐变色的柱状图，并设置背景色；再通过type：pictorialBar，编写一个由矩形显示的echarts图，对第一个柱状图进行覆盖，达到预期效果。

let color=[['#ffd905','#ff8200'],['#1eeca7','#00cc85'],['#ooa3ff','#2ee46f8']]
series:[
    {
        type:"bar",  // 柱状图
        z:1, // 层级
        barWidth:12,
        itemStyle:{
            // 设置背景色
            color:params=>{
                return {
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                    type:'linear',
                    x:0,
                    y:0,
                    x2:1,
                    y2:0,
                    colorStops:[
                        {
                            offset:0,
                            color:color[params.dataIndex][0]
                        },
                        {
                            offset:1,
                            color:color[params.dataIndex][1]
                        }
                    ],
                    global: false // 缺省为 false
                }
            }
        },
        showBackground:true, // 开启背景颜色
        backgroundStyle:{
            color:'#143061'
        },
        data:[1,3,2]
    },
    {
        type: "pictorialBar",
        symbol: "rect",
        symbolRepeat: true,
        symbolMargin: [2,0], // 设置边距，达到间隙效果
        symbolSize: [4,'100%'],  // 设置形状大小
        itemStyle:{
            color:'#0f1c47'
        },
        data: [3,3,3],
        z: 2
  }
]