水球图 及各种参数设置

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

水球图.gif

安装

HTML中引入水球图:

<scriptsrc='echarts.js'></script><scriptsrc='echarts-liquidfill.js'></script>

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

通过npm引入:

npm install echarts
npm install echarts-liquidfill

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

最简单的例子

const option ={
    series:[{type:'liquidFill',
        data:[0.6]}]};

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

简单例子.gif

多个波浪效果

const option ={
    series:[{type:'liquidFill',
        data:[0.6,0.5,0.4,0.3]}]};

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

多个波浪效果.gif

静止的波浪效果

const option ={
    series:[{type:'liquidFill',
        waveAnimation:false,
        animationDuration:0,
        animationDurationUpdate:0,
        data:[0.6,0.5,0.4,0.3]}]};

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

静止的波浪效果.gif

静止水面效果

const option ={
    series:[{type:'liquidFill',
        data:[0.6,0.5,0.4,0.3],
        amplitude:0,
        waveAnimation:0}]};

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

静止水面效果.gif

其他形状的水球图

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

const options =[{
    series:[{type:'liquidFill',
        data:[0.6,0.5,0.4,0.3],
        shape:'diamond'}]}];

钻石菱形.gif

const option ={
    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}
  数据更新动画持续时间

作者：HEY_439

链接：https://www.jianshu.com/p/172b79fa33fe

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。