echarts 單獨實現水波紋漣漪效果
阿新 • • 發佈:2019-02-10
效果:
上程式碼可以直接在 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, 如下