轉載編輯。 原作者鏈接地址：https://zhuanlan.zhihu.com/p/25353670?group_id=827655855632715776
水球圖是一種適合於展現單個百分比數據的圖表類型，ECharts 的水球圖插件使你能夠通過非常簡單的配置，實現酷炫的數據展示效果。
第一步：引入 JavaScript 文件
ECharts 的水球圖是一個插件類型的圖表。這意味着，在 ECharts 官網下載的完整版本將不包含水球圖——這保證了不需要使用該圖表的用戶能夠獲得一個盡可能小的代碼版本。使用時，需要在引入 echarts.js 之后，另外引入水球圖對應的 echarts-liquidfill.js，可以在 GitHub 找到最新版本。
第二步：指定 DOM 元素作為圖表容器
和創建 ECharts 的其他圖表一樣，我們需要指定 DOM 中的一個有高度和寬度的元素作為圖表的容器——也就是圖表將會繪制的位置。
定義式樣
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
background: #F1F7FF;
}
.chart {
width: 100%;
height: 500px;
float: left;
}
</style>
定義DOM對象
<div id="liquidfill-chart" style="width=100%; height=100%">
<div class="chart"></div>
</div>
傳入該 DOM 元素，使用 ECharts 初始化圖表：
var chart = echarts.init(document.getElementsByClassName('chart'));第三步：設置水球圖參數
和其他 ECharts 圖表一樣，水球圖提供將系列的 type 指定為 'liquidFill'（注意大小寫）來表明這是一個水球圖類型。
一個簡單的配置項可以是：
var option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3] }] }; chart.setOption(option); 這樣，就能得到水球圖效果了：
水球圖支持非常高度定制化的需求，包括顏色（color）、大小（radius）、波的振幅（amplitude）、波長（waveLength）、相位（phase）、周期（period）、移動方向（direction）、形狀（shape）、動畫（waveAnimation）等等，完整的配置項參數參見水球圖 API。文檔有針對每個配置項的詳細說明，這里我們來介紹一些重要的參數。
direction 設為 'left' 或 'right'，指定波浪的移動方向，或者設為 'none' 表示靜止。
shape 設置：除了默認的圓形（'circle'）水球圖，還可以將 shape 設置為 ECharts Symbol 的其他類型：'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。甚至，使用 'path://...' 的形式，為其指定一個 SVG 路徑，得到非常酷炫的效果
data 中的一項默認是一個數字，而在需要做特殊定制的數據中，我們將其設置為一個對象，value 值是原先的數字，其他配置項將覆蓋系列配置項的值。
以下代碼將第二條水波設為紅色，並且改變其移動方向。
var option = { series: [{ type: 'liquidFill', data: [0.6, { value: 0.5, direction: 'left', itemStyle: { normal: { color: 'red' } } }, 0.4, 0.3] }] };
水球圖中間的文字有個酷炫的效果，在水波和背景前的文字顏色是不同的，可以通過 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; }更完整的配置項請參考 GitHub 上詳細的文檔，或者到 ECharts Gallery 上查看其它水球圖作品。