1. 程式人生 > >echarts 單獨實現水波紋漣漪效果

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, 如下
這裡寫圖片描述