{"id":13531255,"url":"https://github.com/ecomfe/echarts-liquidfill","last_synced_at":"2025-05-14T13:09:11.981Z","repository":{"id":46660882,"uuid":"72715306","full_name":"ecomfe/echarts-liquidfill","owner":"ecomfe","description":"Liquid Fill Chart for Apache ECharts","archived":false,"fork":false,"pushed_at":"2024-03-12T02:42:19.000Z","size":3764,"stargazers_count":1496,"open_issues_count":52,"forks_count":616,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-04-11T05:09:34.326Z","etag":null,"topics":["echarts","liquid-fill-charts"],"latest_commit_sha":null,"homepage":"https://ecomfe.github.io/echarts-liquidfill/example/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ecomfe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-03T06:25:23.000Z","updated_at":"2025-04-09T20:09:19.000Z","dependencies_parsed_at":"2024-06-11T23:31:56.390Z","dependency_job_id":null,"html_url":"https://github.com/ecomfe/echarts-liquidfill","commit_stats":{"total_commits":115,"total_committers":4,"mean_commits":28.75,"dds":"0.15652173913043477","last_synced_commit":"b9ade233d1568fdcae4ba602f3bb815d2b63bb28"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fecharts-liquidfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fecharts-liquidfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fecharts-liquidfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecomfe%2Fecharts-liquidfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecomfe","download_url":"https://codeload.github.com/ecomfe/echarts-liquidfill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248345266,"owners_count":21088244,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["echarts","liquid-fill-charts"],"created_at":"2024-08-01T07:01:01.529Z","updated_at":"2025-04-11T05:09:38.794Z","avatar_url":"https://github.com/ecomfe.png","language":"JavaScript","funding_links":[],"categories":["Extensions","JavaScript"],"sub_categories":["Videos"],"readme":"# Liquid Fill Chart\n\nLiquid Fill Chart plugin for [Apache ECharts](https://github.com/apache/echarts), which is usually used to represent data in percentage.\n\n![Rendering Results](http://g.recordit.co/zHeMqqlh4j.gif)\n\n## Install ECharts\n\nTo use ECharts plugins, you need to include the plugin JavaScript file after ECharts file.\n\n```html\n\u003cscript src='echarts.js'\u003e\u003c/script\u003e\n\u003cscript src='echarts-liquidfill.js'\u003e\u003c/script\u003e\n```\n\nECharts can be downloaded at [GitHub dist directory](https://github.com/apache/echarts/tree/master/dist) or [Download page of Official Website](https://echarts.apache.org/zh/download.html) (in Chinese).\n\n#### NOTE\n\n\u003e\n\u003e The minimum package of ECharts required by LiquidFill Chart is [simple version](https://github.com/apache/echarts/blob/master/dist/echarts.simple.js) on GitHub, or selecting nothing in [online builder](https://echarts.apache.org/zh/download.html) (in Chinese). If you need other chart types or components in your other chart, you should include them accordingly.\n\n## Install echarts-liquidfill with npm\n\n```sh\n# install echarts as peer dependency\nnpm install echarts\nnpm install echarts-liquidfill\n```\n\nNOTE:\n\necharts-liquidfill@3 is compitable with echarts@5\necharts-liquidfill@2 is compitable with echarts@4\n\nImport:\n\n```js\nimport * as echarts from 'echarts';\nimport 'echarts-liquidfill'\n```\n\nOr:\n\n```js\nimport * as echarts from 'echarts/core';\nimport 'echarts-liquidfill'\n```\n\n[Here](https://codesandbox.io/s/brave-rosalind-dj280?file=/src/index.js) is the basic example on CodeSandbox\n\n## Download echarts-liquidfill from GitHub\n\nYou may download the lastest ECharts files on [ECharts official site](https://echarts.apache.org/zh/download.html) and download this plugin in [dist directory](https://github.com/ecomfe/echarts-liquidfill/tree/master/dist).\n\n**Note that if you need tooltip for Liquid Fill Chart, you need the complete ECharts version. Otherwise, the simple version will be competent.**\n\n## Important Notes\n\n### Omitted `normal`\n\nSince [ECharts v4.0.0]((https://github.com/apache/echarts/releases/tag/4.0.0)), `normal` is no longer needed for `itemStyle` or `label`.\n\n### Flatten `textStyle`\n\nSince [ECharts v3.7.0](https://github.com/apache/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.\n\n\n\n## Quick Start\n\n- [API](https://github.com/ecomfe/echarts-liquidfill#api)\n- [Examples at ECharts Gallery](https://www.makeapie.com/explore.html#tags=liquidFill~sort=rank~timeframe=all~author=all)\n\nHere are some common uses:\n\n- [Use multiple waves in a chart](https://github.com/ecomfe/echarts-liquidfill#multiple-waves)\n- [Change waves color and opacity](https://github.com/ecomfe/echarts-liquidfill#color-and-opacity)\n- [Make waves static](https://github.com/ecomfe/echarts-liquidfill#static-waves)\n- [Water with no waves](https://github.com/ecomfe/echarts-liquidfill#still-water)\n- [Set attributes for a single wave](https://github.com/ecomfe/echarts-liquidfill#change-a-single-wave)\n- [Change background and border style](https://github.com/ecomfe/echarts-liquidfill#background-style)\n- [Hide outline in chart](https://github.com/ecomfe/echarts-liquidfill#outline-style)\n- [Change shape with SVG](https://github.com/ecomfe/echarts-liquidfill#shape)\n- [Setup animation](https://github.com/ecomfe/echarts-liquidfill#animation)\n- [Change text content and style](https://github.com/ecomfe/echarts-liquidfill#change-text)\n- [Change shadow style](https://github.com/ecomfe/echarts-liquidfill#shadow)\n- [Setup tooltip](https://github.com/ecomfe/echarts-liquidfill#tooltip)\n- [Click event](https://github.com/ecomfe/echarts-liquidfill#click-event)\n- [Make an element non-interactable](https://github.com/ecomfe/echarts-liquidfill#non-interactable)\n\nTo ask a question, you may fork [Liquid Fill Chart Example on Gallery](https://www.makeapie.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.\n\n\n## Examples\n\n### A Simple Example\n\nTo create a Liquid Fill Chart, you need to have a series with type of `'liquidFill'`. A basic option may be:\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6]\n    }]\n};\n```\n\n![A simple liquid fill chart](http://g.recordit.co/RsjUlo69JN.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xr1XplzB4e)\n\n\n### Multiple Waves\n\nIt 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.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, 0.5, 0.4, 0.3]\n    }]\n};\n```\n\nThis creates a chart wit waves at position of 60%, 50%, 40%, and 30%.\n\n![Multiple waves](http://g.recordit.co/HJ3z3ITqzL.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xSyIEWMBNl)\n\n\n### Color and Opacity\n\nTo 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.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.5, 0.4, 0.3],\n        color: ['red', '#0f0', 'rgb(0, 0, 255)'],\n        itemStyle: {\n                opacity: 0.6\n        },\n        emphasis: {\n            itemStyle: {\n                opacity: 0.9\n            }\n        }\n    }]\n};\n```\n\n![Color and opacity](http://g.recordit.co/ZVRBdxO6oY.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xrJpDC704l)\n\nYou may also set the color and opacity of a single data item by:\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.5, 0.4, {\n            value: 0.3,\n            itemStyle: {\n                color: 'red',\n                opacity: 0.6\n            },\n            emphasis: {\n                itemStyle: {\n                    opacity: 0.9\n                }\n            }\n        }]\n    }]\n};\n```\n\n![Color and opacity of a single data item](http://g.recordit.co/Smz5G8ypvO.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xBJPCRXR4l)\n\n\n### Static Waves\n\nTo 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.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        waveAnimation: false,\n        animationDuration: 0,\n        animationDurationUpdate: 0,\n        data: [0.6, 0.5, 0.4, 0.3]\n    }]\n};\n```\n\n![Static waves](http://g.recordit.co/Wze7eblLPM.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xH1VfVVREx)\n\n\n### Still Water\n\nYou may set the `amplitude` to be 0 to make still waves.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, 0.5, 0.4, 0.3],\n        amplitude: 0,\n        waveAnimation: 0\n    }]\n};\n```\n\nIt is recommended to set `waveAnimation` to be false in this case to disable animation for performance consideration.\n\n![Still water](http://g.recordit.co/EQ5pnYDAtN.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xHy1NHVCNx)\n\n### Change A Single Wave\n\nTo change a single wave, overwrite the options in data item.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, {\n            value: 0.5,\n            direction: 'left',\n            itemStyle: {\n                color: 'red'\n            }\n        }, 0.4, 0.3]\n    }]\n};\n```\n\n![Change a single wave](http://g.recordit.co/31VHgsRV2y.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xry6CHNCVl)\n\n### Background Style\n\nYou can use backgroundStyle option to set the stroke, fill style of background shape.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, 0.5, 0.4, 0.3],\n        backgroundStyle: {\n            borderWidth: 5,\n            borderColor: 'red',\n            color: 'yellow'\n        }\n    }]\n};\n```\n\n![Change border width and color](http://g.recordit.co/nXCxOcV4IQ.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xSkJoa_kBx)\n\n### Outline Style\n\nTo hide the outline, just set `outline.show` to be `false`.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, 0.5, 0.4, 0.3],\n        outline: {\n            show: false\n        }\n    }]\n};\n```\n\n![No outline](http://g.recordit.co/nIxiw5KAGC.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xSySxR_JBg)\n\n\n### Shape\n\nShape of water fill chart. It can be:\n\n- one of the default symbols: `'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`;\n- `'container'`: a shape that fully fills the container.\n- an SVG path starting with `'path://'`.\n\n```js\nvar options = [{\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, 0.5, 0.4, 0.3],\n        shape: 'diamond'\n    }]\n}];\n```\n\n![Diamond wave](http://g.recordit.co/1v9490ijKg.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xry0tUfcBe)\n\n```\noption = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.5, 0.4, 0.3, 0.2],\n        shape: 'container',\n        outline: {\n            show: false\n        }\n    }]\n};\n```\n\n![Fill the container](http://g.recordit.co/iuMJckv5lB.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xrko4E9zKb\u0026v=1)\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, 0.55, 0.4, 0.25],\n        radius: '60%',\n        outline: {\n            show: false\n        },\n        backgroundStyle: {\n            borderColor: '#156ACF',\n            borderWidth: 1,\n            shadowColor: 'rgba(0, 0, 0, 0.4)',\n            shadowBlur: 20\n        },\n        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',\n        label: {\n            position: ['38%', '40%'],\n            formatter: function() {\n                return 'ECharts\\nLiquid Fill';\n            },\n            fontSize: 40,\n            color: '#D94854'\n        }\n    }]\n};\n```\n\n![ECharts Liquid Fill](http://g.recordit.co/CfZq1v9tzv.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xH1HouM9Sl)\n\n\n### Animation\n\nGenerally speaking, there are two types of animations in liquid fill charts.\n\nThe first type is initial animation, which has the effect of wave raising. The easing method of this animation is controlled with `animationEasing` and its duration with `animationDuration`.\n\nThe second type is the update animation, which is usually used when data changes and wave height changes. They are controlled with `animationEasingUpdate` and `animationDurationUpdate`.\n\nFor example, to disable the raising animation and set update animation time to be two seconds with `cubicOut` easing, you can use the following option:\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, 0.5, 0.4, 0.3],\n        animationDuration: 0,\n        animationDurationUpdate: 2000,\n        animationEasingUpdate: 'cubicOut'\n    }]\n};\nchart.setOption(option);\nsetTimeout(function () {\n    chart.setOption({\n        series: [{\n            type: 'liquidFill',\n            data: [0.8, 0.6, 0.4, 0.2]\n        }]\n    })\n}, 3000);\n```\n\n![Update animation](http://g.recordit.co/qt87aYQ9SO.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xSk8I5JcHe)\n\n### Change Text\n\nBy default, the text label of liquid fill chart displays percentage of the first data. For example, for a chart with data `[0.6, 0.5, 0.4, 0.3]`, default text is `60%`.\n\nTo change the text, you may use `label.formatter`, which can be set to a string or function.\n\nIf it is a string, `{a}` refers to series name, `{b}` to data name, and `{c}` to data value.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        name: 'Liquid Fill',\n        data: [{\n            name: 'First Data',\n            value: 0.6\n        }, 0.5, 0.4, 0.3],\n        label: {\n            formatter: '{a}\\n{b}\\nValue: {c}',\n            fontSize: 28\n        }\n    }]\n};\n```\n\nLabel text of this example is `'Liquid Fill\\nFirst Data\\nValue: 0.6'`.\n\n![Label formatter as string](http://g.recordit.co/3Zcftu8tpL.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xrkwSn1qHx)\n\nThis has the same result as using `formatter` as a function:\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        name: 'Liquid Fill',\n        data: [{\n            name: 'First Data',\n            value: 0.6\n        }, 0.5, 0.4, 0.3],\n        label: {\n            formatter: function(param) {\n                return param.seriesName + '\\n'\n                    + param.name + '\\n'\n                    + 'Value:' + param.value;\n            },\n            fontSize: 28\n        }\n    }]\n};\n```\n\n[Run](https://www.makeapie.com/editor.html?c=xHk5831cHg)\n\nText position is at the center by default. `label.position` can be set to be `'inside'`, `'left'`, `'right'`, `'top'`, `'bottom'`, or horizontal and vertical positions like `['10%', '20%']`, which means `'10%'` to the left (controlled by `label.align`, which can be `'left'`, `'center'`, or `'right'`) and `'20%'` to the top (controlled by `label.baseline`, which can be `'top'`, `'middle'`, or `'bottom'`).\n\n\n### Shadow\n\nBy default, waves and outline have shadow on them. Here's how to change them.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, 0.5, 0.4, 0.3],\n        itemStyle: {\n            shadowBlur: 0\n        },\n        outline: {\n            borderDistance: 0,\n            itemStyle: {\n                borderWidth: 5,\n                borderColor: '#156ACF',\n                shadowBlur: 20,\n                shadowColor: 'rgba(255, 0, 0, 1)'\n            }\n        }\n    }]\n};\n```\n\n![Change shadow](http://g.recordit.co/nIy6lZaS8C.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xrJO4CyqSl)\n\n### Tooltip\n\nTo add tooltip:\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6],\n        name: 'Liquid Fill'\n    }],\n    tooltip: {\n        show: true\n    }\n};\n```\n\n![Tooltip](http://g.recordit.co/S1zQTS6B0G.gif)\n\n[Run](https://www.makeapie.com/editor.html?c=xSJqXeg5He)\n\n### Click Event\n\nTo add click event on waves:\n\n```js\nchart.setOption(option);\nchart.on('click', function() {\n    console.log(arguments);\n    // do something useful here\n});\n```\n\nLike any other chart types, the above code will only trigger events on waves. If you want to track events on the whole canvas or specific elements, you may add listener to zrender like:\n\n```js\nchart.getZr().on('click', function() {\n       console.log(arguments);\n});\n```\n\n### Non-interactable\n\nTo make an element (e.g., a wave) non-interactable, simply set `silent` to be `true`.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, 0.5, 0.4, 0.3],\n        silent: true\n    }]\n};\n```\n\n[Run](https://www.makeapie.com/editor.html?c=xSJqev71Jb)\n\n\n## API\n\nDefault option for liquid fill charts are:\n\n```js\n{\n    data: [],\n\n    color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],\n    center: ['50%', '50%'],\n    radius: '50%',\n    amplitude: '8%',\n    waveLength: '80%',\n    phase: 'auto',\n    period: 'auto',\n    direction: 'right',\n    shape: 'circle',\n\n    waveAnimation: true,\n    animationEasing: 'linear',\n    animationEasingUpdate: 'linear',\n    animationDuration: 2000,\n    animationDurationUpdate: 1000,\n\n    outline: {\n        show: true,\n        borderDistance: 8,\n        itemStyle: {\n            color: 'none',\n            borderColor: '#294D99',\n            borderWidth: 8,\n            shadowBlur: 20,\n            shadowColor: 'rgba(0, 0, 0, 0.25)'\n        }\n    },\n\n    backgroundStyle: {\n        color: '#E3F7FF'\n    },\n\n    itemStyle: {\n        opacity: 0.95,\n        shadowBlur: 50,\n        shadowColor: 'rgba(0, 0, 0, 0.4)'\n    },\n\n    label: {\n        show: true,\n        color: '#294D99',\n        insideColor: '#fff',\n        fontSize: 50,\n        fontWeight: 'bold',\n\n        align: 'center',\n        baseline: 'middle'\n        position: 'inside'\n    },\n\n    emphasis: {\n        itemStyle: {\n            opacity: 0.8\n        }\n    }\n}\n```\n\n\n### data {(number|Object)[]}\n\nValue of each data item should be between 0 and 1.\n\nThe data item can also be an object to configure the option for a single item.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, {\n            value: 0.5,\n            itemStyle: {\n                color: 'red'\n            }\n        }, 0.4, 0.3]\n    }]\n};\n```\n\nThis defines a chart with the second wave of red color.\n\n\n### color {string[]}\n\nWave colors.\n\n\n### shape {string}\n\nShape of water fill chart. It can be one of the default symbols: `'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`. Or, an SVG path starting with `'path://'`.\n\n\n### center {string[]}\n\nPosition of the chart. The first value is x position, the second one is the y position. Each of the values can be a relative value like `'50%'`, which is relative to the smaller value of container width and height, or an absolute value like `100px`.\n\n\n### radius {string}\n\nRadius of the chart, which can be a relative value like `'50%'`, which is relative to the smaller value of container width and height, or an absolute value like `100px`.\n\n\n### amplitude {number}\n\nAmplitude of the wave, in pixels or percentage. If it is in percentage, it's relative to the diameter.\n\n\n### waveLength {string|number}\n\nWave length of the wave, which can be a relative value like `'50%'`, which is relative to the diameter, or an absolute value like `'100px'` or `100`.\n\n\n### phase {number}\n\nPhase of wave, in radian system. By default, it is set to be `'auto'`, when each wave has a phase of `Math.PI / 4` larger than the previous one.\n\n\n### period {number|'auto'|function}\n\nMilliseconds that it takes to move forward a wave-length. By default, it is set to be `'auto'`, when the wave at the front has a greater speed.\n\nIt can also be a formatter function.\n\n```js\nvar option = {\n    series: [{\n        type: 'liquidFill',\n        data: [0.6, 0.5, 0.4, 0.3],\n        radius: '70%',\n        phase: 0,\n        period: function (value, index) {\n            // This function is called four times, each for a data item in series.\n            // `value` is 0.6, 0.5, 0.4, 0.3, and `index` is 0, 1, 2, 3.\n            return 2000 * index + 1000;\n        }\n    }]\n}\n```\n\n\n### direction {string}\n\nDirection that the waves moving in, which should either be `'right'`, or `'left'`.\n\n\n### waveAnimation {boolean}\n\nWhether to enable wave from moving left or right.\n\n\n### animationEasing {string}\n\nEasing methods for initial animation, when waves raise from the bottom at the beginning.\n\n\n### animationEasingUpdate {string}\n\nEasing methods for other animation, for example, when data value changes and wave position changes.\n\n\n### animationDuration {number}\n\nInitial animation duration, in milliseconds.\n\n### animationDurationUpdate {number}\n\nOther animation duration, in milliseconds.\n\n\n### outline.show {boolean}\n\nWhether to display outline.\n\n\n### outline.borderDistance {number}\n\nDistance between border and inner circle.\n\n\n### outline.itemStyle.borderColor {string}\n\nBorder color.\n\n\n### outline.itemStyle.borderWidth {number}\n\nBorder width.\n\n\n### outline.itemStyle.shadowBlur {number}\n\nOutline shadow blur size.\n\n\n### outline.itemStyle.shadowColor {string}\n\nOutline shadow color.\n\n### backgroundStyle.color {string}\n\nBackground fill color.\n\n### backgroundStyle.borderWidth {string}\n\nBackground stroke line width.\n\n### backgroundStyle.borderColor {string}\n\nBackground stroke line width.\n\n### backgroundStyle.itemStyle.shadowBlur {number}\n\nBackground shadow blur size.\n\n### backgroundStyle.itemStyle.shadowColor {string}\n\nBackground shadow color.\n\n### backgroundStyle.itemStyle.opacity {number}\n\nBackground opacity.\n\n\n### itemStyle.opacity {number}\n\nWave opacity.\n\n\n### itemStyle.shadowBlur {number}\n\nWave shadow width.\n\n\n### itemStyle.shadowColor {string}\n\nWave shadow color.\n\n\n### emphasis.itemStyle.opacity {number}\n\nWave opacity when hover.\n\n\n### label.show {boolean}\n\nWhether to display label text.\n\n\n### label.color {string}\n\nColor of text when display on background.\n\n\n### label.insideColor {string}\n\nColor of text when display on wave.\n\n\n### label.fontSize {number}\n\nLabel font size.\n\n\n### label.fontWeight {string}\n\nLabel font weight.\n\n\n### label.align {string}\n\nText align, which should be `'left'`, `'center'`, or `'right'`.\n\n\n### label.baseline {string}\n\nText vertical align, which should be `'top'`, `'middle'`, or `'bottom'`.\n\n\n### label.position {string|string[]}\n\nText position is at the center by default. `label.position` can be set to be `'inside'`, `'left'`, `'right'`, `'top'`, `'bottom'`, or horizontal and vertical positions like `['10%', '20%']`, which means `'10%'` to the left and `'20%'` to the top.\n\n\n## Build\n\nFor development:\n```\n$ webpack\n```\n\nFor release:\n\n```\n$ webpack -p\n```\n\n## Notice\n\nThe Apache Software Foundation [Apache ECharts, ECharts](https://echarts.apache.org/), Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the [Apache Software Foundation](https://www.apache.org/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecomfe%2Fecharts-liquidfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecomfe%2Fecharts-liquidfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecomfe%2Fecharts-liquidfill/lists"}