echarts渐变色实现方法

echarts渐变色实现方法

方法一

1. 线性渐变

color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red'    // 0% 处的颜色
    }, {
        offset: 1, color: 'blue'   // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}

效果：

2. 径向渐变

color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red'   // 0% 处的颜色
    }, {
        offset: 1, color: 'blue'  // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}

3. 纹理填充

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

官网案例效果：
https://echarts.apache.org/examples/zh/editor.html?c=pie-pattern

方法二

使用echarts内置的渐变色生成器echarts.graphic.LinearGradient

// 区域填充样式。设置后显示成区域面积图
areaStyle: {
   opacity: 0.8,
   // 填充的颜色-渐变
   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
       offset: 0,
       color: 'rgba(128, 255, 165)'
   }, {
       offset: 1,
       color: 'rgba(1, 191, 236)'
   }])
},

效果：