Echarts图表：线性渐变、径向渐变、纹理填充

（一） 线性渐变

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {
        type: 'linear',
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [{
              offset: 0, color: '#0E5FFF'    // 0% 处的颜色
          }, {
              offset: 1, color: '#03DFFC',   // 100% 处的颜色
          }],
          globalCoord: false,// 缺省为 false
      },
            },

实现效果：

（二）径向渐变

// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {
		type: 'radial',
		x: 0.5,
		y: 0.5,
		r: 5,
		colorStops: [{
		    offset: 0, color: '#0E5FFF'    // 0% 处的颜色
		}, {
		    offset: 1, color: '#03DFFC',   // 100% 处的颜色
		}],
		globalCoord: false,// 缺省为 false
              },
            },

实现效果：

（三）纹理填充

const imageDom = document.createElement("img")
imageDom.src = '${appRes}/map-bg.png'

// 纹理填充
{
  image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
  repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

（四）多个图形不同渐变色

series中分别设置itemStyle的color渐变

series: [
          {
            name: "xxx",
            type: "bar",
            barWidth : 12,    //柱形宽度
            data: [0, 0, 0, 0, 0, 0],
            itemStyle: {
              color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: '#0BB5D1'    // 0% 处的颜色
                  }, {
                      offset: 1, color: '#41E0DF',   // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
              }
            },
            label: {
              show: false,
              position: "top",
              distance: 10,
              color: "#aaa"
            }
          },
          {...},
          {...},

实现效果：