ECharts 水球圖

水球圖是一種适合于展現單個百分比資料的圖表類型，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;
}