# 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
```
npm will warn you that you have to install peer dependencies by yourself:
```
npm WARN [email protected] requires a peer of echarts@^4.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of zrender@^4.0.7 but none is installed. You must install peer dependencies yourself.
```
Note that the version number may change in your case. Install will the version it shows.
```
npm i echarts@^4.2.1 zrender@^4.0.7
```
## 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
### 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/31VHgsRV2
没有合适的资源?快使用搜索试试~ 我知道了~
数据可视化页面设计(Html模板、大数据模板、大屏echarts模板).zip
共55个文件
png:34个
js:10个
html:4个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 4 浏览量
2022-12-28
16:55:50
上传
评论
收藏 6.71MB ZIP 举报
温馨提示
数据可视化页面设计(Html模板、大数据模板、大屏echarts模板).zip
资源推荐
资源详情
资源评论
收起资源包目录
数据可视化页面设计(Html模板、大数据模板、大屏echarts模板).zip (55个子文件)
数据可视化页面设计
node_modules
echarts-liquidfill
license.md 1KB
src
liquidFillSeries.js 2KB
liquidFillLayout.js 5KB
liquidFill.js 239B
dist
echarts-liquidfill.js 1.2MB
echarts.js 2.81MB
echarts-liquidfill.min.js.map 1.09MB
echarts-liquidfill.min.js 122KB
package.json 2KB
index.js 47B
example
fill-container.html 3KB
index.html 12KB
test.html 2KB
README.md 22KB
js
main.js 17KB
echarts.min.js 730KB
jquery-1.11.0.min.js 177KB
css
style.css 66KB
style.less 78KB
index.html 7KB
images
s2.png 2KB
53earth.png 154KB
53cloud.png 37KB
down.png 216B
green.png 5KB
border2.png 3KB
border.png 4KB
s3.png 2KB
53gqright.png 35KB
execution.png 6KB
circle2.png 4KB
orange.png 4KB
circle1.png 4KB
circle.png 139KB
53centercircle.png 42KB
1.png 421B
53gqleft.png 34KB
clothes.png 535B
53titlebg.png 24KB
图层 27 拷贝.png 10KB
mz.png 668B
title.png 3KB
图层 27.png 5KB
2222.png 13KB
53bg.png 1.4MB
sezhi.png 1.74MB
up.png 215B
53gqbottomleft.png 18KB
s1.png 2KB
535gqbottomright.png 19KB
53bottomsjbg.png 29KB
2.png 423B
shoe.png 1KB
033 数据可视化页面设计.png 1.52MB
fonts
LCdd.TTF 54KB
共 55 条
- 1
资源评论
JGiser
- 粉丝: 7512
- 资源: 5112
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功