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，如下

echarts 单独实现水波纹涟漪效果相关推荐

android自定义控件几种,Android 自定义View一个控件搞定多种水波纹涟漪扩散效果 - CSDN博客...
效果图实现思路这个效果实现起来并不难,重要的是思路此View满足了多种水波纹涟漪扩散效果,这要求它能满足很多的变化根据上面的样式,可以看出此View需要满足以下变化圆圈从中心可循环向外扩散 ...
Android: Jetpack Compose如何禁用涟漪（水波纹）效果
系列文章目录 Android: Jetpack Compose如何禁用涟漪(水波纹)效果 Android:使用Jetpack Compose 实现Text控件跑马灯效果 Android:使用Jetpa ...
Echarts绘制Tree树图的涟漪效果effectScatter
1. 问题描述 Echarts绘制图表是支持涟漪效果的,但是搜了材料,有地图.折线图.散点图等,不支持树图. 本文方法实现了一种可以任意Echarts图的涟漪效果 2. 效果展示将树图的一级节点全部 ...
css 波纹扩散_html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
html移动端语音波纹,html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
android水平波浪扩散动画,Android实现水波纹扩散效果
本文实例为大家分享了Android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下先上图 ?澹∶挥型计??跃湍昧诵"泊?媪恕?/p> 先看一下如何使用这个View. andro ...
HTML5+CSS3小实例：水波纹按钮效果
实例:水波纹按钮效果技术栈:HTML.CSS 效果: 源码: [html] <!DOCTYPE html> <html><head><meta http-e ...
Android点击水波纹扩散效果整理（附带一个自定义的水波纹效果控件）
很久很久没有写博客了,说来也有点惭愧.正好最近整理自己的项目工程目录,看到一些值得分享的控件,准备在之后的几篇博客中准备把它们陆续搬运上来. 这篇博客准备整理一下Android Material De ...
Flutter 水波纹动画效果实现
Flutter 水波纹动画效果实现 1. 先上效果图: 2. 实现 2.1 尺寸渐变结合透明度渐变 2.2 多个基本动画效果叠加 3. 总结 1. 先上效果图: 2. 实现我们将该动画拆成三部分来实 ...

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

echarts 单独实现水波纹涟漪效果相关推荐

最新文章

热门文章