水球图.gif
安装
HTML中引入水球图:
<scriptsrc='echarts.js'></script><scriptsrc='echarts-liquidfill.js'></script>
其中这两个文件都可以在官方github项目中dist目录下获取到， echarts 、 echarts-liquidfill 。
通过npm引入:
npm install echartsnpm install echarts-liquidfill
注意: echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本
最简单的例子
constoption={series:[{type:'liquidFill',data:[0.6]}]}
像其他echarts图配置一样，都需要配置type属性
简单例子.gif
多个波浪效果
constoption={series:[{type:'liquidFill',data:[0.6,0.5,0.4,0.3]}]}
通过传入多个数据值来展示多个数值或制造多个波浪的效果
多个波浪效果.gif
静止的波浪效果
constoption={series:[{type:'liquidFill',waveAnimation:false,animationDuration:0,animationDurationUpdate:0,data:[0.6,0.5,0.4,0.3]}]}
通过设置 waveAnimation 属性为 false，可以实现静止的波浪效果，另外，通过设置 animationDuration 和 animationDurationUpdate 属性的值，可以调整波浪的动画，同样可以实现静止的效果。
静止的波浪效果.gif
静止水面效果
constoption={series:[{type:'liquidFill',data:[0.6,0.5,0.4,0.3],amplitude:0,waveAnimation:0}]}
通过设置 amplitude(振幅) 属性可以实现水面的效果
静止水面效果.gif
其他形状的水球图
水球图不仅能被设定为圆形，也可以被设置为其他形状，如矩形、钻石菱形、箭头型等，也可以设置为包含其容器的形状，甚至可以通过SVG来设定
constoptions=[{series:[{type:'liquidFill',data:[0.6,0.5,0.4,0.3],shape:'diamond'}]}]
钻石菱形.gif
constoption={series:[{type:'liquidFill',data:[0.6,0.55,0.4,0.25],radius:'60%',outline:{show:false},backgroundStyle:{borderColor:'#156ACF',borderWidth:1,shadowColor:'rgba(0, 0, 0, 0.4)',shadowBlur:20},shape:'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',label:{position:['38%','40%'],formatter:function(){return'ECharts\nLiquid Fill'},fontSize:40,color:'#D94854'}}]}
使用svg.gif
API
默认水球图的配置
{data: [],
color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
center: ['50%', '50%'],
radius: '50%',
amplitude: '8%',
waveLength: '80%',
phase: 'auto',
period: 'auto',
direction: 'right',
shape: 'circle',
waveAnimation: true,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
animationDuration: 2000,
animationDurationUpdate: 1000,
outline:{show: true,
borderDistance: 8,
itemStyle:{color:'none',borderColor:'#294D99',borderWidth:8,shadowBlur:20,shadowColor:'rgba(0, 0, 0, 0.25)'}},
backgroundStyle:{color:'#E3F7FF'},
itemStyle:{opacity:0.95,shadowBlur:50,shadowColor:'rgba(0, 0, 0, 0.4)'},
label:{show:true,color:'#294D99',insideColor:'#fff',fontSize:50,fontWeight:'bold',align:'center',baseline:'middle'position:'inside'},
emphasis:{itemStyle:{opacity:0.8}}}
部分属性：
data {(number|Object)[]}
数据项的值，介于0-1之间
color {string[]}
波浪颜色
shape {string}
波浪形状，可被设置为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 或者 svg路径
center {string[]}
图的位置，第一个值为横坐标，第二个值为纵坐标；可设置为百分比如"50%"或者像素值如"100px"
radius {string}
图的半径，可设置为百分比如"50%"或者像素值如"100px"
amplitude {number}
波浪的振幅，可设置为像素值或百分比，其中百分比是相对图的直径
waveLength {string|number}
波浪的长度，可设置为百分比如"50%"或者像素值如"100px"
phase {number}
波浪的相位
period {number|'auto'|function}
向前移动一个波长所需的毫秒数
direction {string}
波浪滚动的方向
waveAnimation {boolean}
是否开启波浪动画
animationEasing {string}
当波浪从底部开始上升时，初始动画的简化方法。
animationEasingUpdate {string}
其他动画的简化方法，例如，当数据值改变及波位改变时。
animationDuration {number}
动画持续时间，单位为毫秒
animationDurationUpdate {number}
数据更新动画持续时间
每个前端开发人员都有自己喜欢的开发工具，用这些工具能让编码更容易并且“令人愉快”。分享一些我认为真的很棒的很棒的Web开发工具！
1.Glitch
https://glitch.com
好的，这不仅仅是一个工具，还是一个非常棒的编码平台以及一个很棒的技术社区。我可以在内置代码编辑器的帮助下托管我的项目。支持多种语言，但最适合NodeJS。
2.Shadows
https://brumm.af/shadows
这个网站提供生成平滑阴影的CSS代码，可以创建平滑的边框阴影。它看起来真的很流畅，令人满意。
3.Coolors
https://coolors.co
这是一款非常好的在线工具，可以为项目生成匹配的颜色方案。如果不喜欢当前的方案，按下空格键，它会重新生成一个配色方案，直到你满意~
4. Blobmaker
https://blobmaker.app
Blobmaker可帮助你随机生成各种尺寸，不同颜色和形状的SVG Blob。你可以用作背景或创建看起来很酷的动画。
5.Getwavs
https://getwaves.io
与Blobmaker相似，Get Waves能够随机生成不同颜色和不同数量的波浪。用作网页的页脚或页眉看起来不错。
6. Undraw.co
https://undraw.co
开放源代码项目的SVG插图集，可用来做登录页面，404页面等，当然普通页面也能用!上面的插图可以不带归属地版权的使用，无需支付任何费用。
7. Marcdown
https://liyasthomas.github.io/marcdown
由Liyas Thomas提供的在线实时的Markdown网页编辑器，它可预览Markdown代码，将其发布到GitHub上。它提供一个非常漂亮的暗黑模式。还可脱机工作，这使得它显得更出色。
8.postwoman
https://postwoman.io
这是Liyas Thomas构建的另一个工具。Postwoman是一个API请求构建工作。开发者可以不使用代理来测试 API。这是一个渐进式Web应用程序，可以保存到桌面来用。它是轻量级的产品，基本上可以是Postman的在线替代品。
9. Screely.com
https://screely.com
它可以帮助你创建超级漂亮的网站截图模型。如果你不是MacBook用户，但需要更好的网站图片作为自述文件，它非常适合我们。
10. CSS网格生成器
https://cssgrid-generator.netlify.com/
这是Sarah Drasner的创建的优秀网站，它使用CSS创建动态网格布局。
以上是10款web前端开发工具分享，希望对你有帮助。
