echarts 单独实现水波纹涟漪效果

效果：

上代码可以直接在 echarts 示例中运行 ( 建立在直角系中 )：

var option = {
     xAxis : [
        {
            boundaryGap:false,
            type : 'category',
            splitLine:{
                show:false
            },
            axisTick:{
                show:false
            },
            axisLabel:{
                show:false,
                interval:0,
                textStyle:{
                    color:"white",
                    fontSize:14,
                },
                rotate:45
            },
            axisLine:{
                show:false
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitLine:{
                show:false
            },
            axisTick:{
                show:false
            },
            axisLabel:{
                show:false,
                textStyle:{
                    color:"white",
                    fontSize:14
                }
            },
            axisLine:{
                show:false
            },
            min:2,
            max:0
        }
    ],
    series:[{
        type:"effectScatter",
        data:[{value:1,symbolSize:90}],
        showEffectOn: 'render',
        rippleEffect: {
            period:4,
            brushType: 'stroke',
            scale:1.5
        },
        label: {
            normal: {  
                show: true,
                formatter:"{b}",
                fontSize:16,
                color:"white",
                offset:[0,0]
            }
        },
        itemStyle: {
            normal: {
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                        offset: 0, color: 'rgba(255,142,20,0)' // 0% 处的颜色
                    }, {
                        offset: 0.4, color: 'rgba(255,142,20,0)' // 100% 处的颜色
                    }, {
                        offset: 0.9, color: 'rgba(255,142,20,0.2)' // 100% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(255,142,20,0.4)' // 100% 处的颜色
                    }],
                    globalCoord: true // 缺省为 false
                },
                shadowBlur: 0,
                shadowColor: '#25fffb'
            }
        }
    }]
}

注： 若在不同的 x 轴里展示则需要添加空对象到 data， 如下