水球圖(Liquid Fill Chart)是Echarts的一個(gè)插件(在官方文檔中沒有)，可以用來優(yōu)雅的展示百分比數(shù)據(jù)。

水球圖.gif

安裝

HTML中引入水球圖:

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

其中這兩個(gè)文件都可以在官方github項(xiàng)目中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

多個(gè)波浪效果

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

通過傳入多個(gè)數(shù)據(jù)值來展示多個(gè)數(shù)值或制造多個(gè)波浪的效果

多個(gè)波浪效果.gif

靜止的波浪效果

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

通過設(shè)置 waveAnimation 屬性為 false，可以實(shí)現(xiàn)靜止的波浪效果，另外，通過設(shè)置 animationDuration 和 animationDurationUpdate 屬性的值，可以調(diào)整波浪的動(dòng)畫，同樣可以實(shí)現(xiàn)靜止的效果。

靜止的波浪效果.gif

靜止水面效果

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

通過設(shè)置 amplitude(振幅) 屬性可以實(shí)現(xiàn)水面的效果

靜止水面效果.gif

其他形狀的水球圖

水球圖不僅能被設(shè)定為圓形，也可以被設(shè)置為其他形狀，如矩形、鉆石菱形、箭頭型等，也可以設(shè)置為包含其容器的形狀，甚至可以通過SVG來設(shè)定

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

默認(rèn)水球圖的配置

{
    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)[]}
  數(shù)據(jù)項(xiàng)的值，介于0-1之間
• color {string[]}
  波浪顏色
• shape {string}
  波浪形狀，可被設(shè)置為'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 或者 svg路徑
• center {string[]}
  圖的位置，第一個(gè)值為橫坐標(biāo)，第二個(gè)值為縱坐標(biāo)；可設(shè)置為百分比如"50%"或者像素值如"100px"
• radius {string}
  圖的半徑，可設(shè)置為百分比如"50%"或者像素值如"100px"
• amplitude {number}
  波浪的振幅，可設(shè)置為像素值或百分比，其中百分比是相對圖的直徑
• waveLength {string|number}
  波浪的長度，可設(shè)置為百分比如"50%"或者像素值如"100px"
• phase {number}
  波浪的相位
• period {number|'auto'|function}
  向前移動(dòng)一個(gè)波長所需的毫秒數(shù)
• direction {string}
  波浪滾動(dòng)的方向
• waveAnimation {boolean}
  是否開啟波浪動(dòng)畫
• animationEasing {string}
  當(dāng)波浪從底部開始上升時(shí)，初始動(dòng)畫的簡化方法。
• animationEasingUpdate {string}
  其他動(dòng)畫的簡化方法，例如，當(dāng)數(shù)據(jù)值改變及波位改變時(shí)。
• animationDuration {number}
  動(dòng)畫持續(xù)時(shí)間，單位為毫秒
• animationDurationUpdate {number}
  數(shù)據(jù)更新動(dòng)畫持續(xù)時(shí)間