紹

exceljs是一個讀取，操作和編寫電子表格數據和樣式到XLSX和JSON，從Excel電子表格文件逆向工程設計的項目。之所以稱它最強，是因為它的功能強大，簡直就是專門為Excel打造的前端處理插件，到目前為止，筆者還尚未見過比這個更強大的前端插件，由于其強悍的前端處理能力，這就意味著有很多操作將減輕服務器端壓力，而且性能更加出色！

Github地址

https://github.com/exceljs/exceljs

安裝

安裝我們當然是首選npm

npm install exceljs

創建工作簿

var workbook = new Excel.Workbook();

設置工作簿屬性

workbook.creator = 'Me';
workbook.lastModifiedBy = 'Her';
workbook.created = new Date(1985, 8, 30);
workbook.modified = new Date();
workbook.lastPrinted = new Date(2016, 9, 27);

// 將工作簿日期設置為1904日期系統
workbook.properties.date1904 = true;

工作簿視圖

“工作簿”視圖控制Excel在查看工作簿時打開多少個單獨的窗口。

workbook.views = [
  {
    x: 0, y: 0, width: 10000, height: 20000,
    firstSheet: 0, activeTab: 1, visibility: 'visible'
  }
]

添加工作表

var sheet = workbook.addWorksheet('My Sheet');

用addWorksheet函數的第二個參數設置工作表的選項。

• 例如：

// 創建一個紅色標簽顏色的工作表
var sheet = workbook.addWorksheet('My Sheet', {properties:{tabColor:{argb:'FFC0000'}}});

// 創建一個隱藏網格線的工作表
var sheet = workbook.addWorksheet('My Sheet', {properties: {showGridLines: false}});

// 創建一個第一行和列凍結的工作表
var sheet = workbook.addWorksheet('My Sheet', {views:[{xSplit: 1, ySplit:1}]});

刪除工作表

使用工作表id從工作簿中刪除工作表。

• 例如：

// 創建工作表
var sheet = workbook.addWorksheet('My Sheet');

// 使用工作表ID刪除工作表
workbook.removeWorksheet(sheet.id)

訪問工作表

// 迭代所有sheet
// 注意：workbook.worksheets.forEach仍然可以工作，但這個方式更好
workbook.eachSheet(function(worksheet, sheetId) {
  // ...
});

// 按名稱獲取表格
var worksheet = workbook.getWorksheet('My Sheet');

// 按ID獲取表格
var worksheet = workbook.getWorksheet(1);

。。。。。。以上只是部分文檔中的介紹，感興趣的小伙伴可以移步Github直接查看詳細的文檔，完整功能了解可參考下一個標題

PS：提供了中文文檔

完整功能列表

1. 凍結視圖
2. 拆分視圖

1. 數字格式
2. 字體
3. 對準
4. 邊框
5. 填充
6. 富文本

1. 空值
2. 合并單元格
3. 數值
4. 字符串值
5. 日期值
6. 超鏈接值
7. 公式值
8. 豐富的文本值
9. 布爾值
10. 錯誤值

雖然以上功能還不能包括了Excel的所有功能，但也已經相當的豐富了！

總結

在之前的文章中曾介紹過另一個不錯的前端Excel插件，感興趣的可以去看一看，exceljs擁有這么豐富的功能，如果你想開發一個功能強大的Web電子表格，不妨多嘗試嘗試！

EMO

麻不燒的Github

配合著源碼，用心看完這篇文章，你便領悟了封裝的精髓，麻雀雖小，五臟俱全。

前記

業務代碼之外的代碼，我想稱之為增值代碼。

什么意思？

作為一個程序員，你應該除了完成領導安排的任務，你還應該有一些自己的時間，用來“玩”一些比較有意思的事情。

當現有框架、庫滿足不了我們需求的時候，我們應該嘗試去自己造一些工具。也正是這些你所實現的，成就了他人，造就了自己。

