This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch feat-liquidFill in repository https://gitbox.apache.org/repos/asf/echarts-custom-series.git
commit 30f6333f516c07f74ebb2681d00302affdbefc69 Author: Ovilia <[email protected]> AuthorDate: Tue Nov 25 14:55:52 2025 +0800 feat(liquidFill): init --- custom-series/liquidFill/README.md | 111 +++++++++++++++++++++++++++ custom-series/liquidFill/examples/index.html | 51 ++++++++++++ custom-series/liquidFill/examples/ssr.js | 67 ++++++++++++++++ custom-series/liquidFill/package-lock.json | 62 +++++++++++++++ custom-series/liquidFill/package.json | 48 ++++++++++++ custom-series/liquidFill/src/index.ts | 56 ++++++++++++++ 6 files changed, 395 insertions(+) diff --git a/custom-series/liquidFill/README.md b/custom-series/liquidFill/README.md new file mode 100644 index 0000000..0a480f5 --- /dev/null +++ b/custom-series/liquidFill/README.md @@ -0,0 +1,111 @@ +# @echarts-x/custom-liquid-fill + +`liquidFill` is a custom series for [Apache ECharts](https://github.com/apache/echarts). It's typically used to ... + + + +[Source Code](https://github.com/apache/echarts-custom-series/tree/main/custom-series/liquidFill) + +## Usage + +### Browser Environment + +For browser usage, use the auto-registration version that automatically installs the custom series when loaded: + +```html +<script src="./node_modules/echarts/dist/echarts.js"></script> +<script src="./node_modules/@echarts-x/custom-liquid-fill/dist/index.auto.js"></script> +<script> + // No need to call echarts.use(), automatically registered + const chart = echarts.init(...); + const option = { + series: [{ + type: 'custom', + renderItem: 'liquidFill', + // ... + }] + } + chart.setOption(option); +</script> +``` + +See [examples](./examples) for more details. + +### UMD (Universal Module Definition) + +For environments that need manual registration or when using AMD/CommonJS loaders: + +```js +// CommonJS +const echarts = require('echarts'); +const liquidFillInstaller = require('@echarts-x/custom-liquid-fill'); +echarts.use(liquidFillInstaller); +const chart = echarts.init(...); + +const option = { + series: [{ + type: 'custom', + renderItem: 'liquidFill', + // ... + }] +} +chart.setOption(option); +``` + +See [examples](./examples) for more details. + +### ESM (ES Modules) + +For modern module bundlers or native ES module environments: + +```bash +npm install @echarts-x/custom-liquid-fill +``` + +```js +import * as echarts from 'echarts'; +import liquidFillCustomSeriesInstaller from '@echarts-x/custom-liquid-fill'; + +echarts.use(liquidFillCustomSeriesInstaller); +const chart = echarts.init(...); + +const option = { + series: [{ + type: 'custom', + renderItem: 'liquidFill', + // ... + }] +} +chart.setOption(option); +``` + +See [examples](./examples) for more details. + +## API + +### series.data + +The data of the series is an array of arrays. Each sub-array represents ... + +```js +const data = []; +``` + +### series.itemPayload + +The `itemPayload` is an object that contains the following properties: + +| Property | Type | Default | Description | +| -------- | ---- | ------- | ----------- | + +### series.encode + +To make sure the value axis and tooltip take the correct range, `encode` should be set as follows: + +```js +encode: { + x: 0, + y: 1, + tooltip: 2 +} +``` diff --git a/custom-series/liquidFill/examples/index.html b/custom-series/liquidFill/examples/index.html new file mode 100644 index 0000000..30e86dc --- /dev/null +++ b/custom-series/liquidFill/examples/index.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Licensed to the Apache Software Foundation (ASF) under one + or more contributor license agreements. See the NOTICE file + distributed with this work for additional information + regarding copyright ownership. The ASF licenses this file + to you under the Apache License, Version 2.0 (the + "License"); you may not use this file except in compliance + with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, + software distributed under the License is distributed on an + "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + KIND, either express or implied. See the License for the + specific language governing permissions and limitations + under the License. +--> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Apache ECharts Custom Series Test</title> + </head> + + <body> + <div + id="main" + style="width: 1000px; height: 400px; border: 1px solid #ccc" + ></div> + + <script src="../node_modules/echarts/dist/echarts.js"></script> + <script src="../dist/index.auto.js"></script> + <script> + echarts.use(window.liquidFillCustomSeriesInstaller); + const chart = echarts.init(document.getElementById('main')); + + option = { + series: { + type: 'custom', + renderItem: 'liquidFill', + coordinateSystem: 'none', + itemPayload: {}, + }, + }; + + chart.setOption(option); + </script> + </body> +</html> diff --git a/custom-series/liquidFill/examples/ssr.js b/custom-series/liquidFill/examples/ssr.js new file mode 100644 index 0000000..4b07708 --- /dev/null +++ b/custom-series/liquidFill/examples/ssr.js @@ -0,0 +1,67 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +const echarts = require('echarts'); +const liquidFillInstaller = require('../dist/index.js'); + +echarts.use(liquidFillInstaller); + +const chart = echarts.init(null, null, { + renderer: 'svg', + ssr: true, + width: 600, + height: 400, +}); + +// Set up seeded random for consistent thumbnails +const seedrandom = require('seedrandom'); +const myRandom = new seedrandom('echarts-random'); +Math.random = function () { + return myRandom(); +}; + +// Sample data generation - customize this for your specific chart type +const sampleData = []; +// TODO: Generate appropriate sample data for liquidFill + +const option = { + animation: false, + tooltip: { + show: false, + }, + // TODO: Configure axes and other options specific to liquidFill + series: [ + { + type: 'custom', + renderItem: 'liquidFill', + data: sampleData, + silent: true, + itemPayload: { + // TODO: Add specific itemPayload properties for liquidFill + }, + }, + ], +}; + +chart.setOption(option); + +const svg = chart.renderToSVGString(); +console.log(svg); + +chart.dispose(); diff --git a/custom-series/liquidFill/package-lock.json b/custom-series/liquidFill/package-lock.json new file mode 100644 index 0000000..b0c2381 --- /dev/null +++ b/custom-series/liquidFill/package-lock.json @@ -0,0 +1,62 @@ +{ + "name": "@echarts-x/custom-liquid-fill", + "version": "1.0.0-beta.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "@echarts-x/custom-liquid-fill", + "version": "1.0.0-beta.0", + "license": "Apache-2.0", + "devDependencies": { + "echarts": "^6.0.0", + "typescript": "^5.5.4" + }, + "peerDependencies": { + "echarts": "^6.0.0" + } + }, + "node_modules/echarts": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz";, + "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "tslib": "2.3.0", + "zrender": "6.0.0" + } + }, + "node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz";, + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "dev": true, + "license": "0BSD" + }, + "node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz";, + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/zrender": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz";, + "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "tslib": "2.3.0" + } + } + } +} diff --git a/custom-series/liquidFill/package.json b/custom-series/liquidFill/package.json new file mode 100644 index 0000000..c003bf4 --- /dev/null +++ b/custom-series/liquidFill/package.json @@ -0,0 +1,48 @@ +{ + "name": "@echarts-x/custom-liquid-fill", + "version": "1.0.0-beta.0", + "description": "Custom liquidFill series for Apache ECharts", + "main": "dist/index.js", + "module": "dist/index.esm.mjs", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.esm.mjs", + "require": "./dist/index.js" + } + }, + "types": "dist/index.d.ts", + "keywords": [ + "echarts", + "apache-echarts", + "data-visualization", + "chart", + "dataviz" + ], + "author": "", + "license": "Apache-2.0", + "homepage": "https://github.com/apache/echarts-custom-series/tree/main/custom-series/liquidFill";, + "repository": { + "type": "git", + "url": "git+https://github.com/apache/echarts-custom-series.git"; + }, + "scripts": { + "test:browser": "npx http-server . -p 8088 -o examples/index.html", + "test:ssr": "node examples/ssr.js", + "test": "npm run test:ssr" + }, + "devDependencies": { + "echarts": "^6.0.0", + "typescript": "^5.5.4" + }, + "peerDependencies": { + "echarts": "^6.0.0" + }, + "files": [ + "dist", + "README.md" + ], + "publishConfig": { + "access": "public" + } +} \ No newline at end of file diff --git a/custom-series/liquidFill/src/index.ts b/custom-series/liquidFill/src/index.ts new file mode 100644 index 0000000..939323b --- /dev/null +++ b/custom-series/liquidFill/src/index.ts @@ -0,0 +1,56 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import * as echarts from 'echarts'; +import type { + CustomRootElementOption, + CustomSeriesRenderItem, +} from 'echarts/types/src/chart/custom/CustomSeries.d.ts'; +import type { + EChartsExtensionInstallRegisters, + EChartsExtension, +} from 'echarts/types/src/extension.d.ts'; + +type LiquidFillItemPayload = {}; + +const renderItem = ( + params: echarts.CustomSeriesRenderItemParams, + api: echarts.CustomSeriesRenderItemAPI +) => { + const itemPayload = + params.itemPayload as LiquidFillItemPayload; + + const cnt = params.dataInsideLength; + if (params.dataIndex === cnt - 1) { + } + + return { + type: 'group', + children: [], + } as CustomRootElementOption; +}; + +export default { + install(registers: EChartsExtensionInstallRegisters) { + registers.registerCustomSeries( + 'liquidFill', + renderItem as unknown as CustomSeriesRenderItem + ); + }, +} as EChartsExtension; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
