Echarts水球图(Liquid Fill Chart)

水球图(Liquid Fill Chart)是Echarts的一个插件(在官方文档中没有)，可以用来优雅的展示百分比数据。

HTML中引入水球图:

其中这两个文件都可以在官方github项目中dist目录下获取到， echarts 、 echarts-liquidfill 。

通过npm引入:

注意: echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本

像其他echarts图配置一样，都需要配置type属性

通过传入多个数据值来展示多个数值或制造多个波浪的效果

通过设置 waveAnimation 属性为 false，可以实现静止的波浪效果，另外，通过设置 animationDuration 和 animationDurationUpdate 属性的值，可以调整波浪的动画，同样可以实现静止的效果。

通过设置 amplitude(振幅) 属性可以实现水面的效果

水球图不仅能被设定为圆形，也可以被设置为其他形状，如矩形、钻石菱形、箭头型等，也可以设置为包含其容器的形状，甚至可以通过SVG来设定

默认水球图的配置

部分属性：

在series里设置hoverAnimation:false，鼠标移入悬浮饼图模块都不会高亮放大，具体步骤如下：

1、例如下图的饼图，实现右图鼠标悬停部分不被高亮放大。

2、先将radius设置比例改小，防止设置完成依然看起来比较大。

3、然后设置hoverAnimation为false。

4、任何访问来源都禁止悬停高亮显示效果。

5、然后回到第一步刷新一下，鼠标悬浮到饼图模块时不会被高亮显示。

---