You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2025/11/25 07:16:05 UTC
(echarts-custom-series) 01/01: feat(liquidFill): init
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 <zw...@gmail.com>
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: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org