# Liquid Fill Chart
Liquid Fill Chart plugin for [Apache ECharts](https://github.com/apache/incubator-echarts), which is usually used to represent data in percentage.
![Rendering Results](http://g.recordit.co/zHeMqqlh4j.gif)
## Install ECharts
To use ECharts plugins, you need to include the plugin JavaScript file after ECharts file.
```html
<script src='echarts.js'></script>
<script src='echarts-liquidfill.js'></script>
```
ECharts can be downloaded at [GitHub dist directory](https://github.com/ecomfe/echarts/tree/master/dist) or [Download page of Official Website](http://echarts.baidu.com/download.html) (in Chinese).
>#### NOTE
>
> The minimum package of ECharts required by LiquidFill Chart is [simple version](https://github.com/ecomfe/echarts/blob/master/dist/echarts.simple.js) on GitHub, or selecting nothing in [online builder](http://echarts.baidu.com/builder.html) (in Chinese). If you need other chart types or components in your other chart, you should include them accordingly.
## Install echarts-liquidfill with npm
```sh
# install echarts as peer dependency
npm install echarts
npm install echarts-liquidfill
```
NOTE:
echarts-liquidfill@3 is compitable with echarts@5
echarts-liquidfill@2 is compitable with echarts@4
## Download echarts-liquidfill from GitHub
You may download the lastest ECharts files on [ECharts official site](http://echarts.baidu.com/download.html) and download this plugin in [dist directory](https://github.com/ecomfe/echarts-liquidfill/tree/master/dist).
**Note that if you need tooltip for Liquid Fill Chart, you need the complete ECharts version. Otherwise, the simple version will be competent.**
## Important Notes
### Omitted `normal`
Since [ECharts v4.0.0]((https://github.com/ecomfe/echarts/releases/tag/4.0.0)), `normal` is no longer needed for `itemStyle` or `label`.
### Flatten `textStyle`
Since [ECharts v3.7.0](https://github.com/ecomfe/echarts/releases/tag/3.7.0), `textStyle` option is flatten, so that `series.label[normal|emphasis].textStyle.xxx` is now can be written in `series.label[normal|emphasis].textStyle`. This is supported from [echarts-liquidfill](https://github.com/ecomfe/echarts-liquidfill/releases/tag/v1.0.6) v1.0.6. So if you found examples with `textStyle` in old demo, don't be too surprised.
## Quick Start
- [API](https://github.com/ecomfe/echarts-liquidfill#api)
- [Examples at ECharts Gallery](http://gallery.echartsjs.com/explore.html#tags=liquidFill~sort=rank~timeframe=all~author=all)
Here are some common uses:
- [Use multiple waves in a chart](https://github.com/ecomfe/echarts-liquidfill#multiple-waves)
- [Change waves color and opacity](https://github.com/ecomfe/echarts-liquidfill#color-and-opacity)
- [Make waves static](https://github.com/ecomfe/echarts-liquidfill#static-waves)
- [Water with no waves](https://github.com/ecomfe/echarts-liquidfill#still-water)
- [Set attributes for a single wave](https://github.com/ecomfe/echarts-liquidfill#change-a-single-wave)
- [Change background and border style](https://github.com/ecomfe/echarts-liquidfill#background-style)
- [Hide outline in chart](https://github.com/ecomfe/echarts-liquidfill#outline-style)
- [Change shape with SVG](https://github.com/ecomfe/echarts-liquidfill#shape)
- [Setup animation](https://github.com/ecomfe/echarts-liquidfill#animation)
- [Change text content and style](https://github.com/ecomfe/echarts-liquidfill#change-text)
- [Change shadow style](https://github.com/ecomfe/echarts-liquidfill#shadow)
- [Setup tooltip](https://github.com/ecomfe/echarts-liquidfill#tooltip)
- [Click event](https://github.com/ecomfe/echarts-liquidfill#click-event)
- [Make an element non-interactable](https://github.com/ecomfe/echarts-liquidfill#non-interactable)
To ask a question, you may fork [Liquid Fill Chart Example on Gallery](http://gallery.echartsjs.com/editor.html?c=xr1XplzB4e) and copy your code there. Then you may [open an issue](https://github.com/ecomfe/echarts-liquidfill/issues/new) in this project.
## Examples
### A Simple Example
To create a Liquid Fill Chart, you need to have a series with type of `'liquidFill'`. A basic option may be:
```js
var option = {
series: [{
type: 'liquidFill',
data: [0.6]
}]
};
```
![A simple liquid fill chart](http://g.recordit.co/RsjUlo69JN.gif)
[Run](http://gallery.echartsjs.com/editor.html?c=xr1XplzB4e)
### Multiple Waves
It is easy to create a liquid fill chart will multiple waves, either to represent multiple data, or to improve the visual effect of the chart.
```js
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3]
}]
};
```
This creates a chart wit waves at position of 60%, 50%, 40%, and 30%.
![Multiple waves](http://g.recordit.co/HJ3z3ITqzL.gif)
[Run](http://gallery.echartsjs.com/editor.html?c=xSyIEWMBNl)
### Color and Opacity
To set colors for liquid fill chart series, set `color` to be an array of colors. To set opacity, use `itemStyle.opacity` and `itemStyle.emphasis.opacity` for normal style and hover style.
```js
var 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
}
}
}]
};
```
![Color and opacity](http://g.recordit.co/ZVRBdxO6oY.gif)
[Run](http://gallery.echartsjs.com/editor.html?c=xrJpDC704l)
You may also set the color and opacity of a single data item by:
```js
var option = {
series: [{
type: 'liquidFill',
data: [0.5, 0.4, {
value: 0.3,
itemStyle: {
color: 'red',
opacity: 0.6
},
emphasis: {
itemStyle: {
opacity: 0.9
}
}
}]
}]
};
```
![Color and opacity of a single data item](http://g.recordit.co/Smz5G8ypvO.gif)
[Run](http://gallery.echartsjs.com/editor.html?c=xBJPCRXR4l)
### Static Waves
To provent the waves from moving left or right, you may simply set `waveAnimation` to be `false`. To disable the animation of waves raising, set `animationDuration` and `animationDurationUpdate` to be 0.
```js
var option = {
series: [{
type: 'liquidFill',
waveAnimation: false,
animationDuration: 0,
animationDurationUpdate: 0,
data: [0.6, 0.5, 0.4, 0.3]
}]
};
```
![Static waves](http://g.recordit.co/Wze7eblLPM.gif)
[Run](http://gallery.echartsjs.com/editor.html?c=xH1VfVVREx)
### Still Water
You may set the `amplitude` to be 0 to make still waves.
```js
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
amplitude: 0,
waveAnimation: 0
}]
};
```
It is recommended to set `waveAnimation` to be false in this case to disable animation for performance consideration.
![Still water](http://g.recordit.co/EQ5pnYDAtN.gif)
[Run](http://gallery.echartsjs.com/editor.html?c=xHy1NHVCNx)
### Change A Single Wave
To change a single wave, overwrite the options in data item.
```js
var option = {
series: [{
type: 'liquidFill',
data: [0.6, {
value: 0.5,
direction: 'left',
itemStyle: {
color: 'red'
}
}, 0.4, 0.3]
}]
};
```
![Change a single wave](http://g.recordit.co/31VHgsRV2y.gif)
[Run](http://gallery.echartsjs.com/editor.html?c=xry6CHNCVl)
### Background Style
You can use backgroundStyle option to set the stroke, fill style of background shape.
```js
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
backgroundStyle: {
borderWidth: 5,
borderColor: 'red',
color: 'yellow'
}
}]
};
```
![Change border width and color](http://g.recordit.co/nXCxOcV4IQ.gif)
[Run](http://gallery.echartsjs.com/
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
液体填充表 Liquid Fill Chart插件,通常用于以百分比表示数据。 安装ECharts 要使用ECharts插件,您需要在ECharts文件之后包括插件JavaScript文件。 < script src =' echarts.js ' > </ script > < script src =' echarts-liquidfill.js ' > </ script > 可以在或(中文)下载ECharts。 笔记 LiquidFill Chart所需的ECharts最小软件包是GitHub上的,或在中不进行任何选择(中文)。 如果您在其他图表中需要其他图表类型或组件,则应相应地包括它们。 使用npm安装echarts-liquidfill # install echarts as peer dependency npm install echarts npm insta
资源详情
资源评论
资源推荐
收起资源包目录
echarts-liquidfill-master.zip (19个子文件)
echarts-liquidfill-master
example
test.html 2KB
fill-container.html 3KB
index.html 12KB
index.js 27B
package.json 746B
.github
ISSUE_TEMPLATE.md 318B
package-lock.json 43KB
dist
echarts-liquidfill.min.js.map 46KB
echarts-liquidfill.js.map 57KB
echarts-liquidfill.js 47KB
echarts-liquidfill.min.js 8KB
src
liquidFillShape.js 5KB
liquidFillSeries.js 2KB
liquidFillView.js 16KB
liquidFill.js 55B
license.md 1KB
.gitignore 20B
webpack.config.js 669B
README.md 21KB
共 19 条
- 1
Airva128
- 粉丝: 22
- 资源: 4670
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0