echart渐变效果设置

echart

radial-径向渐变

径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
new echarts.graphic.RadialGradient->

//http://gallery.echartsjs.com/editor.html?c=xHJqUkQXBZ
itemStyle: {
    normal: {
        borderColor: 'rgba(147, 235, 248, 1)',
        borderWidth: 1,
        areaColor: {
            type: 'radial',
            //渐变圆心的位置以及半径设置
            x: 0.5,
            y: 0.5,
            r: 0.99,
            colorStops: [{
                    offset: 0,
                    color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                    }, {
                 offset: 1,
                 color: 'rgba( 47,79,79, .2)' // 100% 处的颜色
                     }],
             globalCoord: false // 缺省为 false
             }

Linear-线性渐变

线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 true，则该四个值是绝对的像素位置
echarts.graphic.LinearGradient=>

//http://gallery.echartsjs.com/editor.html?c=xHJqUkQXBZ
areaStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,// 0% 处的颜色
                  color: 'rgba(255, 225, 0, 0.2)',
                }, {
                  offset: 1,// 100% 处的颜色
                  color: 'rgba(255, 225, 0, 0)',
                }],
                globalCoord: false
              },
            }
          }

纹理填充

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

虚拟映射

 visualMap: {
        show: false,
        min: 0,
        max: 50,
        dimension: 0,
        inRange: {
            color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
        }
    },