不信，你且想一想，他人會關心你寫的具體的業務邏輯代碼嗎？我想他們更關心的是，你寫的插件，是如何使用的吧，以及方不方便他們借此完成他們自己業務代碼。

再通俗一點，他們不會記住你，但是他們會記住你的Api，因而憶起你。

還有很重要的一點，所有的技術，都是服務于業務的，否則，就是扯皮。

背景

入職新公司以來，一直忙于開發業務，過程中，多處用到了領導寫的牛逼工具。說實話，內心由衷的佩服，簡直就是解放生產力，放到古代，就是要被封神滴。

舉個例子：

領導花了一段時間，研究出了一個自動表單生成器。之前手寫一個表單配置頁，加上表單驗證，可能需要半天，甚至更久。

現在呢？所有的表單、樣式及驗證，都可以通過代碼配置實現，二十分鐘可能就完成了。

由此，我悟出了一個道理:

重復地做一件事，不如用心地做“一件事”。

我想，你肯定也想成為他人口中的那個男人，但整天活在自己的世界里，你可能一時并不知道該如何去做，這里我想告訴你：

成長的一個關鍵性因素，就是來自于模仿。

對的，你可以先嘗試著去閱讀下他人的代碼，看看別人的實現方式，再者可以去github上溜一圈，優秀項目太多了，仿著寫去唄。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

只要你想學，你就一定能學會，只不過是實現的方式好與壞而已，這些是需要后期不斷完善的。

鑒于本篇文章快要跑題了，不再多述，進入正題...

正文

1.組件和插件的區別與聯系

區別

• 組件的使用頻率往往大于插件
• 組件的作用范圍往往小于插件

聯系

• 插件可以封裝組件，組件可以暴露數據給插件

這里不做過多闡述，有興趣可以參考下勞卜大大的這篇文章，寫的很通俗易懂。

2.實現插件的必備因素

基礎

你需要清楚的知道vue的一些高階知識點以及相關內容，比如

• Vue.extend構造器
• $mount手動掛載實例
• mixin混合注入
• 父子組件傳參、跨級組件傳參
• 理解Vue構造函數及prototype原形對象
• npm官網注冊賬號
• webpack打包
• ...

技巧

以下這個技巧是今天開發的時候悟出來的，目測很有用：

別著急開發，先想著如何在開發中使用你的插件

什么意思？順著我的思路捋下去

因為我想實現一個全局toast插件，大概用法

 this.$toast('那個男人') // todo

光彈出文案不行，應該有一個控制彈出方向的變量

 this.$toast('那個男人',{ position:'topCenter' })

全局toast的狀態應該有多種，比如常見的成功、錯誤、警告、普通...

 // 成功success // 錯誤error // 警告warning // 普通info this.$toast('那個男人',{ position:'topCenter', type:'success' })

應該有一個時間變量去控制多長時間自動消失toast

