本文來自於ECharts官方部落格。
原文地址：ECharts 水球圖教程
責編：陳秋歌，關注前端開發等領域，尋求報道或者投稿請發郵件至chenqg#csdn.net。

水球圖是一種適合於展現單個百分比資料的圖表型別，ECharts 的水球圖外掛使你能夠通過非常簡單的配置，實現酷炫的資料展示效果。

先來個酷炫效果看看：效果+程式碼 。

那麼，今天我們就一起來學習一下，如何使用 ECharts 水球圖。

第一步：引入 JavaScript 檔案

ECharts 的水球圖是一個外掛型別的圖表。這意味著，在 ECharts 官網下載的完整版本將不包含水球圖——這保證了不需要使用該圖表的使用者能夠獲得一個儘可能小的程式碼版本。使用時，需要在引入 echarts.js 之後，另外引入水球圖對應的 echarts-liquidfill.js，可以在 GitHub 找到最新版本。

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

<script>
// 使用水球圖的程式碼
</script>

第二步：指定 DOM 元素作為圖表容器

和建立 ECharts 的其他圖表一樣，我們需要指定 DOM 中的一個有高度和寬度的元素作為圖表的容器——也就是圖表將會繪製的位置。

<div id="liquidfill-chart" style="width=100%; height = 400px"></div
 
>

傳入該 DOM 元素，使用 ECharts 初始化圖表：

var chart = echarts.init(document.getElementById('liquidfill-chart'));

第三步：設定水球圖引數

和其他 ECharts 圖表一樣，水球圖提供將系列的 type 指定為 ‘liquidFill’（注意大小寫）來表明這是一個水球圖型別。

一個簡單的配置項可以是：

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3]
    }]
};
chart.setOption(option);
 

這樣，就能得到文章開頭的水球圖效果了：點選檢視效果+程式碼。

如果發現圖表沒有正確顯示，你可以檢查以下幾種可能：

• JS 檔案是否正確載入；
• echarts 變數是否存在；
• 控制檯是否報錯（如果報錯顯示 liquidFill 系列不存在，則很可能 echarts-liquidfill.js 沒有正確載入）；
• DOM 元素在 echarts.init 的時候是否有高度和寬度。

可以發現，在上面的程式碼中，我們只指定了圖表型別為 ‘liquidFill’，以及把資料設定為 [0.6, 0.5, 0.4, 0.3]（對應生成的四個波浪），而其他的引數都是預設的。

即使不配置很多引數，預設的引數也可以使你獲得一個優雅的水球圖效果。而如果有特定的需求，ECharts 水球圖又支援非常高度定製的效果。下面我們具體說明如何定製化你的水球圖。

第四步：定製化水球圖

水球圖支援非常高度定製化的需求，包括顏色（color）、大小（radius）、波的振幅（amplitude）、波長（waveLength）、相位（phase）、週期（period）、移動方向（direction）、形狀（shape）、動畫（waveAnimation）等等，完整的配置項引數參見水球圖 API。文件有針對每個配置項的詳細說明，這裡我們來介紹一些重要的引數。

形狀與動畫

先來看看效果+程式碼。

除了預設的圓形（’circle’）水球圖，還可以將 shape 設定為 ECharts Symbol 的其他型別：’rect’、’roundRect’、’triangle’、’diamond’、’pin’、’arrow’。甚至，使用 ‘path://…’ 的形式，為其指定一個 SVG 路徑，得到非常酷炫的效果：

檢視效果+程式碼。

通過將 direction 設為 ‘left’ 或 ‘right’，指定波浪的移動方向，或者設為 ‘none’ 表示靜止。

上面的例子完整的配置項程式碼為：

// run at: http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '40%',
        shape: 'diamond',
        center: ['25%', '25%']
    }, {
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        direction: 'left',
        radius: '40%',
        shape: 'rect',
        center: ['75%', '25%']
    }, {
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '40%',
        shape: 'roundRect',
        center: ['25%', '75%'],
        backgroundStyle: {
            borderColor: '#156ACF',
            borderWidth: 1,
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowBlur: 20
        },
        outline: {
            show: false
        },
        waveAnimation: false, // 禁止左右波動
    }, {
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '50%',
        shape: 'pin',
        center: ['75%', '75%'],
        amplitude: 0,
        waveAnimation: false,
        outline: {
            show: false
        },
        backgroundStyle: {
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowBlur: 20
        }
    }]
};

單個波的配置

除了對所有水波做的設定之外，每個水波可以進行單獨的配置。和 ECharts 的其他配置項一樣，對單個數據的配置項將覆蓋整個系列的配置項。

檢視效果+程式碼。

在這個例子中，我們將第二條水波設為紅色，並且改變其移動方向。

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, {
            value: 0.5,
            direction: 'left',
            itemStyle: {
                normal: {
                    color: 'red'
                }
            }
        }, 0.4, 0.3]
    }]
};

可以發現，原先 data 中的一項是一個數字，而在需要做特殊定製的資料中，我們將其設定為一個物件，value 值是原先的數字，其他配置項將覆蓋系列配置項的值。

文字顯示

水球圖中間的文字有個酷炫的效果，在水波和背景前的文字顏色是不同的，可以通過 insideColor 設定水波處的文字顏色，color 設定背景處的文字顏色。

var option = {
    series: [{
        type: 'liquidFill',
        radius: '80%',
        data: [0.5, 0.45, 0.4, 0.3],
        label: {
            normal: {
                textStyle: {
                    color: 'red',
                    insideColor: 'yellow',
                    fontSize: 50
                }
            }
        }
    }]
};

檢視效果+程式碼。

圖表中間預設顯示百分比資料，如果你需要將其設定為其他文字內容，可以通過 formatter 指定，這與 ECharts 的其他格式化函式也是相同的。

formatter 可以是一個字串，其中 ‘{a}’、’{b}’、’{c}’ 會被分別替換成系列名稱、資料名稱、資料值。

如：

var option = {
    series: [{
        type: 'liquidFill',
        name: 'Liquid Fill',
        data: [{
            name: 'First Data',
            value: 0.6
        }, 0.5, 0.4, 0.3],
        label: {
            normal: {
                formatter: '{a}\n{b}\nValue: {c}',
                textStyle: {
                    fontSize: 28
                }
            }
        }
    }]
};

檢視效果+程式碼。

此外，formatter 也可以是一個函式，以下程式碼能得到和上面字串形式同樣的效果。

formatter: function(param) {
    return param.seriesName + '\n'
        + param.name + '\n'
        + 'Value:' + param.value;
}

小結

以上，我們介紹了 ECharts 水球圖的一些基本用法，希望能夠給大家啟發，創作出更多波濤洶湧的作品。

更完整的配置項請參考 GitHub 上詳細的文件，或者到 ECharts Gallery 上檢視其它水球圖作品。

歡迎加入“CSDN前端開發者”群，與更多專家、技術同行進行熱點、難點技術交流。請掃描以下二維碼加群主微信，申請入群，務必註明「姓名+公司+職位」。