# 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 echarts-liquidfill@2.0.4 requires a peer of echarts@^4.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN echarts-liquidfill@2.0.4 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/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: 'liquid
没有合适的资源?快使用搜索试试~ 我知道了~
html实现酷炫美观的可视化大屏风格10源码 +大屏系列十
共57个文件
png:34个
js:10个
html:5个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 5 下载量 161 浏览量
2024-07-25
10:55:10
上传
评论 4
收藏 5.28MB ZIP 举报
温馨提示
资源描述: html实现酷炫美观的可视化大屏风格10源码,大屏源码,html可视化大屏模板源码,系列大屏风格十种,详见文章讲解,包含各种各样的大屏需求,挑选合适自己的一种风格,详细的讲解,酷炫的线条,美观的设计,让图文图表结合的更融洽,兼容各种大屏,调整页面到合适的分辨率,F12全屏观看。各种风格都有,代码上手简单,代码独立,可以直接使用。也可直接预览效果。 效果演示地址: https://blog.csdn.net/weixin_43151418/article/details/140635640 资源使用: 点击 index.html 直接查看效果
资源推荐
资源详情
资源评论
收起资源包目录
html实现酷炫美观的可视化大屏风格10源码.zip (57个子文件)
html实现酷炫美观的可视化大屏风格10源码
node_modules
echarts-liquidfill
license.md 1KB
src
liquidFillSeries.js 2KB
liquidFillLayout.js 5KB
liquidFill.js 228B
dist
echarts-liquidfill.js 1.2MB
echarts.js 2.72MB
echarts-liquidfill.min.js.map 1.09MB
echarts-liquidfill.min.js 122KB
package.json 1KB
index.js 46B
example
fill-container.html 3KB
index.html 12KB
test.html 2KB
README.md 21KB
js
main.js 17KB
echarts.min.js 730KB
jquery-1.11.0.min.js 94KB
css
style.css 64KB
style.less 76KB
index.html 8KB
优质源码合集.html 6KB
images
s2.png 2KB
53earth.png 154KB
53cloud.png 37KB
down.png 216B
green.png 5KB
border2.png 5KB
border.png 5KB
s3.png 2KB
53gqright.png 35KB
execution.png 6KB
circle2.png 4KB
orange.png 4KB
circle1.png 4KB
circle.png 139KB
53centercircle.png 42KB
欣晨软件服务.png 44KB
1.png 421B
53gqleft.png 34KB
clothes.png 1KB
53titlebg.png 24KB
图层 27 拷贝.png 10KB
mz.png 1KB
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 662B
fonts
LCdd.TTF 54KB
readme.txt 692B
共 57 条
- 1
资源评论
- 梦主2024-08-12资源使用价值高,内容详实,给了我很多新想法,感谢大佬分享~
- 丑久乖2024-08-27资源中能够借鉴的内容很多,值得学习的地方也很多,大家一起进步!
- Kg_xiaosheng2024-08-16资源不错,很实用,内容全面,介绍详细,很好用,谢谢分享。
- 懵懵懂懂禾女鬼2024-09-17这个资源内容超赞,对我来说很有价值,很实用,感谢大佬分享~
- beautiful_code_2024-08-08总算找到了想要的资源,搞定遇到的大问题,赞赞赞!
xcLeigh
- 粉丝: 10w+
- 资源: 330
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功