this.$toast('那個男人',{ position:'topCenter', type:'success', closeTime: 3 // 控制3秒后消失toast })

會不會存在一種業務場景，我們不需要自動消失toast

 this.$toast('那個男人',{ position:'topCenter', type:'success', closeTime: 3 // 控制3秒后消失toast autoClose: false })

如果我想在toast結束后，觸發一些回調動作，比如刪除成功toast后刷新列表頁面

 this.$toast('那個男人',{ position:'topCenter', type:'success', closeTime: 3 // 控制3秒后消失toast autoClose: true, callback () { ... } })

toast的內容，可能會很長，因此應該有兩個變量分別控制toast寬度和高度

 this.$toast('那個男人',{ position:'topCenter', type:'success', closeTime: 3 // 控制3秒后消失toast autoClose: true, callback () { ... }, width:300, height:80 })

至此，基礎功能應該都涵蓋了，這個時候你要去考慮一些內建的問題

1. 這么多配置項，我作為一個使用者，都關心嗎？或者說，都需要配置嗎？
2. 針對不同的狀態（success/error/warning/info），肯定要用不同的顏色區分，以及使用不同的圖標，他們之間有什么關系嗎？

配置項多應該怎么解決-默認值

默認給個type唄，比如我的項目中默認的type是info,當我在使用的時候，沒有傳入type時,默認為info

因為大部分的toast場景都是短暫的停留在頁面，所以autoClose設置為true

又因為大部分的toast文案比較短，所以我的默認toast長寬設置為300、80應該足夠了

...

以上默認配置，都可以在使用的時候，傳入參數覆蓋默認參數

針對不同的狀態，toast圖標、顏色、標題之間有什么聯系？

本地存一個map映射配置表，根據傳入的type,我就可以準確的知道圖標、顏色、標題應該是什么

總結幾點：

• 插件對外暴露的參數應保持最少原則，聚焦使用者關注點
• 插件或組件的實現應該要基于使用場景考慮
• 開發一款組件或者插件，應該保持軟件工程領域的開放封閉原則
• 一款好的插件或組件并不是一蹴而就的，往往需要后期使用過程中發現問題，加以完善
• 組件或者插件的文檔一定要完善，并不是每一個使用它的人，都關心它的內部實現，他們更關心的可能僅是如何快速上手

實現

上文提到過，組件可以暴露數據給插件，對于這句話

我的理解是，組件是靜態的，只是對外暴露一些參數入口props。插件，讓我們可以動態的往其中注入一些自定義參數。具體的實現，還是在組件當中完成。

于是乎：我寫了一個靜態組件，通過props定義上文提到的相關變量

先看下script部分

再來看下html部分

可以看到，內部實現其實很簡單，無非就是通過外部傳入的props，控制內部的展示細節而已

到這里靜態組件基本已經完成了（css樣式代碼不在這里貼了）

注意：

• props定義的時候，最好用對象的寫法，作為一定的約束
• 變量名字最好做到見名知意
• class名的綁定可以充分利用vue提供的數組以及對象形式或者配合計算屬性完成

靜態組件怎么變成插件使用呢？

這里不再做過多闡述，vue封裝插件的常用方法主要有以下四種，有疑惑的話，建議觀閱vue開發插件，當然我覺得你應該還需要去了解下Vue.extend的用法，插件的實現離不開它哦。

看下關鍵部分：該文件也是我們后期webpack打包（build）的入口文件

該文件內容涉及到的知識點，也是開發一個vue插件最核心的內容。里面的每一行代碼，都充滿了殺機～

至此，關于插件實現部分基本已經全部完成。

3.如何將自己的插件上傳到npm上去

這里的話，網上的教程有很多，我理解你只需要了解以下幾行代碼的作用，就足夠了

 // webpack.config.js module.exports = { entry: process.env.NODE_ENV === 'development' ? './src/main.js' : './src/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js', libraryTarget: 'umd' }, ... // package.json { "name": "mbs-toast", "description": "a toast plugin base on Vue2", "version": "1.0.0", "author": "xxx ", "license": "MIT", "private": false, "main": "dist/build.js", "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", ...

• 這里的entry入口文件配置的意思是，開發環境時，入口文件用main.js(方便開發調試使用)，打包時入口文件為index.js
• filename是打包生成文件的名字，這里是webpack-simple模版默認使用的就是build.js，沒有特殊需求的話，不建議改動
• libraryTarget屬性可能大家都會比較陌生，因為一般如果只在項目中使用 webpack 不需要關注這兩個屬性，但是如果是開發類庫、插件，那么這兩個屬性就是必須了解的,不清楚的可以參考詳解webpack中ibraryTarget屬性
• package.json文件中的main字段，指定了該npm包引用的入口（記住一定要記得添加，并且文件名應與上面第二點提到的保持一致）

這里我用的模版是自己在官方webpack-simple模版的基礎上做了一些定制化的，里面為了方便我平時開發，加入了scss、eslint，這樣的話，后面就不用每次手動install了，有興趣的可以看下README，定制一份屬于自己的腳手架模板

在你了解了上述背景后，你只需要執行以下幾步即可實現皆大歡喜

順利的話，現在你已經可以在正式項目中，通過

npm install -S xxx 安裝你的私有包了

最后在你的入口文件注冊你的插件

import toastPlugin from 'xxx'Vue.use(toastPlugin) // 這里Vue.use的第二個參數，可以通過全局配置，做一些自定義配置，有需要的自行前往學習

到這里，所有的一切，已塵埃落定

你可以在代碼中愉快的使用了

this.$toast('塵埃落定', { callback () { console.log('hello world') }, type: 'success', // position: 'topRight', autoClose: false})

最后

我在寫這個插件之前，在Github上看到一個大神封裝的插件。四個字描述下，嘆為觀止，有興趣的一定要去看下，我相信愛學習的你，一定會收獲滿滿。同時在開發該插件時，一些樣式及動畫，也做了相應的參考。

該插件的源碼已經上傳mbs-toast，方便大家參考。同時，上述提到的form表單生成器，我也嘗試著自己實現了一遍，有興趣的可以一起加入哦。所有的插件以及組件目前都匯總在麻不燒的Github里，文檔和README正在不斷完善中～

碼字不易，且行且珍惜！

源自：https://juejin.im/post/5dc42069f265da4d3962a8e4

聲明：文章著作權歸作者所有，如有侵權，請聯系小編刪除。

/準備echarts腳本文件

官網下載最新版本：https://echarts.apache.org/zh/download.html

開源庫下載：https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js

//5.33改成最新版本的版本號 就可以下載最新版本了

下載第三方水球庫插件：https://github.com/ecomfe/echarts-liquidfill

1. 打開軟件 新建一個頁面 添加一個容器組件 用于綁定圖表對象 組件名稱隨便填寫 后面要用到

2.添加一個事件來加載圖表腳本，我用的的頁面加載時 ，也可以添加后臺服務組件，通過后臺服務組件事件：服務響應時來調用腳本 可以很方便的綁定數據

3.添加剛才下載echarts腳本文件

添加第三方水球插件：

引入腳本

一個簡單的例子

要創建液體填充圖表，您需要有一個類型為'liquidFill'. 一個基本選項可能是：

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

多波

很容易創建一個帶有多個波浪的液體填充圖表，或者表示多個數據，或者提高圖表的視覺效果。

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

這將在 60%、50%、40% 和 30% 的位置創建一個帶有波浪的圖表。

顏色和不透明度

要為液體填充圖表系列設置顏色，請設置color為顏色數組。要設置不透明度，請使用itemStyle.opacity和itemStyle.emphasis.opacity用于普通樣式和懸停樣式。

option = { series: [{ type: 'liquidFill', data: [0.5, 0.4, 0.3], color: ['red', '#0f0', 'rgb(0, 0, 255)'], itemStyle: { opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] };

您還可以通過以下方式設置單個數據項的顏色和不透明度：

option = { series: [{ type: 'liquidFill', data: [0.5, 0.4, { value: 0.3, itemStyle: { color: 'red', opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] }] };

靜波

為了防止波浪向左或向右移動，您可以簡單地設置waveAnimation為false。要禁用波浪上升的動畫，請將animationDuration和設置animationDurationUpdate為 0。

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

靜止波

您可以將 設置amplitude為 0 以產生靜止波。

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

在這種情況下建議設置waveAnimation為 false 以禁用動畫以考慮性能。

改變單個波

要更改單個波形，請覆蓋數據項中的選項。

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

背景樣式

您可以使用 backgroundStyle 選項來設置背景形狀的筆觸、填充樣式。

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], backgroundStyle: { borderWidth: 5, borderColor: 'red', color: 'yellow' } }] };

輪廓樣式

要隱藏輪廓，只需設置outline.show為false。

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

形狀

水填充圖表的形狀。有可能：

• //默認形狀：'circle',圓形 'rect'正方形, 'roundRect'圓角正方形, 'triangle'三角形, 'diamond'菱形, 'pin'氣球形, 'arrow'多邊三角形;
• 'container'：完全填滿容器的形狀。
• 'path://'以.開頭的 SVG 路徑

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

option = {
    series: [{
        type: 'liquidFill',
        data: [0.5, 0.4, 0.3, 0.2],
        shape: 'container',
        outline: {
            show: false
        }
    }]
};

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' } }] };

動畫

一般來說，液體填充圖表中有兩種類型的動畫。
第一種是初始動畫，具有升浪的效果。此動畫的緩動方法由 控制，animationEasing其持續時間由控制animationDuration。
第二種是更新動畫，通常在數據變化、波高變化時使用。它們由animationEasingUpdate和控制animationDurationUpdate。
例如，要禁用提升動畫并將更新動畫時間設置為 2 秒cubicOut，可以使用以下選項：

var mytubiao = echarts.init(document.getElementById("mytb"))

option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
animationDuration: 0,
animationDurationUpdate: 2000,
animationEasingUpdate: 'cubicOut'
}]
};
mytubiao.setOption(option);
setTimeout(function () {
mytubiao.setOption({
series: [{
type: 'liquidFill',
data: [0.8, 0.6, 0.4, 0.2]
}]
})
}, 3000);

更改文本

默認情況下，液體填充圖表的文本標簽顯示第一個數據的百分比。例如，對于帶有 data 的圖表[0.6, 0.5, 0.4, 0.3]，默認文本是60%.

要更改文本，您可以使用label.formatter，它可以設置為字符串或函數。

如果是字符串，{a}則表示系列名稱、數據名稱和{c}數據值。

option = { series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: '{a}\n\nValue: {c}', fontSize: 28 } }] };
此示例的標簽文本為'Liquid Fill\nFirst Data\nValue: 0.6'.

formatter這與作為函數使用的結果相同：

option = { series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: function(param) { return param.seriesName + '\n' + param.name + '\n' + 'Value:' + param.value; }, fontSize: 28 } }] };
文本位置默認在中心。label.position可以設置為'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'向左（由 控制label.align，可以是'left'、'center'或'right'）和'20%'頂部（由 控制label.baseline，可以是'top'、'middle'或'bottom'）。
陰影
默認情況下，波浪和輪廓上有陰影。以下是如何更改它們。

option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], itemStyle: { shadowBlur: 0 }, outline: { borderDistance: 0, itemStyle: { borderWidth: 5, borderColor: '#156ACF', shadowBlur: 20, shadowColor: 'rgba(255, 0, 0, 1)' } } }] };

