This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/echarts-custom-series.git
commit 0a749018d5f6375c6ad85fec642cffcae7d40cd7 Author: Ovilia <[email protected]> AuthorDate: Wed Mar 12 14:55:49 2025 +0800 feat: create segmented doughnut --- README.md | 7 +++ custom-series/segmentedDoughnut/README.md | 65 +++++++++++++++++++++++ custom-series/segmentedDoughnut/package-lock.json | 57 ++++++++++++++++++++ custom-series/segmentedDoughnut/package.json | 18 +++++++ custom-series/segmentedDoughnut/rollup.config.js | 38 +++++++++++++ custom-series/segmentedDoughnut/src/index.ts | 54 +++++++++++++++++++ custom-series/segmentedDoughnut/test/index.html | 33 ++++++++++++ 7 files changed, 272 insertions(+) diff --git a/README.md b/README.md index 659f69f..97c8cf9 100644 --- a/README.md +++ b/README.md @@ -19,9 +19,16 @@ npm install Note: Building requires the lib files of ECharts v6. So before ECharts v6 is released, you need to clone `apache/echarts` locally and use `npm link` to link it. ```bash +# Under the directory of zrender +git checkout v6 +npm install +npm run prepare +npm link + # Under the directory of echarts git checkout v6 npm install +npm link zrender npm link npm run prepare npm run build diff --git a/custom-series/segmentedDoughnut/README.md b/custom-series/segmentedDoughnut/README.md new file mode 100644 index 0000000..10091db --- /dev/null +++ b/custom-series/segmentedDoughnut/README.md @@ -0,0 +1,65 @@ +# segmentedDoughnut + +`segmentedDoughnut` is a custom series for [Apache ECharts](https://github.com/apache/echarts). It's typically used to show discrete progress of a task. + + + +## Usage + +Import the custom series JavaScript file and ECharts, then use `echarts.use` to install it. + +```html +<script src="./node_modules/echarts/dist/echarts.js"></script> +<script src="./dist/index.js"></script> +<script> + echarts.use(window.segmentedDoughnutCustomSeriesInstaller); + const chart = echarts.init(...); + // ... +</script> +``` + +Or, if using module bundler, install the package from npm and import it. + +```bash +npm install @echarts/custom-segmented-doughnut +``` + +```js +import echarts from 'echarts'; +import segmentedDoughnutCustomSeriesInstaller from '@echarts/custom-segmented-doughnut'; + +echarts.use(segmentedDoughnutCustomSeriesInstaller); +``` + +See [test](./test/index.html) for more details. + +## API + +### series.data + +The data of the series is an array of arrays. Each sub-array represents a segment of the doughnut. + +```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 +} +``` + +See [test](./test/index.html) for more details. diff --git a/custom-series/segmentedDoughnut/package-lock.json b/custom-series/segmentedDoughnut/package-lock.json new file mode 100644 index 0000000..f8e725c --- /dev/null +++ b/custom-series/segmentedDoughnut/package-lock.json @@ -0,0 +1,57 @@ +{ + "name": "@echarts/custom-segmented-doughnut", + "version": "0.0.1-beta.1", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "@echarts/custom-segmented-doughnut", + "version": "0.0.1-beta.1", + "license": "Apache-2.0", + "dependencies": { + "echarts": "github:apache/echarts#v6" + }, + "devDependencies": { + "typescript": "^5.5.4" + } + }, + "node_modules/echarts": { + "version": "5.6.0", + "resolved": "git+ssh://[email protected]/apache/echarts.git#b5d1a83fff3178db5b0c51e0f0669a5580fe2ee8", + "license": "Apache-2.0", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.6.1" + } + }, + "node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz";, + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "license": "0BSD" + }, + "node_modules/typescript": { + "version": "5.8.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz";, + "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/zrender": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz";, + "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==", + "license": "BSD-3-Clause", + "dependencies": { + "tslib": "2.3.0" + } + } + } +} diff --git a/custom-series/segmentedDoughnut/package.json b/custom-series/segmentedDoughnut/package.json new file mode 100644 index 0000000..98dc087 --- /dev/null +++ b/custom-series/segmentedDoughnut/package.json @@ -0,0 +1,18 @@ +{ + "name": "@echarts/custom-segmented-doughnut", + "version": "0.0.1-beta.1", + "description": "", + "main": "dist/index.js", + "scripts": { + "build": "tsc" + }, + "keywords": [], + "author": "", + "license": "Apache-2.0", + "dependencies": { + "echarts": "github:apache/echarts#v6" + }, + "devDependencies": { + "typescript": "^5.5.4" + } +} \ No newline at end of file diff --git a/custom-series/segmentedDoughnut/rollup.config.js b/custom-series/segmentedDoughnut/rollup.config.js new file mode 100644 index 0000000..ced2e10 --- /dev/null +++ b/custom-series/segmentedDoughnut/rollup.config.js @@ -0,0 +1,38 @@ +module.exports = { + input: 'lib/index.js', + output: { + file: 'dist/index.js', + format: 'umd', + name: 'segmentedDoughnutCustomSeriesInstaller', + extend: true, + globals: { + window: 'window', + }, + }, + plugins: [ + { + name: 'add-license', + renderChunk(code) { + return `/* +* 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. +*/ +${code}`; + }, + }, + ], +}; diff --git a/custom-series/segmentedDoughnut/src/index.ts b/custom-series/segmentedDoughnut/src/index.ts new file mode 100644 index 0000000..cb11088 --- /dev/null +++ b/custom-series/segmentedDoughnut/src/index.ts @@ -0,0 +1,54 @@ +/* + * 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 echarts from 'echarts'; +import type { + CustomRootElementOption, + CustomSeriesRenderItem, +} from 'echarts/types/src/chart/custom/CustomSeries.d.ts'; +import type { EChartsExtensionInstallRegisters } from 'echarts/src/extension.ts'; + +type SegmentedDoughnutItemPayload = { + +}; + +const renderItem = ( + params: echarts.CustomSeriesRenderItemParams, + api: echarts.CustomSeriesRenderItemAPI +) => { + const itemPayload = params.itemPayload as SegmentedDoughnutItemPayload; + + const cnt = params.dataInsideLength; + if (params.dataIndex === cnt - 1) { + } + + return { + type: 'group', + children: [], + } as CustomRootElementOption; +}; + +export default { + install(registers: EChartsExtensionInstallRegisters) { + registers.registerCustomSeries( + 'segmentedDoughnut', + renderItem as unknown as CustomSeriesRenderItem + ); + }, +}; diff --git a/custom-series/segmentedDoughnut/test/index.html b/custom-series/segmentedDoughnut/test/index.html new file mode 100644 index 0000000..28b2d32 --- /dev/null +++ b/custom-series/segmentedDoughnut/test/index.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<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.js"></script> + <script> + echarts.use(window.segmentedDoughnutCustomSeriesInstaller); + const chart = echarts.init(document.getElementById('main')); + + option = { + series: { + type: 'custom', + renderItem: 'segmentedDoughnut', + coordinateSystem: 'none', + itemPayload: { + } + } + }; + + chart.setOption(option); + </script> +</body> + +</html> \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
