echarts折线图中图例渐变+折线渐变+折线下方区域渐变+提示框中图标渐变一、设计图二、echarts中的渐变渐变

一、设计图

二、echarts中的渐变

渐变色或纹理填充

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

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

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