工具提示

添加工具提示：
option = { series: [{ type: 'liquidFill', data: [0.6], name: 'Liquid Fill' }], tooltip: { show: true } };

點擊事件

要在 wave 上添加點擊事件：

chart.setOption(option); chart.on('click', function() { console.log(arguments); // do something useful here });

與任何其他圖表類型一樣，上述代碼只會觸發波事件。如果要跟蹤整個畫布或特定元素上的事件，可以將偵聽器添加到 zrender，例如：

chart.getZr().on('click', function() { console.log(arguments); });

不可交互

要使元素（例如，波浪）不可交互，只需設置silent為true.

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

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

}

}

}

數據{(數字|對象)[]}

每個數據項的值應介于 0 和 1 之間。

數據項也可以是配置單個項的選項的對象。

option = {

series: [{

type: 'liquidFill',

data: [0.6, {

value: 0.5,

itemStyle: {

color: 'red'

}

}, 0.4, 0.3]

}]

};

這定義了具有第二波紅色的圖表。

顏色 {string[]}

波浪顏色。

形狀 {字符串}

水填充圖表的形狀。它可以是默認符號之一：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'. 或者，以 . 開頭的 SVG 路徑'path://'。

中心{字符串[]}

圖表的位置。第一個值是 x 位置，第二個值是 y 位置。每個值都可以是一個相對值，例如'50%'，它是相對于容器寬度和高度的較小值的，也可以是一個絕對值，例如100px。

