# ECharts Liquid Fill Chart
Liquid Fill Chart plugin for [ECharts](https://github.com/ecomfe/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
npm install echarts-liquidfill
```
## 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, simple version will do.
## Notes
### Flatten `textStyle`
From [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.normal.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: {
normal: {
opacity: 0.6
},
emphasis: {
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: {
normal: {
color: 'red',
opacity: 0.6
},
emphasis: {
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: {
normal: {
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/editor.html?c=xSkJoa_kBx)
### Outline Style
To hide the outline, just set `outline.show` to be `false`.
```js
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
outline: {
show: false
}
}]
};
```
![No outline](h
没有合适的资源?快使用搜索试试~ 我知道了~
使用Echarts制作各种美观的统计报表
共615个文件
js:275个
json:100个
jsp:55个
1星 需积分: 47 29 下载量 55 浏览量
2018-03-20
17:00:27
上传
评论
收藏 19.08MB ZIP 举报
温馨提示
通过使用Echarts制作各种美观的统计报表,包括:柱状图,折线图,饼图,散点图,关系图,地图,箱线图,热力图,K线图,雷达图等
资源推荐
资源详情
资源评论
收起资源包目录
使用Echarts制作各种美观的统计报表 (615个子文件)
.babelrc 234B
.babelrc 215B
.babelrc 112B
.babelrc 96B
.babelrc 30B
.bowerrc 30B
.classpath 1KB
org.eclipse.wst.common.component 480B
org.eclipse.wst.jsdt.ui.superType.container 49B
bootstrap.css 153KB
bootstrap.min.css 122KB
bootstrap-grid.css 28KB
bootstrap-grid.min.css 21KB
leaflet.css 10KB
mapbox-gl.css 9KB
bootstrap-reboot.css 4KB
bootstrap-reboot.min.css 4KB
app.6103aff7f2e8adda822371de0afcf583.css 2KB
demo.css 2KB
app.css 204B
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.editorconfig 781B
.eslintignore 83B
.eslintignore 23B
.eslintignore 5B
.eslintignore 0B
.eslintrc 1019B
.eslintrc 645B
.eslintrc 276B
demo2.gif 703KB
demo1.gif 525KB
demo1.gif 503KB
demo2.gif 457KB
.gitignore 2KB
.gitignore 583B
.gitignore 549B
.gitignore 531B
.gitignore 526B
.gitignore 60B
.gitignore 55B
.gitignore 32B
.gitignore 27B
.gitignore 26B
.gitignore 22B
.gitignore 20B
.gitignore 19B
.gitignore 12B
.gitkeep 0B
effectScatter-map.html 27KB
index2.html 24KB
index2.html 18KB
geo-line.html 17KB
index.html 16KB
index.html 14KB
index.html 13KB
optionKeywords.html 13KB
regression_logarithmic.html 11KB
example.html 6KB
scatter-weibo.html 6KB
clustering_animation.html 5KB
wordCloud.html 5KB
regression_exponential.html 4KB
regression-polynomial.html 4KB
regression_linear.html 4KB
clustering_bikmeans.html 4KB
lines-airline.html 3KB
index.html 3KB
regression_linearThroughOrigin.html 3KB
histogram.html 3KB
fill-container.html 3KB
index.html 2KB
index.html 968B
index.html 758B
index.html 453B
index.html 392B
index.html 220B
ng-echarts.iml 362B
mapbox-gl-dev.js 3.52MB
echarts.js 2.41MB
echarts.js 2.41MB
echarts-3.7.0.js 2.41MB
echarts.js 1.53MB
echarts.js 1.53MB
echarts.common.js 1.01MB
echarts.common.js 1.01MB
world.js 987KB
world.js 987KB
main.min.js 752KB
vendor.4072c478ecfcfd56a1a4.js 744KB
echarts.simple.js 743KB
echarts.simple.js 743KB
vue-echarts.js 615KB
bundle.js 573KB
echarts-all-3.js 544KB
main.js 533KB
echarts-liquidfill.js 480KB
echarts.min.js 423KB
echarts.min.js 423KB
共 615 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
资源评论
- fan8888882020-06-05下载下来没有用
谁动了我的bug
- 粉丝: 474
- 资源: 21
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功