绍

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}则表示系列名称、{b}数据名称和{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{b}\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%'顶部。