半徑 {字符串}

圖表的半徑，可以是相對值，如'50%'，相對于容器寬度和高度的較小值，也可以是絕對值，如100px。

幅度{數}

波的幅度，以像素或百分比為單位。如果它是百分比，它是相對于直徑的。

波長 {字符串|數字}

波的波長，可以是相對值，例如'50%'，它是相對于直徑的，也可以是絕對值，例如'100px'或100。

階段{編號}

波的相位，以弧度表示。默認情況下'auto'，當每個波的相位Math.PI / 4大于前一個時，它被設置為 。

周期 {number|'auto'|function}

向前移動一個波長所需的毫秒數。默認情況下，'auto'當前面的波速度較大時，它被設置為 。

它也可以是格式化程序功能。

option = {

series: [{

type: 'liquidFill',

data: [0.6, 0.5, 0.4, 0.3],

radius: '70%',

phase: 0,

period: function (value, index) {

// This function is called four times, each for a data item in series.

// `value` is 0.6, 0.5, 0.4, 0.3, and `index` is 0, 1, 2, 3.

return 2000 * index + 1000;

}

}]

}

方向 {字符串}

波浪移動的方向，應該是'right'或'left'。

waveAnimation {boolean}

是否啟用向左或向右移動的波浪。

動畫緩動 {字符串}

初始動畫的緩動方法，當波浪從底部開始上升時。

animationEasingUpdate {字符串}

其他動畫的緩動方法，例如，當數據值改變和波浪位置改變時。

動畫持續時間 {數字}

初始動畫持續時間，以毫秒為單位。

animationDurationUpdate {數字}

其他動畫持續時間，以毫秒為單位。

大綱.show {布爾}

是否顯示輪廓。

大綱.borderDistance {number}

邊界和內圈之間的距離。

outline.itemStyle.borderColor {字符串}

邊框顏色。

outline.itemStyle.borderWidth {number}

邊框寬度。

outline.itemStyle.shadowBlur {number}

輪廓陰影模糊大小。

outline.itemStyle.shadowColor {字符串}

輪廓陰影顏色。

backgroundStyle.color {字符串}

背景填充顏色。

backgroundStyle.borderWidth {字符串}

背景描邊線寬。

backgroundStyle.borderColor {字符串}

背景描邊線寬。

backgroundStyle.itemStyle.shadowBlur {number}

背景陰影模糊大小。

backgroundStyle.itemStyle.shadowColor {字符串}

背景陰影顏色。

backgroundStyle.itemStyle.opacity {number}

背景不透明度。

itemStyle.opacity {number}

波浪不透明度。

itemStyle.shadowBlur {number}

波浪陰影寬度。

itemStyle.shadowColor {字符串}

波浪陰影顏色。

強調.itemStyle.opacity {number}

懸停時波浪不透明度。

標簽.show {布爾}

是否顯示標簽文本。

label.color {字符串}

在背景上顯示時文本的顏色。

label.insideColor {字符串}

在波形上顯示時文本的顏色。

label.fontSize {數字}

標簽字體大小。

標簽.fontWeight {字符串}

標簽字體粗細。

標簽對齊{字符串}

文本對齊，應該是'left', 'center', 或'right'.

label.baseline {字符串}

文本垂直對齊，應為'top'、'middle'或'bottom'。

標簽位置 {string|string[]}

文本位置默認在中心。label.position可以設置為'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'左側和'20%'頂部。