From 32cd809b3c5f3afbeff79405d200b8a076ddcef5 Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Mon, 26 Jan 2026 18:01:39 +0800 Subject: [PATCH 01/14] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Evchart-aurora-t?= =?UTF-8?q?heme=E4=B8=BB=E9=A2=98=E5=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增aurora主题包，包含完整的主题配置和示例代码 --- common/config/rush/pnpm-lock.yaml | 158 +++-- packages/vchart-aurora-theme/.eslintignore | 9 + packages/vchart-aurora-theme/.eslintrc.js | 26 + packages/vchart-aurora-theme/README.md | 1 + .../__tests__/index.test.ts | 6 + .../vchart-aurora-theme/bundler.config.js | 13 + packages/vchart-aurora-theme/demo/index.html | 23 + .../demo/src/chart-list.ts | 56 ++ .../vchart-aurora-theme/demo/src/chartSpec.js | 635 ++++++++++++++++++ .../vchart-aurora-theme/demo/src/charts.jsx | 44 ++ .../demo/src/createServiceWorker.js | 52 ++ .../vchart-aurora-theme/demo/src/frame.jsx | 113 ++++ .../vchart-aurora-theme/demo/src/index.jsx | 15 + .../demo/src/index.module.scss | 130 ++++ .../demo/src/normalize.css | 128 ++++ .../vchart-aurora-theme/demo/vite.config.js | 23 + packages/vchart-aurora-theme/jest.config.js | 9 + packages/vchart-aurora-theme/package.json | 87 +++ .../scripts/export-theme.ts | 55 ++ .../src/common/color-scheme.ts | 69 ++ .../src/common/component/axis.ts | 65 ++ .../src/common/component/crosshair.ts | 33 + .../src/common/component/data-zoom.ts | 68 ++ .../src/common/component/indicator.ts | 20 + .../src/common/component/legend.ts | 131 ++++ .../src/common/component/mark-area.ts | 18 + .../src/common/component/mark-line.ts | 29 + .../src/common/component/mark-point.ts | 38 ++ .../src/common/component/polar-axis.ts | 27 + .../src/common/component/scroll-bar.ts | 20 + .../src/common/component/tooltip.ts | 60 ++ .../vchart-aurora-theme/src/common/mark.ts | 11 + .../src/common/series/area.ts | 36 + .../src/common/series/bar.ts | 39 ++ .../src/common/series/funnel.ts | 30 + .../src/common/series/gauge.ts | 27 + .../src/common/series/heatmap.ts | 23 + .../src/common/series/line.ts | 24 + .../src/common/series/pie.ts | 28 + .../src/common/series/radar.ts | 26 + .../src/common/series/scatter.ts | 16 + .../src/common/series/treemap.ts | 22 + .../vchart-aurora-theme/src/common/token.ts | 9 + packages/vchart-aurora-theme/src/index.ts | 60 ++ .../vchart-aurora-theme/tsconfig.eslint.json | 10 + packages/vchart-aurora-theme/tsconfig.json | 18 + .../vchart-aurora-theme/tsconfig.test.json | 9 + rush.json | 7 + 48 files changed, 2516 insertions(+), 40 deletions(-) create mode 100644 packages/vchart-aurora-theme/.eslintignore create mode 100644 packages/vchart-aurora-theme/.eslintrc.js create mode 100644 packages/vchart-aurora-theme/README.md create mode 100644 packages/vchart-aurora-theme/__tests__/index.test.ts create mode 100644 packages/vchart-aurora-theme/bundler.config.js create mode 100644 packages/vchart-aurora-theme/demo/index.html create mode 100644 packages/vchart-aurora-theme/demo/src/chart-list.ts create mode 100644 packages/vchart-aurora-theme/demo/src/chartSpec.js create mode 100644 packages/vchart-aurora-theme/demo/src/charts.jsx create mode 100644 packages/vchart-aurora-theme/demo/src/createServiceWorker.js create mode 100644 packages/vchart-aurora-theme/demo/src/frame.jsx create mode 100644 packages/vchart-aurora-theme/demo/src/index.jsx create mode 100644 packages/vchart-aurora-theme/demo/src/index.module.scss create mode 100644 packages/vchart-aurora-theme/demo/src/normalize.css create mode 100644 packages/vchart-aurora-theme/demo/vite.config.js create mode 100644 packages/vchart-aurora-theme/jest.config.js create mode 100644 packages/vchart-aurora-theme/package.json create mode 100644 packages/vchart-aurora-theme/scripts/export-theme.ts create mode 100644 packages/vchart-aurora-theme/src/common/color-scheme.ts create mode 100644 packages/vchart-aurora-theme/src/common/component/axis.ts create mode 100644 packages/vchart-aurora-theme/src/common/component/crosshair.ts create mode 100644 packages/vchart-aurora-theme/src/common/component/data-zoom.ts create mode 100644 packages/vchart-aurora-theme/src/common/component/indicator.ts create mode 100644 packages/vchart-aurora-theme/src/common/component/legend.ts create mode 100644 packages/vchart-aurora-theme/src/common/component/mark-area.ts create mode 100644 packages/vchart-aurora-theme/src/common/component/mark-line.ts create mode 100644 packages/vchart-aurora-theme/src/common/component/mark-point.ts create mode 100644 packages/vchart-aurora-theme/src/common/component/polar-axis.ts create mode 100644 packages/vchart-aurora-theme/src/common/component/scroll-bar.ts create mode 100644 packages/vchart-aurora-theme/src/common/component/tooltip.ts create mode 100644 packages/vchart-aurora-theme/src/common/mark.ts create mode 100644 packages/vchart-aurora-theme/src/common/series/area.ts create mode 100644 packages/vchart-aurora-theme/src/common/series/bar.ts create mode 100644 packages/vchart-aurora-theme/src/common/series/funnel.ts create mode 100644 packages/vchart-aurora-theme/src/common/series/gauge.ts create mode 100644 packages/vchart-aurora-theme/src/common/series/heatmap.ts create mode 100644 packages/vchart-aurora-theme/src/common/series/line.ts create mode 100644 packages/vchart-aurora-theme/src/common/series/pie.ts create mode 100644 packages/vchart-aurora-theme/src/common/series/radar.ts create mode 100644 packages/vchart-aurora-theme/src/common/series/scatter.ts create mode 100644 packages/vchart-aurora-theme/src/common/series/treemap.ts create mode 100644 packages/vchart-aurora-theme/src/common/token.ts create mode 100644 packages/vchart-aurora-theme/src/index.ts create mode 100644 packages/vchart-aurora-theme/tsconfig.eslint.json create mode 100644 packages/vchart-aurora-theme/tsconfig.json create mode 100644 packages/vchart-aurora-theme/tsconfig.test.json diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 7f6550a..fe167ab 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -83,7 +83,7 @@ importers: '@arco-design/webpack-plugin': 1.7.0 '@arco-plugins/vite-plugin-svgr': 0.7.2_vite@4.5.3 '@arco-themes/react-arco-pro': 0.0.7_pa7uxehr42623f73endqjggywi - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 '@internal/bundler': link:../../tools/bundler @@ -146,6 +146,87 @@ importers: vite: 4.5.3_bby3wderf736tel7qp3evndmrm vite-plugin-svgr: 4.2.0_phsvvvlejkpjhjvgxznbnrvcoa + ../../packages/vchart-aurora-theme: + specifiers: + '@babel/runtime': latest + '@douyinfe/semi-icons': latest + '@douyinfe/semi-icons-lab': latest + '@douyinfe/semi-ui': ^2.51.3 + '@esbuild-plugins/node-globals-polyfill': 0.1.1 + '@esbuild-plugins/node-modules-polyfill': 0.1.4 + '@internal/bundler': workspace:* + '@internal/chart-demo': workspace:* + '@internal/eslint-config': workspace:* + '@internal/jest-config': workspace:* + '@internal/ts-config': workspace:* + '@jest/globals': ~29.5.0 + '@rushstack/eslint-patch': ~1.1.4 + '@types/jest': ~29.5.0 + '@types/node': '*' + '@types/offscreencanvas': 2019.6.4 + '@visactor/react-vchart': 1.12.1 + '@visactor/vchart': 1.12.1 + '@visactor/vchart-theme-utils': workspace:1.12.2 + '@vitejs/plugin-react': ^4.1.1 + '@vitejs/plugin-react-swc': ^3.4.1 + eslint: ~8.18.0 + husky: 7.0.4 + jest: ~29.5.0 + lint-staged: 12.3.7 + magic-string: ^0.25.7 + prettier: 2.6.1 + react: ^18.0.0 + react-device-detect: ^2.2.2 + react-dom: ^18.0.0 + ts-jest: ~29.1.0 + ts-loader: 8.0.2 + ts-node: 10.9.0 + tslib: 2.3.1 + tslint: 5.12.1 + typescript: 4.9.5 + vite: ^4.5.0 + vite-plugin-svgr: ^4.1.0 + dependencies: + '@visactor/vchart-theme-utils': link:../vchart-theme-utils + devDependencies: + '@babel/runtime': 7.28.6 + '@douyinfe/semi-icons': 2.90.13_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.90.13_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y + '@esbuild-plugins/node-globals-polyfill': 0.1.1 + '@esbuild-plugins/node-modules-polyfill': 0.1.4 + '@internal/bundler': link:../../tools/bundler + '@internal/chart-demo': link:../../share/chart-demo + '@internal/eslint-config': link:../../share/eslint-config + '@internal/jest-config': link:../../share/jest-config + '@internal/ts-config': link:../../share/ts-config + '@jest/globals': 29.5.0 + '@rushstack/eslint-patch': 1.1.4 + '@types/jest': 29.5.12 + '@types/node': 20.12.7 + '@types/offscreencanvas': 2019.6.4 + '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 1.12.1 + '@vitejs/plugin-react': 4.2.1_vite@4.5.3 + '@vitejs/plugin-react-swc': 3.6.0_vite@4.5.3 + eslint: 8.18.0 + husky: 7.0.4 + jest: 29.5.0_nfgaym6ygctcxvhgdn7jfhc2pq + lint-staged: 12.3.7 + magic-string: 0.25.9 + prettier: 2.6.1 + react: 18.2.0 + react-device-detect: 2.2.3_biqbaboplfbrettd7655fr4n2y + react-dom: 18.2.0_react@18.2.0 + ts-jest: 29.1.2_doipufordlnvh5g4adbwayvyvy + ts-loader: 8.0.2_typescript@4.9.5 + ts-node: 10.9.0_misjo77sqtw74jgpkxp7bulu2q + tslib: 2.3.1 + tslint: 5.12.1_typescript@4.9.5 + typescript: 4.9.5 + vite: 4.5.3_@types+node@20.12.7 + vite-plugin-svgr: 4.2.0_phsvvvlejkpjhjvgxznbnrvcoa + ../../packages/vchart-semi-theme: specifiers: '@babel/runtime': latest @@ -189,9 +270,9 @@ importers: dependencies: '@visactor/vchart-theme-utils': link:../vchart-theme-utils devDependencies: - '@babel/runtime': 7.26.0 - '@douyinfe/semi-icons': 2.68.3_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.68.3_biqbaboplfbrettd7655fr4n2y + '@babel/runtime': 7.28.6 + '@douyinfe/semi-icons': 2.90.13_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.90.13_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 @@ -375,7 +456,7 @@ importers: '@arco-design/webpack-plugin': 1.7.0 '@arco-plugins/vite-plugin-svgr': 0.7.2_vite@4.5.3 '@arco-themes/react-arco-pro': 0.0.7_pa7uxehr42623f73endqjggywi - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 '@internal/bundler': link:../../tools/bundler @@ -471,8 +552,8 @@ importers: vite: ^4.5.0 dependencies: '@arco-design/web-react': 2.61.2_42iwexueogtmu5amowprdpoisy - '@douyinfe/semi-icons': 2.68.3_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.68.3_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-icons': 2.90.13_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.90.13_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@visactor/vchart-theme': link:../vchart-theme '@visactor/vchart-theme-utils': link:../vchart-theme-utils @@ -600,9 +681,9 @@ importers: '@visactor/vchart-semi-theme': link:../vchart-semi-theme '@visactor/vchart-theme-utils': link:../vchart-theme-utils devDependencies: - '@babel/runtime': 7.26.0 - '@douyinfe/semi-icons': 2.68.3_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.68.3_biqbaboplfbrettd7655fr4n2y + '@babel/runtime': 7.28.6 + '@douyinfe/semi-icons': 2.90.13_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.90.13_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 @@ -716,7 +797,7 @@ importers: '@arco-design/webpack-plugin': 1.7.0 '@arco-plugins/vite-plugin-svgr': 0.7.2_vite@4.5.3 '@arco-themes/react-arco-pro': 0.0.7_pa7uxehr42623f73endqjggywi - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 '@internal/bundler': link:../../tools/bundler @@ -1038,7 +1119,7 @@ packages: react-dom: '>=16' dependencies: '@arco-design/color': 0.4.0 - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 b-tween: 0.3.3 b-validate: 1.5.3 compute-scroll-into-view: 1.0.20 @@ -2282,11 +2363,9 @@ packages: /@babel/regjsgen/0.8.0: resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==} - /@babel/runtime/7.26.0: - resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==} + /@babel/runtime/7.28.6: + resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==} engines: {node: '>=6.9.0'} - dependencies: - regenerator-runtime: 0.14.1 /@babel/template/7.24.0: resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==} @@ -2406,11 +2485,11 @@ packages: memoize-one: 5.2.1 scroll-into-view-if-needed: 2.2.31 - /@douyinfe/semi-icons-lab/2.68.3_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-Vap3IcBp1BhzB3soGxPVIwEyuVpLRmmaJd97KC4cb/u13P7qViigwnpY9NhgjqseUH+7Jdbx1g9BpmK/KNnM8g==} + /@douyinfe/semi-icons-lab/2.90.13_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-/3ihlPM1F2XHB4IucYDyDkkZVQ5h43bSJksAwnnMwiDRCiwvfk1vMPruwWdJ6tFoIBANYo/qjyZHv1MwNH/Gmg==} peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: '>=16.0.0' + react-dom: '>=16.0.0' dependencies: react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -2423,10 +2502,10 @@ packages: classnames: 2.5.1 react: 18.2.0 - /@douyinfe/semi-icons/2.68.3_react@18.2.0: - resolution: {integrity: sha512-CBDVc4HhtuNFdCf4KjCRO496hlO1dAwgtvLlI+2Xu1Rz+K03ssBTLTx9lVWSWeCY8W62mhF906cO5Wqtdo786w==} + /@douyinfe/semi-icons/2.90.13_react@18.2.0: + resolution: {integrity: sha512-9OiKvleOMB+t0h+Vbq/6Tz90JJPANJDvW5g3XtVWmIwIgScgy/N52fMhWXDf6Avr6wi9MDPcQZ6SYPO2S7m4sQ==} peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: '>=16.0.0' dependencies: classnames: 2.5.1 react: 18.2.0 @@ -3057,7 +3136,7 @@ packages: peerDependencies: react: ^16.3.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 hoist-non-react-statics: 3.3.2 react: 18.2.0 react-is: 16.13.1 @@ -6060,7 +6139,7 @@ packages: resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} engines: {node: '>=0.11'} dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 /date-time/3.1.0: resolution: {integrity: sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==} @@ -6259,7 +6338,7 @@ packages: /dom-helpers/5.2.1: resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 csstype: 3.1.3 /dom-serializer/0.2.2: @@ -7328,17 +7407,19 @@ packages: /glob/7.1.7: resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==} + deprecated: Glob versions prior to v9 are no longer supported dependencies: fs.realpath: 1.0.0 inflight: 1.0.6 inherits: 2.0.4 - minimatch: 3.0.8 + minimatch: 3.1.2 once: 1.4.0 path-is-absolute: 1.0.1 dev: true /glob/7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + deprecated: Glob versions prior to v9 are no longer supported dependencies: fs.realpath: 1.0.0 inflight: 1.0.6 @@ -7645,7 +7726,7 @@ packages: /history/4.10.1: resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==} dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 loose-envify: 1.4.0 resolve-pathname: 3.0.0 tiny-invariant: 1.3.3 @@ -10369,7 +10450,7 @@ packages: peerDependencies: react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 react: 18.2.0 /react-color/2.19.3_react@18.2.0: @@ -10437,7 +10518,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 '@types/react': 17.0.80 focus-lock: 1.3.5 prop-types: 15.8.1 @@ -10468,7 +10549,7 @@ packages: react-native: optional: true dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 '@types/react-redux': 7.1.33 hoist-non-react-statics: 3.3.2 loose-envify: 1.4.0 @@ -10499,7 +10580,7 @@ packages: peerDependencies: react: '>=15' dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 history: 4.10.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -10514,7 +10595,7 @@ packages: peerDependencies: react: '>=15' dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 history: 4.10.1 hoist-non-react-statics: 3.3.2 loose-envify: 1.4.0 @@ -10532,7 +10613,7 @@ packages: react: '>=16.6.0' react-dom: '>=16.6.0' dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -10546,7 +10627,7 @@ packages: react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 memoize-one: 5.2.1 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -10661,7 +10742,7 @@ packages: /redux/4.2.1: resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==} dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 dev: true /regenerate-unicode-properties/10.1.1: @@ -10673,13 +10754,10 @@ packages: /regenerate/1.4.2: resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==} - /regenerator-runtime/0.14.1: - resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} - /regenerator-transform/0.15.2: resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==} dependencies: - '@babel/runtime': 7.26.0 + '@babel/runtime': 7.28.6 /regex-not/1.0.2: resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==} diff --git a/packages/vchart-aurora-theme/.eslintignore b/packages/vchart-aurora-theme/.eslintignore new file mode 100644 index 0000000..f9724a9 --- /dev/null +++ b/packages/vchart-aurora-theme/.eslintignore @@ -0,0 +1,9 @@ +dist +build +esm +cjs +node_modules +coverage + +# ignore big data files +__tests__/data/* diff --git a/packages/vchart-aurora-theme/.eslintrc.js b/packages/vchart-aurora-theme/.eslintrc.js new file mode 100644 index 0000000..3a552f1 --- /dev/null +++ b/packages/vchart-aurora-theme/.eslintrc.js @@ -0,0 +1,26 @@ +require('@rushstack/eslint-patch/modern-module-resolution'); + +module.exports = { + extends: ['@internal/eslint-config/profile/lib'], + overrides: [ + { + files: ['**/__tests__/**', '**/*.test.ts'], + // 测试文件允许以下规则 + rules: { + '@typescript-eslint/no-empty-function': 'off', + 'no-console': 'off', + 'dot-notation': 'off', + 'promise/catch-or-return': 'off' + } + } + ], + parserOptions: { + tsconfigRootDir: __dirname, + project: './tsconfig.eslint.json', + sourceType: 'module', + ecmaFeatures: { + jsx: true // 让eslint支持jsx语法 + } + }, + ignorePatterns: ['scripts/**', 'bundler.config.js'] +}; diff --git a/packages/vchart-aurora-theme/README.md b/packages/vchart-aurora-theme/README.md new file mode 100644 index 0000000..a802ca2 --- /dev/null +++ b/packages/vchart-aurora-theme/README.md @@ -0,0 +1 @@ +# @visactor/vchart-aurora-theme diff --git a/packages/vchart-aurora-theme/__tests__/index.test.ts b/packages/vchart-aurora-theme/__tests__/index.test.ts new file mode 100644 index 0000000..8ee436a --- /dev/null +++ b/packages/vchart-aurora-theme/__tests__/index.test.ts @@ -0,0 +1,6 @@ +describe('vchart-semi-theme', () => { + it('for test.', () => { + const a = 1; + expect(a).toBe(1); + }); +}); diff --git a/packages/vchart-aurora-theme/bundler.config.js b/packages/vchart-aurora-theme/bundler.config.js new file mode 100644 index 0000000..f3e3c17 --- /dev/null +++ b/packages/vchart-aurora-theme/bundler.config.js @@ -0,0 +1,13 @@ +/** + * @type {Partial} + */ +module.exports = { + formats: ['cjs', 'es', 'umd'], + outputDir: { + es: 'esm', + cjs: 'cjs', + umd: 'build' + }, + name: 'vchart-semi-theme', + umdOutputFilename: 'index' +}; diff --git a/packages/vchart-aurora-theme/demo/index.html b/packages/vchart-aurora-theme/demo/index.html new file mode 100644 index 0000000..d0c3420 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/index.html @@ -0,0 +1,23 @@ + + + + + + + React App + + +
+ + + + diff --git a/packages/vchart-aurora-theme/demo/src/chart-list.ts b/packages/vchart-aurora-theme/demo/src/chart-list.ts new file mode 100644 index 0000000..51c6d3d --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/chart-list.ts @@ -0,0 +1,56 @@ +import type { IChartInfo } from '@internal/chart-demo'; +import { + areaSpec, + barGroupHorizontalSpec, + barGroupSpec, + barStackedHorizontalSpec, + barStackedPercentSpec, + barStackedSpec, + funnelSpec, + lineSpec, + pieSpec, + radarSpec +} from './chartSpec'; + +export const charts: IChartInfo[] = [ + { + title: 'Grouped Bar Chart', + spec: barGroupSpec + }, + { + title: 'Stacked Bar Chart', + spec: barStackedSpec + }, + { + title: 'Horizontal Grouped Bar Chart', + spec: barGroupHorizontalSpec + }, + { + title: 'Horizontal Stacked Bar Chart', + spec: barStackedHorizontalSpec + }, + { + title: 'Stacked Percentage Bar Chart', + spec: barStackedPercentSpec + }, + { + title: 'Line Chart', + spec: lineSpec + }, + { + title: 'Area Chart', + spec: areaSpec + }, + { + title: 'Pie Chart', + spec: pieSpec + }, + { + title: 'Radar Chart', + spec: radarSpec + }, + { + title: 'Funnel Chart', + spec: funnelSpec + } +]; diff --git a/packages/vchart-aurora-theme/demo/src/chartSpec.js b/packages/vchart-aurora-theme/demo/src/chartSpec.js new file mode 100644 index 0000000..9b532bd --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/chartSpec.js @@ -0,0 +1,635 @@ +export const barSpec = { + type: 'bar', + data: { + values: [ + { type: 'Autocracies', year: '1930', value: 129 }, + { type: 'Autocracies', year: '1940', value: 133 }, + { type: 'Autocracies', year: '1950', value: 130 }, + { type: 'Autocracies', year: '1960', value: 126 }, + { type: 'Autocracies', year: '1970', value: 117 }, + { type: 'Autocracies', year: '1980', value: 114 }, + { type: 'Autocracies', year: '1990', value: 111 }, + { type: 'Autocracies', year: '2000', value: 89 }, + { type: 'Autocracies', year: '2010', value: 80 }, + { type: 'Autocracies', year: '2018', value: 80 } + ] + }, + height: 500, + xField: ['year', 'type'], + yField: 'value', + seriesField: 'type', + axes: [ + { + orient: 'bottom', + visible: true, + domainLine: { visible: true }, + tick: { visible: true } + }, + { + orient: 'left', + visible: true, + domainLine: { visible: false }, + tick: { visible: false } + } + ], + legends: { + visible: true + }, + indicator: { + visible: true + } +}; + +export const barGroupSpec = { + type: 'bar', + data: { + values: [ + { type: 'Autocracies', year: '1930', value: 129 }, + { type: 'Autocracies', year: '1940', value: 133 }, + { type: 'Autocracies', year: '1950', value: 130 }, + { type: 'Autocracies', year: '1960', value: 126 }, + { type: 'Autocracies', year: '1970', value: 117 }, + { type: 'Autocracies', year: '1980', value: 114 }, + { type: 'Autocracies', year: '1990', value: 111 }, + { type: 'Autocracies', year: '2000', value: 89 }, + { type: 'Autocracies', year: '2010', value: 80 }, + { type: 'Autocracies', year: '2018', value: 80 }, + { type: 'Democracies', year: '1930', value: 22 }, + { type: 'Democracies', year: '1940', value: 13 }, + { type: 'Democracies', year: '1950', value: 25 }, + { type: 'Democracies', year: '1960', value: 29 }, + { type: 'Democracies', year: '1970', value: 38 }, + { type: 'Democracies', year: '1980', value: 41 }, + { type: 'Democracies', year: '1990', value: 57 }, + { type: 'Democracies', year: '2000', value: 87 }, + { type: 'Democracies', year: '2010', value: 98 }, + { type: 'Democracies', year: '2018', value: 99 }, + { type: 'Price', year: '1930', value: 56 }, + { type: 'Price', year: '1940', value: 122 }, + { type: 'Price', year: '1950', value: 72 }, + { type: 'Price', year: '1960', value: 82 }, + { type: 'Price', year: '1970', value: 67 }, + { type: 'Price', year: '1980', value: 89 }, + { type: 'Price', year: '1990', value: 60 }, + { type: 'Price', year: '2000', value: 123 }, + { type: 'Price', year: '2010', value: 111 }, + { type: 'Price', year: '2018', value: 99 } + ] + }, + height: 500, + xField: ['year', 'type'], + yField: 'value', + seriesField: 'type', + axes: [ + { + orient: 'bottom', + visible: true, + domainLine: { visible: true }, + tick: { visible: true } + }, + { + orient: 'left', + visible: true, + domainLine: { visible: false }, + tick: { visible: false } + } + ], + legends: { + visible: true + }, + indicator: { + visible: true + }, + label: { + visible: true + } +}; + +export const barGroupHorizontalSpec = { + type: 'bar', + data: { + values: [ + { type: 'Autocracies', year: '1930', value: 129 }, + { type: 'Autocracies', year: '1940', value: 133 }, + { type: 'Autocracies', year: '1950', value: 130 }, + { type: 'Autocracies', year: '1960', value: 126 }, + { type: 'Autocracies', year: '1970', value: 117 }, + { type: 'Autocracies', year: '1980', value: 114 }, + { type: 'Autocracies', year: '1990', value: 111 }, + { type: 'Democracies', year: '1930', value: 22 }, + { type: 'Democracies', year: '1940', value: 13 }, + { type: 'Democracies', year: '1950', value: 25 }, + { type: 'Democracies', year: '1960', value: 29 }, + { type: 'Democracies', year: '1970', value: 38 }, + { type: 'Democracies', year: '1980', value: 41 }, + { type: 'Democracies', year: '1990', value: 57 } + ] + }, + height: 500, + direction: 'horizontal', + xField: 'value', + yField: ['year', 'type'], + seriesField: 'type', + axes: [ + { + orient: 'left', + visible: true, + domainLine: { visible: true }, + tick: { visible: true } + }, + { + orient: 'bottom', + visible: true, + domainLine: { visible: false }, + tick: { visible: false } + } + ], + legends: { + visible: true + }, + indicator: { + visible: true + }, + label: { + visible: true + } +}; + +export const barStackedSpec = { + type: 'bar', + //stack: true, + data: { + values: [ + { type: 'Autocracies', year: '1930', value: 129 }, + { type: 'Autocracies', year: '1940', value: 133 }, + { type: 'Autocracies', year: '1950', value: 130 }, + { type: 'Autocracies', year: '1960', value: 126 }, + { type: 'Autocracies', year: '1970', value: 117 }, + { type: 'Autocracies', year: '1980', value: 114 }, + { type: 'Autocracies', year: '1990', value: 111 }, + { type: 'Autocracies', year: '2000', value: 89 }, + { type: 'Autocracies', year: '2010', value: 80 }, + { type: 'Autocracies', year: '2018', value: 80 }, + { type: 'Democracies', year: '1930', value: 22 }, + { type: 'Democracies', year: '1940', value: 13 }, + { type: 'Democracies', year: '1950', value: 25 }, + { type: 'Democracies', year: '1960', value: 29 }, + { type: 'Democracies', year: '1970', value: 38 }, + { type: 'Democracies', year: '1980', value: 41 }, + { type: 'Democracies', year: '1990', value: 57 }, + { type: 'Democracies', year: '2000', value: 87 }, + { type: 'Democracies', year: '2010', value: 98 }, + { type: 'Democracies', year: '2018', value: 99 }, + { type: 'Price', year: '1930', value: 56 }, + { type: 'Price', year: '1940', value: 122 }, + { type: 'Price', year: '1950', value: 72 }, + { type: 'Price', year: '1960', value: 82 }, + { type: 'Price', year: '1970', value: 67 }, + { type: 'Price', year: '1980', value: 89 }, + { type: 'Price', year: '1990', value: 60 }, + { type: 'Price', year: '2000', value: 123 }, + { type: 'Price', year: '2010', value: 111 }, + { type: 'Price', year: '2018', value: 99 } + ] + }, + height: 500, + xField: 'year', + yField: 'value', + seriesField: 'type', + axes: [ + { + orient: 'bottom', + visible: true, + domainLine: { visible: true }, + tick: { visible: true } + }, + { + orient: 'left', + visible: true, + domainLine: { visible: false }, + tick: { visible: false } + } + ], + legends: { + visible: true + }, + indicator: { + visible: true + } +}; + +export const barStackedHorizontalSpec = { + type: 'bar', + //stack: true, + data: { + values: [ + { type: 'Autocracies', year: '1930', value: 129 }, + { type: 'Autocracies', year: '1940', value: 133 }, + { type: 'Autocracies', year: '1950', value: 130 }, + { type: 'Autocracies', year: '1960', value: 126 }, + { type: 'Autocracies', year: '1970', value: 117 }, + { type: 'Autocracies', year: '1980', value: 114 }, + { type: 'Autocracies', year: '1990', value: 111 }, + { type: 'Democracies', year: '1930', value: 22 }, + { type: 'Democracies', year: '1940', value: 13 }, + { type: 'Democracies', year: '1950', value: 25 }, + { type: 'Democracies', year: '1960', value: 29 }, + { type: 'Democracies', year: '1970', value: 38 }, + { type: 'Democracies', year: '1980', value: 41 }, + { type: 'Democracies', year: '1990', value: 57 }, + { type: 'Price', year: '1930', value: 56 }, + { type: 'Price', year: '1940', value: 122 }, + { type: 'Price', year: '1950', value: 72 }, + { type: 'Price', year: '1960', value: 82 }, + { type: 'Price', year: '1970', value: 67 }, + { type: 'Price', year: '1980', value: 89 }, + { type: 'Price', year: '1990', value: 60 }, + { type: 'D', year: '1930', value: 56 }, + { type: 'D', year: '1940', value: 122 }, + { type: 'D', year: '1950', value: 72 }, + { type: 'D', year: '1960', value: 82 }, + { type: 'D', year: '1970', value: 67 }, + { type: 'D', year: '1980', value: 89 }, + { type: 'D', year: '1990', value: 60 }, + { type: 'E', year: '1930', value: 56 }, + { type: 'E', year: '1940', value: 122 }, + { type: 'E', year: '1950', value: 72 }, + { type: 'E', year: '1960', value: 82 }, + { type: 'E', year: '1970', value: 67 }, + { type: 'E', year: '1980', value: 89 }, + { type: 'E', year: '1990', value: 60 } + ] + }, + height: 500, + direction: 'horizontal', + xField: 'value', + yField: 'year', + seriesField: 'type', + axes: [ + { + orient: 'left', + visible: true, + domainLine: { visible: true }, + tick: { visible: true } + }, + { + orient: 'bottom', + visible: true, + domainLine: { visible: false }, + tick: { visible: false } + } + ], + legends: { + visible: true + }, + indicator: { + visible: true + } +}; + +export const barStackedPercentSpec = { + type: 'bar', + stack: true, + percent: true, + data: { + values: [ + { type: 'Autocracies', year: '1930', value: 129 }, + { type: 'Autocracies', year: '1940', value: 133 }, + { type: 'Autocracies', year: '1950', value: 130 }, + { type: 'Autocracies', year: '1960', value: 126 }, + { type: 'Autocracies', year: '1970', value: 117 }, + { type: 'Autocracies', year: '1980', value: 114 }, + { type: 'Autocracies', year: '1990', value: 111 }, + { type: 'Autocracies', year: '2000', value: 89 }, + { type: 'Autocracies', year: '2010', value: 80 }, + { type: 'Autocracies', year: '2018', value: 80 }, + { type: 'Democracies', year: '1930', value: 22 }, + { type: 'Democracies', year: '1940', value: 13 }, + { type: 'Democracies', year: '1950', value: 25 }, + { type: 'Democracies', year: '1960', value: 29 }, + { type: 'Democracies', year: '1970', value: 38 }, + { type: 'Democracies', year: '1980', value: 41 }, + { type: 'Democracies', year: '1990', value: 57 }, + { type: 'Democracies', year: '2000', value: 87 }, + { type: 'Democracies', year: '2010', value: 98 }, + { type: 'Democracies', year: '2018', value: 99 }, + { type: 'Price', year: '1930', value: 56 }, + { type: 'Price', year: '1940', value: 122 }, + { type: 'Price', year: '1950', value: 72 }, + { type: 'Price', year: '1960', value: 82 }, + { type: 'Price', year: '1970', value: 67 }, + { type: 'Price', year: '1980', value: 89 }, + { type: 'Price', year: '1990', value: 60 }, + { type: 'Price', year: '2000', value: 123 }, + { type: 'Price', year: '2010', value: 111 }, + { type: 'Price', year: '2018', value: 99 } + ] + }, + height: 500, + xField: 'year', + yField: 'value', + seriesField: 'type', + axes: [ + { + orient: 'bottom', + visible: true, + domainLine: { visible: true }, + tick: { visible: true } + }, + { + orient: 'left', + visible: true, + domainLine: { visible: false }, + tick: { visible: false } + } + ], + legends: { + visible: true + }, + label: { + visible: true, + position: 'inside' + } +}; + +export const lineSpec = { + type: 'line', + data: { + values: [ + { type: 'Nail polish', country: 'Africa', value: 4229 }, + { type: 'Nail polish', country: 'EU', value: 4376 }, + { type: 'Nail polish', country: 'China', value: 3054 }, + { type: 'Nail polish', country: 'USA', value: 12814 }, + { type: 'Eyebrow pencil', country: 'Africa', value: 3932 }, + { type: 'Eyebrow pencil', country: 'EU', value: 3987 }, + { type: 'Eyebrow pencil', country: 'China', value: 5067 }, + { type: 'Eyebrow pencil', country: 'USA', value: 13012 }, + { type: 'Rouge', country: 'Africa', value: 5221 }, + { type: 'Rouge', country: 'EU', value: 3574 }, + { type: 'Rouge', country: 'China', value: 7004 }, + { type: 'Rouge', country: 'USA', value: 11624 }, + { type: 'Lipstick', country: 'Africa', value: 9256 }, + { type: 'Lipstick', country: 'EU', value: 4376 }, + { type: 'Lipstick', country: 'China', value: 9054 }, + { type: 'Lipstick', country: 'USA', value: 8814 }, + { type: 'Eyeshadows', country: 'Africa', value: 3308 }, + { type: 'Eyeshadows', country: 'EU', value: 4572 }, + { type: 'Eyeshadows', country: 'China', value: 12043 }, + { type: 'Eyeshadows', country: 'USA', value: 12998 }, + { type: 'Eyeliner', country: 'Africa', value: 5432 }, + { type: 'Eyeliner', country: 'EU', value: 3417 }, + { type: 'Eyeliner', country: 'China', value: 15067 }, + { type: 'Eyeliner', country: 'USA', value: 12321 }, + { type: 'Foundation', country: 'Africa', value: 13701 }, + { type: 'Foundation', country: 'EU', value: 5231 }, + { type: 'Foundation', country: 'China', value: 10119 }, + { type: 'Foundation', country: 'USA', value: 10342 }, + { type: 'Lip gloss', country: 'Africa', value: 4008 }, + { type: 'Lip gloss', country: 'EU', value: 4572 }, + { type: 'Lip gloss', country: 'China', value: 12043 }, + { type: 'Lip gloss', country: 'USA', value: 22998 }, + { type: 'Mascara', country: 'Africa', value: 18712 }, + { type: 'Mascara', country: 'EU', value: 6134 }, + { type: 'Mascara', country: 'China', value: 10419 }, + { type: 'Mascara', country: 'USA', value: 11261 } + ] + }, + height: 600, + xField: ['type'], + yField: 'value', + seriesField: 'country', + legends: { + visible: true + }, + indicator: { + visible: true + } +}; + +export const pieSpec = { + type: 'pie', + data: [ + { + id: 'id0', + values: [ + { type: 'oxygen', value: '46.60' }, + { type: 'silicon', value: '27.72' }, + { type: 'aluminum', value: '8.13' }, + { type: 'iron', value: '5' }, + { type: 'calcium', value: '3.63' }, + { type: 'sodium', value: '2.83' }, + { type: 'potassium', value: '2.59' }, + { type: 'others', value: '3.5' } + ] + } + ], + valueField: 'value', + categoryField: 'type', + legends: { + visible: true, + orient: 'right' + }, + tooltip: { + mark: { + content: [ + { + key: datum => datum['type'], + value: datum => datum['value'] + '%' + } + ] + } + } +}; + +export const radarSpec = { + type: 'radar', + data: [ + { + id: 'radarData', + values: [ + { + key: 'Strength', + value: 6, + type: 'Risk' + }, + { + key: 'Speed', + value: 5, + type: 'Risk' + }, + { + key: 'Shooting', + value: 3, + type: 'Risk' + }, + { + key: 'Endurance', + value: 4, + type: 'Risk' + }, + { + key: 'Precision', + value: 5, + type: 'Risk' + }, + { + key: 'Strength', + value: 5, + type: 'Average risk' + }, + { + key: 'Speed', + value: 5, + type: 'Average risk' + }, + { + key: 'Shooting', + value: 5, + type: 'Average risk' + }, + { + key: 'Endurance', + value: 5, + type: 'Average risk' + }, + { + key: 'Precision', + value: 5, + type: 'Average risk' + } + ] + } + ], + categoryField: 'key', + valueField: 'value', + seriesField: 'type', + label: { + visible: true, //展示label + style: { + visible: datum => datum.type !== 'Average risk' + } + }, + point: { + visible: true, // disable point + style: { + visible: datum => datum.type !== 'Average risk' + } + }, + legends: { + visible: true + }, + area: { + visible: true, + style: { + visible: datum => datum.type !== 'Average risk' + } + }, + outerRadius: 1, + axes: [ + { + orient: 'radius', // radius axis + zIndex: 100, + min: 0, + max: 8 + }, + { + orient: 'angle', // angle axis + zIndex: 50 + } + ] +}; + +export const funnelSpec = { + type: 'funnel', + categoryField: 'name', + valueField: 'value', + data: [ + { + id: 'funnel', + values: [ + { + value: 100, + name: 'Step1' + }, + { + value: 80, + name: 'Step2' + }, + { + value: 60, + name: 'Step3' + }, + { + value: 40, + name: 'Step4' + }, + { + value: 20, + name: 'Step5' + } + ] + } + ], + label: { + visible: true + }, + legends: { + visible: true, + orient: 'bottom' + } +}; + +export const areaSpec = { + type: 'area', + seriesMark: 'line', + data: { + values: [ + { type: 'Nail polish', country: 'Africa', value: 4229 }, + { type: 'Nail polish', country: 'EU', value: 4376 }, + { type: 'Nail polish', country: 'China', value: 3054 }, + { type: 'Nail polish', country: 'USA', value: 12814 }, + { type: 'Eyebrow pencil', country: 'Africa', value: 3932 }, + { type: 'Eyebrow pencil', country: 'EU', value: 3987 }, + { type: 'Eyebrow pencil', country: 'China', value: 5067 }, + { type: 'Eyebrow pencil', country: 'USA', value: 13012 }, + { type: 'Rouge', country: 'Africa', value: 5221 }, + { type: 'Rouge', country: 'EU', value: 3574 }, + { type: 'Rouge', country: 'China', value: 7004 }, + { type: 'Rouge', country: 'USA', value: 11624 }, + { type: 'Lipstick', country: 'Africa', value: 9256 }, + { type: 'Lipstick', country: 'EU', value: 4376 }, + { type: 'Lipstick', country: 'China', value: 9054 }, + { type: 'Lipstick', country: 'USA', value: 8814 }, + { type: 'Eyeshadows', country: 'Africa', value: 3308 }, + { type: 'Eyeshadows', country: 'EU', value: 4572 }, + { type: 'Eyeshadows', country: 'China', value: 12043 }, + { type: 'Eyeshadows', country: 'USA', value: 12998 }, + { type: 'Eyeliner', country: 'Africa', value: 5432 }, + { type: 'Eyeliner', country: 'EU', value: 3417 }, + { type: 'Eyeliner', country: 'China', value: 15067 }, + { type: 'Eyeliner', country: 'USA', value: 12321 }, + { type: 'Foundation', country: 'Africa', value: 13701 }, + { type: 'Foundation', country: 'EU', value: 5231 }, + { type: 'Foundation', country: 'China', value: 10119 }, + { type: 'Foundation', country: 'USA', value: 10342 }, + { type: 'Lip gloss', country: 'Africa', value: 4008 }, + { type: 'Lip gloss', country: 'EU', value: 4572 }, + { type: 'Lip gloss', country: 'China', value: 12043 }, + { type: 'Lip gloss', country: 'USA', value: 22998 }, + { type: 'Mascara', country: 'Africa', value: 18712 }, + { type: 'Mascara', country: 'EU', value: 6134 }, + { type: 'Mascara', country: 'China', value: 10419 }, + { type: 'Mascara', country: 'USA', value: 11261 } + ] + }, + height: 600, + xField: ['type'], + yField: 'value', + seriesField: 'country', + legends: { + visible: true + }, + indicator: { + visible: true + } +}; diff --git a/packages/vchart-aurora-theme/demo/src/charts.jsx b/packages/vchart-aurora-theme/demo/src/charts.jsx new file mode 100644 index 0000000..1c17f10 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/charts.jsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { isMobile } from 'react-device-detect'; +import { charts } from './chart-list'; +import { VChart } from '@visactor/react-vchart'; +import { Card } from '@douyinfe/semi-ui'; + +const chartHeight = 400; + +const Charts = () => { + return ( +
+ {charts.map((chart, i) => { + return ( +
+ + + +
+ ); + })} +
+ ); +}; + +export default Charts; diff --git a/packages/vchart-aurora-theme/demo/src/createServiceWorker.js b/packages/vchart-aurora-theme/demo/src/createServiceWorker.js new file mode 100644 index 0000000..5445ef5 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/createServiceWorker.js @@ -0,0 +1,52 @@ +// In production, we register a service worker to serve assets from local cache. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +export default function register() { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + navigator.serviceWorker + .register(swUrl) + .then(registration => { + // eslint-disable-next-line no-param-reassign + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); // eslint-disable-line no-console + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); // eslint-disable-line no-console + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); + }); + } +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/packages/vchart-aurora-theme/demo/src/frame.jsx b/packages/vchart-aurora-theme/demo/src/frame.jsx new file mode 100644 index 0000000..323c2e6 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/frame.jsx @@ -0,0 +1,113 @@ +import React from 'react'; +import { Nav, Avatar, Button } from '@douyinfe/semi-ui'; +import { IconSemiLogo, IconFeishuLogo, IconHelpCircle, IconBell } from '@douyinfe/semi-icons'; +import { + IconIntro, + IconHeart, + IconCalendar, + IconCheckbox, + IconRadio, + IconList, + IconToast +} from '@douyinfe/semi-icons-lab'; +import styles from './index.module.scss'; +import Charts from './charts.jsx'; + +const Frame = () => { + return ( +
+
+ ), + text: 'Semi Templates' + }} + footer={ +
+ + + + + 示例 + +
+ } + className={styles.nav} + > +
+ +
+

VChart Demo

+
+ +
+
+
+ + ); +}; + +export default Frame; diff --git a/packages/vchart-aurora-theme/demo/src/index.jsx b/packages/vchart-aurora-theme/demo/src/index.jsx new file mode 100644 index 0000000..b6b62c1 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/index.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import Frame from './frame.jsx'; +import './normalize.css'; +import VChart from '@visactor/vchart'; +import { chartAuroraTheme } from '../../src/index.ts'; + +VChart.ThemeManager.registerTheme('aurora', chartAuroraTheme); +VChart.ThemeManager.setCurrentTheme('aurora'); + +const dom = document.querySelector('#root'); +const root = createRoot(dom); +root.render(); + +window['VChart'] = VChart; diff --git a/packages/vchart-aurora-theme/demo/src/index.module.scss b/packages/vchart-aurora-theme/demo/src/index.module.scss new file mode 100644 index 0000000..7397e81 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/index.module.scss @@ -0,0 +1,130 @@ +.rootSidenav { + align-items: flex-start; + background: var(--semi-color-bg-0); + flex-direction: column; + overflow: hidden; + row-gap: 0; + display: flex; + color: var(--semi-color-text-0); + font-family: Inter; + font-size: 20px; + font-weight: 600; + letter-spacing: -0.6px; + line-height: 28px; + text-align: left; + + .nav { + align-self: stretch; + height: 60px; + + .navigationHeaderLogo { + align-items: flex-start; + column-gap: 0; + display: inline-flex; + flex-shrink: 0; + + .semiIconsSemiLogo { + font-size: 36px; + color: var(--semi-color-text-0); + } + } + + .dIV { + align-items: center; + column-gap: 16px; + display: inline-flex; + flex-shrink: 0; + + .semiIconsFeishuLogo, + .semiIconsHelpCircle, + .semiIconsBell { + font-size: 20px; + color: var(--semi-color-text-2); + } + + .avatar { + height: 32px; + width: 32px; + } + } + } + + .main { + align-items: flex-start; + column-gap: 0; + display: flex; + flex-shrink: 0; + align-self: stretch; + + .left { + height: calc(100vh - 60px); + + .navItem, + .navItem5 { + width: 223px; + + .iconIntro, + .iconRadio { + height: 20px; + position: relative; + width: 20px; + } + } + + .navItem1, + .navItem2, + .navItem3, + .navItem4, + .navItem6, + .navItem7 { + width: 223px; + + .iconHeart, + .iconCalendar, + .iconCheckbox, + .iconCalendar, + .iconList, + .iconToast { + height: 20px; + width: 20px; + } + } + } + + .right { + height: calc(100vh - 60px); + overflow-y: auto; + align-items: flex-start; + display: flex; + flex-basis: 0; + flex-direction: column; + padding: 40px; + row-gap: 24px; + flex-grow: 1; + + .item { + min-width: 90px; + vertical-align: middle; + flex-shrink: 0; + } + + .frame1321317607 { + align-items: center; + background: var(--semi-color-fill-0); + border-radius: 12px; + display: flex; + flex-direction: row; + flex-shrink: 0; + color: var(--semi-color-disabled-text); + font-size: 14px; + letter-spacing: -0.14px; + line-height: 20px; + + .yourContentHere { + vertical-align: middle; + min-width: 123px; + } + } + } + } +} diff --git a/packages/vchart-aurora-theme/demo/src/normalize.css b/packages/vchart-aurora-theme/demo/src/normalize.css new file mode 100644 index 0000000..01a183b --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/normalize.css @@ -0,0 +1,128 @@ +* { + box-sizing: border-box; +} + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/packages/vchart-aurora-theme/demo/vite.config.js b/packages/vchart-aurora-theme/demo/vite.config.js new file mode 100644 index 0000000..ade9d9d --- /dev/null +++ b/packages/vchart-aurora-theme/demo/vite.config.js @@ -0,0 +1,23 @@ +import { defineConfig } from 'vite'; +import path from 'path'; +import react from '@vitejs/plugin-react-swc'; +import svgr from 'vite-plugin-svgr'; + +export default defineConfig({ + server: { + host: '0.0.0.0', + https: !!process.env.HTTPS, + open: true + }, + define: { + __DEV__: true, + __VERSION__: JSON.stringify(require('../package.json').version) + }, + resolve: { + alias: { + '@visactor/vchart-aurora-theme': path.resolve(__dirname, '../src/index.ts'), + '@visactor/vchart-theme-utils': path.resolve(__dirname, '../../vchart-theme-utils/src/index.ts') + } + }, + plugins: [react(), svgr()] +}); diff --git a/packages/vchart-aurora-theme/jest.config.js b/packages/vchart-aurora-theme/jest.config.js new file mode 100644 index 0000000..47e294b --- /dev/null +++ b/packages/vchart-aurora-theme/jest.config.js @@ -0,0 +1,9 @@ +const path = require('path'); +const baseJestConfig = require('@internal/jest-config/jest.base'); + +module.exports = { + ...baseJestConfig, + moduleNameMapper: { + ...baseJestConfig.moduleNameMapper + } +}; diff --git a/packages/vchart-aurora-theme/package.json b/packages/vchart-aurora-theme/package.json new file mode 100644 index 0000000..5a0dd8b --- /dev/null +++ b/packages/vchart-aurora-theme/package.json @@ -0,0 +1,87 @@ +{ + "name": "@visactor/vchart-aurora-theme", + "version": "1.0.0", + "description": "Extended themes for VChart", + "sideEffects": false, + "main": "cjs/index.js", + "module": "esm/index.js", + "types": "esm/index.d.ts", + "files": [ + "cjs", + "esm", + "build", + "public" + ], + "scripts": { + "compile": "tsc --noEmit", + "eslint": "eslint --debug --fix src/", + "build": "bundle && npm run export", + "export": "ts-node scripts/export-theme.ts", + "dev": "bundle --clean -f es -w", + "start": "vite serve demo", + "test": "jest", + "test-cov": "jest -w 16 --coverage", + "test-live": "npm run test-watch __tests__/unit/", + "test-watch": "DEBUG_MODE=1 jest --watch" + }, + "peerDependencies": { + "@visactor/vchart": ">=1.10.4" + }, + "dependencies": { + "@visactor/vchart-theme-utils": "workspace:1.12.2" + }, + "devDependencies": { + "@esbuild-plugins/node-globals-polyfill": "0.1.1", + "@esbuild-plugins/node-modules-polyfill": "0.1.4", + "@internal/bundler": "workspace:*", + "@internal/eslint-config": "workspace:*", + "@internal/ts-config": "workspace:*", + "@internal/jest-config": "workspace:*", + "@internal/chart-demo": "workspace:*", + "jest": "~29.5.0", + "@jest/globals": "~29.5.0", + "ts-jest": "~29.1.0", + "@types/jest": "~29.5.0", + "@rushstack/eslint-patch": "~1.1.4", + "eslint": "~8.18.0", + "typescript": "4.9.5", + "@types/node": "*", + "@types/offscreencanvas": "2019.6.4", + "husky": "7.0.4", + "lint-staged": "12.3.7", + "magic-string": "^0.25.7", + "prettier": "2.6.1", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "react-device-detect": "^2.2.2", + "ts-loader": "8.0.2", + "ts-node": "10.9.0", + "tslib": "2.3.1", + "tslint": "5.12.1", + "@vitejs/plugin-react": "^4.1.1", + "@vitejs/plugin-react-swc": "^3.4.1", + "vite": "^4.5.0", + "vite-plugin-svgr": "^4.1.0", + "@babel/runtime": "latest", + "@visactor/vchart": "1.12.1", + "@visactor/react-vchart": "1.12.1", + "@douyinfe/semi-ui": "^2.51.3", + "@douyinfe/semi-icons": "latest", + "@douyinfe/semi-icons-lab": "latest" + }, + "publishConfig": { + "access": "public" + }, + "homepage": "https://www.visactor.io", + "bugs": "https://github.com/VisActor/vchart-theme/issues", + "repository": { + "type": "git", + "url": "https://github.com/VisActor/vchart-theme.git", + "directory": "packages/vchart-semi-theme" + }, + "author": { + "name": "VisActor", + "url": "https://www.visactor.io/" + }, + "license": "MIT" +} diff --git a/packages/vchart-aurora-theme/scripts/export-theme.ts b/packages/vchart-aurora-theme/scripts/export-theme.ts new file mode 100644 index 0000000..b6261f9 --- /dev/null +++ b/packages/vchart-aurora-theme/scripts/export-theme.ts @@ -0,0 +1,55 @@ +/** + * 导出全量 theme json + */ +import fs from 'fs'; +import path from 'path'; +import { ThemeManager } from '@visactor/vchart'; +import { allThemeMap } from '../src'; + +const VCHART_THEME_PROJECT_ROOT = process.cwd(); +const targetPaths = [path.resolve(VCHART_THEME_PROJECT_ROOT, './public')]; + +const result: string[] = []; +allThemeMap.forEach((value, key) => { + let success = true; + if (!ThemeManager.themeExist(key)) { + ThemeManager.registerTheme(key, value); + } + const theme = ThemeManager.getTheme(key); + const themeJson = JSON.stringify(theme); + targetPaths.forEach(targetPath => { + try { + const fileName = path.resolve(targetPath, `${key}.json`); + if (fs.existsSync(fileName)) { + fs.unlinkSync(fileName); + } + fs.writeFileSync(path.resolve(targetPath, `${key}.json`), themeJson); + } catch { + success = false; + } + }); + if (success) { + result.push(key); + } +}); + +// 自动更新 readme +const readmePath = path.resolve(VCHART_THEME_PROJECT_ROOT, './README.md'); +const readme = fs.readFileSync(readmePath, 'utf8'); +const startTag = ''; +const endTag = ''; +const readmeThemeListStart = readme.indexOf(startTag) + startTag.length; +const readmeThemeListEnd = readme.indexOf(endTag); +const newReadme = `${readme.slice(0, readmeThemeListStart)}\n\n${[...allThemeMap.keys()] + .map( + key => + `- [${key}](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-semi-theme/public/${key}.json) ${ + allThemeMap.get(key)?.description ?? '' + }` + ) + .join('\n')}\n\n${readme.slice(readmeThemeListEnd)}`; +fs.writeFileSync(readmePath, newReadme); + +console.warn(`\x1B[33m + 主题 ${result.join(', ')} 已导出 +\x1B[0m`); diff --git a/packages/vchart-aurora-theme/src/common/color-scheme.ts b/packages/vchart-aurora-theme/src/common/color-scheme.ts new file mode 100644 index 0000000..42ffacd --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/color-scheme.ts @@ -0,0 +1,69 @@ +import type { BuiltinColorPalette, IThemeColorScheme } from '@visactor/vchart'; + +const defaultColor = [ + // 定义分类主题色 + '#1443FF', + '#33CCB2', + '#FFD500', + '#FFAA33', + '#FF7733', + '#F65656', + '#E93DBD', + '#9933FF', + '#5533FF', + '#A3ABC2' +]; + +const BLACK_COLORS = { + 100: '#000', + 95: '#0D0D0D', + 85: '#262626', + 65: '#595959', + 45: '#8C8C8C', + 25: '#BFBFBF', + 15: '#D9D9D9', + 6: '#F0F0F0' +}; + +const WHITE_COLORS = { + 100: '#FFFFFF', + 95: '#F2F2F2', + 85: '#D9D9D9', + 65: '#A6A6A6', + 45: '#737373', + 25: '#404040', + 15: '#262626', + 6: '#0F0F0F' +}; + +const blackColorPalettes = {}; +for (const key in BLACK_COLORS) { + blackColorPalettes[`blackColors${key}`] = BLACK_COLORS[key]; +} + +const whiteColorPalettes = {}; +for (const key in WHITE_COLORS) { + whiteColorPalettes[`whiteColors${key}`] = WHITE_COLORS[key]; +} + +export const colorScheme: IThemeColorScheme = { + default: { + dataScheme: defaultColor, + palette: { + bandColor: defaultColor[0], + + /** 背景色 */ + backgroundColor: 'transparent', + + /** 轴线颜色 */ + axisDomainColor: '#DCDEE1', + /** 轴标签字色 */ + axisLabelFontColor: '#909199', + /** 轴网格线颜色 */ + axisGridColor: '#E1E2E5', + + ...blackColorPalettes, + ...whiteColorPalettes + } as Partial + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/axis.ts b/packages/vchart-aurora-theme/src/common/component/axis.ts new file mode 100644 index 0000000..d9898ef --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/axis.ts @@ -0,0 +1,65 @@ +import type { IComponentTheme } from '@visactor/vchart'; + +export const axis: Pick< + IComponentTheme, + 'axis' | 'axisAngle' | 'axisBand' | 'axisLinear' | 'axisRadius' | 'axisX' | 'axisY' +> = { + axis: { + domainLine: { + visible: true, + style: { + lineWidth: 1, + stroke: { type: 'palette', key: 'axisDomainColor' } + } + }, + grid: { + visible: true, + style: { + lineWidth: 1, + stroke: { type: 'palette', key: 'axisGridColor' }, + lineDash: [4, 4] + } + }, + subGrid: { + visible: false, + style: { + lineWidth: 1, + stroke: { type: 'palette', key: 'axisGridColor' }, + lineDash: [4, 4] + } + }, + tick: { + visible: true, + style: { + lineWidth: 1, + stroke: { type: 'palette', key: 'blackColors25' } + } + }, + subTick: { + visible: false, + tickSize: 2, + style: { + lineWidth: 1, + stroke: { type: 'palette', key: 'blackColors15' } + } + }, + label: { + visible: true, + space: 8, + style: { + fontSize: 12, + fill: { type: 'palette', key: 'blackColors45' }, + fontWeight: 400, + fillOpacity: 1 + } + }, + title: { + visible: false, + style: { + fill: { type: 'palette', key: 'blackColors65' }, + fontSize: 12, + lineHeight: 12 + } + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/crosshair.ts b/packages/vchart-aurora-theme/src/common/component/crosshair.ts new file mode 100644 index 0000000..1f11492 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/crosshair.ts @@ -0,0 +1,33 @@ +import type { ICrosshairTheme } from '@visactor/vchart'; + +export const crosshair: ICrosshairTheme = { + trigger: 'hover', + bandField: { + line: { + type: 'rect', + visible: true, + style: { + fill: '#CCD7EB', + fillOpacity: 0.4, + lineDash: [] + } + }, + label: { + visible: false + } + }, + linearField: { + visible: false, + line: { + type: 'line', + style: { + stroke: '#CCD7EB', + lineWidth: 0.4, + lineDash: [] + } + }, + label: { + visible: false + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/data-zoom.ts b/packages/vchart-aurora-theme/src/common/component/data-zoom.ts new file mode 100644 index 0000000..4fe7503 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/data-zoom.ts @@ -0,0 +1,68 @@ +import type { IDataZoomTheme } from '@visactor/vchart'; + +export const dataZoomCommon: IDataZoomTheme = { + middleHandler: { + visible: false + }, + startHandler: { + style: { + size: 22 + } + }, + selectedBackground: { + style: { + fill: '#6699FF', + fillOpacity: 0.2, + opacity: 1, + stroke: '#6699FF', + lineWidth: 2, + cornerRadius: 4 + } + }, + background: { + style: { + fill: '#F3F4F6', + fillOpacity: 0.2, + cornerRadius: 4, + stroke: '#EDEEF0', + opacity: 1, + lineWidth: 2 + } + }, + endHandler: { + style: { + size: 22 + } + }, + backgroundChart: { + area: { + style: { + fill: false, + stroke: '#6699FF' + } + }, + line: { + style: { + fill: false, + stroke: '#6699FF' + } + } + }, + startText: { + visible: false + }, + endText: { + visible: false + } +}; + +export const dataZoom: IDataZoomTheme = { + horizontal: { + ...dataZoomCommon, + height: 44 + }, + vertical: { + ...dataZoomCommon, + width: 44 + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/indicator.ts b/packages/vchart-aurora-theme/src/common/component/indicator.ts new file mode 100644 index 0000000..97b084e --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/indicator.ts @@ -0,0 +1,20 @@ +import type { IIndicatorTheme } from '@visactor/vchart'; + +export const indicator: IIndicatorTheme = { + title: { + visible: true, + style: { + fill: '#12141A', + fontWeight: 500, + fontSize: 16 + } + }, + content: { + visible: true, + style: { + fill: '#85878A', + fontWeight: 400, + fontSize: 12 + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/legend.ts b/packages/vchart-aurora-theme/src/common/component/legend.ts new file mode 100644 index 0000000..802f34b --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/legend.ts @@ -0,0 +1,131 @@ +import type { IComponentTheme } from '@visactor/vchart'; + +const commonColorLegendTheme = { + handlerText: { + space: 10, + style: { + fontSize: 12, + fill: '#2C3542' + } + }, + title: { + space: 5, + style: { + fontSize: 12, + fill: '#2C3542' + } + } +}; + +export const legend: Partial = { + discreteLegend: { + visible: true, + orient: 'top', + padding: [8, 8, 8, 8], + maxRow: 1, + title: { + visible: false, + textStyle: { + fill: { type: 'palette', key: 'blackColors45' }, + fontSize: 12, + lineHeight: 21 + } + }, + item: { + visible: true, + spaceCol: 24, + spaceRow: 12, + padding: 0, + background: { + visible: false + }, + shape: { + space: 4, + style: { + size: 8, + symbolType: 'circle' + }, + state: { unSelected: { fill: '#D8D8D8' } } + }, + label: { + space: 100, + style: { + fill: '#85878A', + fontSize: 12, + lineHeight: 12, + opacity: 1, + fontWeight: 400 + }, + state: { + unSelected: { + fill: '#D8D8D8', + opacity: 1 + } + } + } + }, + pager: { + handler: { + space: 8, + style: { + size: 10, + fill: { + type: 'palette', + key: 'blackColors100' + } + } + }, + textStyle: { + fill: { type: 'palette', key: 'blackColors45' }, + fontSize: 10 + } + }, + allowAllCanceled: false + }, + colorLegend: { + horizontal: { + ...commonColorLegendTheme, + handler: { + style: { + symbolType: 'rectRound', + size: 16, + scaleX: 0.5, + fill: '#fff', + lineWidth: 1, + stroke: '#99B0F3', + radius: 2, + outerBorder: null + } + }, + rail: { + height: 4, + width: 100, + style: { + fill: '#DCDEE2' + } + } + }, + vertical: { + ...commonColorLegendTheme, + handler: { + style: { + symbolType: 'rectRound', + size: 16, + scaleY: 0.5, + fill: '#fff', + lineWidth: 1, + stroke: '#99B0F3', + radius: 2, + outerBorder: null + } + }, + rail: { + width: 4, + height: 100, + style: { + fill: '#DCDEE2' + } + } + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/mark-area.ts b/packages/vchart-aurora-theme/src/common/component/mark-area.ts new file mode 100644 index 0000000..49117d1 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/mark-area.ts @@ -0,0 +1,18 @@ +import type { IMarkAreaTheme } from '@visactor/vchart'; + +export const markArea: IMarkAreaTheme = { + area: { + style: { + fill: { type: 'palette', key: 'blackColors100', a: 0.06 } + } + }, + label: { + style: { + fontSize: { type: 'token', key: 'l5FontSize' }, + fill: { type: 'palette', key: 'blackColors65' } + }, + labelBackground: { + visible: false + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/mark-line.ts b/packages/vchart-aurora-theme/src/common/component/mark-line.ts new file mode 100644 index 0000000..efcf477 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/mark-line.ts @@ -0,0 +1,29 @@ +import type { IMarkLineTheme } from '@visactor/vchart'; + +export const markLine: IMarkLineTheme = { + line: { + style: { + lineDash: [], + lineWidth: 1, + stroke: { type: 'palette', key: 'blackColors25' } + } + }, + startSymbol: { + visible: false + }, + endSymbol: { + visible: false + }, + label: { + position: 'insideStartTop', + refY: 0, + autoRotate: true, + style: { + fontSize: { type: 'token', key: 'l5FontSize' }, + fill: { type: 'palette', key: 'blackColors65' } + }, + labelBackground: { + visible: false + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/mark-point.ts b/packages/vchart-aurora-theme/src/common/component/mark-point.ts new file mode 100644 index 0000000..388af88 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/mark-point.ts @@ -0,0 +1,38 @@ +import type { IMarkPointTheme } from '@visactor/vchart'; + +export const markPoint: IMarkPointTheme = { + itemContent: { + // @ts-ignore + autoRotate: false, // FIXME: type error + offsetY: -16, + text: { + style: { + fontSize: { type: 'token', key: 'l5FontSize' }, + fill: { type: 'palette', key: 'blackColors65' } + } + } + }, + itemLine: { + decorativeLine: { + visible: false + }, + startSymbol: { + visible: true, + size: 6, + style: { + fill: '#fff', + stroke: { type: 'palette', key: 'bandColor' }, + lineWidth: 2 + } + }, + endSymbol: { + visible: false + }, + line: { + style: { + lineWidth: 1, + stroke: { type: 'palette', key: 'blackColors25' } + } + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/polar-axis.ts b/packages/vchart-aurora-theme/src/common/component/polar-axis.ts new file mode 100644 index 0000000..bc04e25 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/polar-axis.ts @@ -0,0 +1,27 @@ +import type { IPolarAxisCommonTheme } from '@visactor/vchart'; + +const axisRadius: IPolarAxisCommonTheme = { + domainLine: {}, + grid: { + smooth: false, + visible: true + }, + subGrid: { + smooth: false + } +}; + +const axisAngle: IPolarAxisCommonTheme = { + grid: { + visible: true, + smooth: false + }, + label: { + space: 4 + } +}; + +export const axisPolar = { + axisRadius, + axisAngle +}; diff --git a/packages/vchart-aurora-theme/src/common/component/scroll-bar.ts b/packages/vchart-aurora-theme/src/common/component/scroll-bar.ts new file mode 100644 index 0000000..c92c07e --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/scroll-bar.ts @@ -0,0 +1,20 @@ +import type { IScrollBarTheme } from '@visactor/vchart'; + +export const scrollBar: IScrollBarTheme = { + horizontal: { + height: 12, + slider: { + style: { + fill: 'rgba(0,0,0,0.15)' + } + } + }, + vertical: { + width: 12, + slider: { + style: { + fill: 'rgba(0,0,0,0.15)' + } + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/tooltip.ts b/packages/vchart-aurora-theme/src/common/component/tooltip.ts new file mode 100644 index 0000000..cf04faa --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/tooltip.ts @@ -0,0 +1,60 @@ +import type { ITooltipTheme } from '@visactor/vchart'; + +export const tooltip: ITooltipTheme = { + offset: { x: 16, y: 16 }, + panel: { + padding: { top: 12, left: 12, right: 12, bottom: 12 }, + backgroundColor: { + type: 'palette', + key: 'popupBackgroundColor' + } as any, + border: { + color: { + type: 'palette', + key: 'popupBackgroundColor' + } as any, + width: 0, + radius: 3 + }, + shadow: { + x: 0, + y: 0, + blur: 10, + spread: 0, + color: '#aeaeae' + } + }, + spaceRow: 12, + titleLabel: { + fontSize: 12, + lineHeight: 12, + fontColor: '#1D1D2E', + fontWeight: '500', + textAlign: 'left', + textBaseline: 'middle', + spacing: 0 + }, + shape: { size: 8, spacing: 8 }, + keyLabel: { + fontSize: 12, + lineHeight: 12, + fontColor: { + type: 'palette', + key: 'blackColors65' + } as any, + textAlign: 'left', + textBaseline: 'middle', + spacing: 12 + }, + valueLabel: { + fontSize: 12, + lineHeight: 12, + fontColor: { + type: 'palette', + key: 'blackColors65' + } as any, + fontWeight: 'normal', + textBaseline: 'middle', + spacing: 0 + } +}; diff --git a/packages/vchart-aurora-theme/src/common/mark.ts b/packages/vchart-aurora-theme/src/common/mark.ts new file mode 100644 index 0000000..13971f2 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/mark.ts @@ -0,0 +1,11 @@ +import type { IGlobalMarkThemeByName } from '@visactor/vchart'; + +export const markByName: IGlobalMarkThemeByName = { + label: { + style: { + fontSize: 12, + fill: { type: 'palette', key: 'blackColors65' }, + lineWidth: 0 + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/area.ts b/packages/vchart-aurora-theme/src/common/series/area.ts new file mode 100644 index 0000000..3e0bdce --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/area.ts @@ -0,0 +1,36 @@ +import type { ISeriesTheme, SeriesTypeEnum, SeriesTypeForThemeEnum } from '@visactor/vchart'; + +export const area: Pick< + ISeriesTheme, + SeriesTypeEnum.area | SeriesTypeForThemeEnum.area_vertical | SeriesTypeForThemeEnum.area_horizontal +> = { + area: { + point: { + style: { + visible: false, + size: 12, + lineWidth: 2, + shadowColor: 'rgba(0, 0, 0, 0.1)', + shadowBlur: 3, + stroke: { type: 'palette', key: 'whiteColors100' } + } + }, + line: { + style: { + curveType: 'monotone', + lineWidth: 2 + } + }, + area: { + style: { + fillOpacity: 0.25, + lineWidth: 2 + }, + state: { + selected: { + fillOpacity: 0.5 + } + } + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/bar.ts b/packages/vchart-aurora-theme/src/common/series/bar.ts new file mode 100644 index 0000000..d3c89b5 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/bar.ts @@ -0,0 +1,39 @@ +import type { ISeriesTheme, SeriesTypeEnum, SeriesTypeForThemeEnum } from '@visactor/vchart'; + +const bar: ISeriesTheme['bar'] = { + barMaxWidth: 8, + // @ts-ignore + barGapInGroup: 4, // FIXME: typeError + label: { + style: { + fill: { type: 'palette', key: 'secondaryFontColor' } + } + } +}; + +const bar_horizontal: ISeriesTheme['bar'] = { + // @ts-ignore + stackCornerRadius: [0, 1, 1, 0], // FIXME: typeError + label: { + position: 'right', + offset: 4 + } +}; + +const bar_vertical: ISeriesTheme['bar'] = { + // @ts-ignore + stackCornerRadius: [1, 1, 0, 0], // FIXME: typeError + label: { + position: 'top', + offset: 4 + } +}; + +export const barTheme: Pick< + ISeriesTheme, + SeriesTypeEnum.bar | SeriesTypeForThemeEnum.bar_horizontal | SeriesTypeForThemeEnum.bar_vertical +> = { + bar, + bar_horizontal, + bar_vertical +}; diff --git a/packages/vchart-aurora-theme/src/common/series/funnel.ts b/packages/vchart-aurora-theme/src/common/series/funnel.ts new file mode 100644 index 0000000..a35ce0f --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/funnel.ts @@ -0,0 +1,30 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const funnel: ISeriesTheme['funnel'] = { + funnel: { + state: { + selected: { + fill: '#1966FF', + stroke: '#3958E0', + strokeOpacity: 0.2, + lineWidth: 4 + } + } + }, + outerLabel: { + style: { + fontSize: 12 + }, + line: { + style: { + lineWidth: 2 + } + } + }, + label: { + style: { + fill: { type: 'palette', key: 'whiteColors100' }, + fontSize: 12 + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/gauge.ts b/packages/vchart-aurora-theme/src/common/series/gauge.ts new file mode 100644 index 0000000..4455cec --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/gauge.ts @@ -0,0 +1,27 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const gauge: ISeriesTheme = { + circularProgress: { + // FIXME: not work + // radius: 1, + // innerRadius: 0.1, + progress: { + style: { + cornerRadius: 100 + } + }, + track: { + interactive: false, + style: { + cornerRadius: 100, + fill: '#DCDEE1', + fillOpacity: 1 + } + } + }, + gaugePointer: { + pin: { visible: false }, + pinBackground: { visible: false }, + pointer: { visible: false } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/heatmap.ts b/packages/vchart-aurora-theme/src/common/series/heatmap.ts new file mode 100644 index 0000000..01aeb66 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/heatmap.ts @@ -0,0 +1,23 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const heatmap: ISeriesTheme['heatmap'] = { + cell: { + style: { + stroke: { type: 'palette', key: 'whiteColors100' }, + lineWidth: 1 + }, + state: { + hover: { + zIndex: 100, + stroke: '#000' + } + } + }, + label: { + position: 'inside', + style: { + fill: { type: 'palette', key: 'whiteColors100' }, + fontSize: 12 + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/line.ts b/packages/vchart-aurora-theme/src/common/series/line.ts new file mode 100644 index 0000000..29e11ec --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/line.ts @@ -0,0 +1,24 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const line: ISeriesTheme['line'] = { + line: { + style: { + lineWidth: 2, + curveType: 'monotone' + } + }, + point: { + style: { + visible: false, + size: 12, + lineWidth: 2, + shadowColor: 'rgba(0, 0, 0, 0.1)', + shadowBlur: 3, + stroke: { type: 'palette', key: 'whiteColors100' } + } + }, + label: { + position: 'top', + offset: 4 + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/pie.ts b/packages/vchart-aurora-theme/src/common/series/pie.ts new file mode 100644 index 0000000..70e0c87 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/pie.ts @@ -0,0 +1,28 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const pie: ISeriesTheme['pie'] = { + outerRadius: 0.8, + innerRadius: 0.54, + pie: { + style: { + padAngle: 0, + stroke: '#fff', + lineWidth: 2 + }, + state: { + hover: { + lineWidth: 0 + }, + selected: { + lineWidth: 0 + } + } + }, + label: { + visible: true, + position: 'outside', + style: { + fill: null + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/radar.ts b/packages/vchart-aurora-theme/src/common/series/radar.ts new file mode 100644 index 0000000..59be477 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/radar.ts @@ -0,0 +1,26 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const radar: ISeriesTheme['radar'] = { + line: { + style: { + lineWidth: 1 + } + }, + point: { + style: { + visible: false, + size: 12, + lineWidth: 2, + shadowColor: 'rgba(0, 0, 0, 0.1)', + shadowBlur: 3, + stroke: { type: 'palette', key: 'whiteColors100' } + } + }, + area: { + visible: true + }, + label: { + position: 'top', + offset: 4 + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/scatter.ts b/packages/vchart-aurora-theme/src/common/series/scatter.ts new file mode 100644 index 0000000..c509aa8 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/scatter.ts @@ -0,0 +1,16 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const scatter: ISeriesTheme['scatter'] = { + point: { + style: { + symbolType: 'circle', + fillOpacity: 0.35, + lineWidth: 1, + size: 8, + stroke: null + } + }, + label: { + position: 'top' + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/treemap.ts b/packages/vchart-aurora-theme/src/common/series/treemap.ts new file mode 100644 index 0000000..b423600 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/treemap.ts @@ -0,0 +1,22 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const treemap: ISeriesTheme['treemap'] = { + gapWidth: 0, + leaf: { + style: { + lineWidth: 2, + stroke: { type: 'palette', key: 'whiteColors100' } + }, + state: { + hover: { + fillOpacity: 0.8, + lineWidth: 0 + } + } + }, + label: { + style: { + fill: { type: 'palette', key: 'whiteColors100' } + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/token.ts b/packages/vchart-aurora-theme/src/common/token.ts new file mode 100644 index 0000000..18fbd70 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/token.ts @@ -0,0 +1,9 @@ +import type { BuiltinTokenMap } from '@visactor/vchart'; + +export const token: Partial = { + fontFamily: + // eslint-disable-next-line max-len + `"PingFang SC", "-apple-system", "Segoe UI", "Helvetica Neue", Arial, + Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`, + fontSize: 12 +}; diff --git a/packages/vchart-aurora-theme/src/index.ts b/packages/vchart-aurora-theme/src/index.ts new file mode 100644 index 0000000..4a79093 --- /dev/null +++ b/packages/vchart-aurora-theme/src/index.ts @@ -0,0 +1,60 @@ +import type { ITheme } from '@visactor/vchart'; +import { colorScheme } from './common/color-scheme'; +import { axis } from './common/component/axis'; +import { axisPolar } from './common/component/polar-axis'; + +import { legend } from './common/component/legend'; +import { token } from './common/token'; +import { tooltip } from './common/component/tooltip'; +import { crosshair } from './common/component/crosshair'; +import { area } from './common/series/area'; +import { barTheme as bar } from './common/series/bar'; +import { line } from './common/series/line'; +import { markByName } from './common/mark'; +import { scatter } from './common/series/scatter'; +import { pie } from './common/series/pie'; +import { indicator } from './common/component/indicator'; +import { funnel } from './common/series/funnel'; +import { treemap } from './common/series/treemap'; +import { gauge } from './common/series/gauge'; +import { heatmap } from './common/series/heatmap'; +import { markLine } from './common/component/mark-line'; +import { markArea } from './common/component/mark-area'; +import { markPoint } from './common/component/mark-point'; +import { dataZoom } from './common/component/data-zoom'; +import { scrollBar } from './common/component/scroll-bar'; +import { radar } from './common/series/radar'; + +export const chartAuroraTheme: ITheme = { + name: 'aurora', + type: 'light', + description: 'light theme for ChartHub.', + colorScheme, + token, + component: { + ...axis, + ...legend, + ...axisPolar, + tooltip, + crosshair, + indicator, + markLine, + markArea, + markPoint, + dataZoom, + scrollBar + }, + series: { + ...area, + ...bar, + ...gauge, + line, + scatter, + pie, + funnel, + treemap, + heatmap, + radar + }, + markByName +}; diff --git a/packages/vchart-aurora-theme/tsconfig.eslint.json b/packages/vchart-aurora-theme/tsconfig.eslint.json new file mode 100644 index 0000000..f676daf --- /dev/null +++ b/packages/vchart-aurora-theme/tsconfig.eslint.json @@ -0,0 +1,10 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "types": ["jest", "offscreencanvas", "node"], + "lib": ["DOM", "ESNext"], + "baseUrl": "./", + "rootDir": "./" + }, + "include": ["src", "__tests__", "demo"] +} diff --git a/packages/vchart-aurora-theme/tsconfig.json b/packages/vchart-aurora-theme/tsconfig.json new file mode 100644 index 0000000..9288787 --- /dev/null +++ b/packages/vchart-aurora-theme/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "types": ["jest", "offscreencanvas", "node"], + "lib": ["DOM", "ESNext"], + "baseUrl": "./", + "rootDir": "./src", + "outDir": "./es", + "composite": true + }, + "ts-node": { + "transpileOnly": true, + "compilerOptions": { + "module": "commonjs" + } + }, + "include": ["src"] +} diff --git a/packages/vchart-aurora-theme/tsconfig.test.json b/packages/vchart-aurora-theme/tsconfig.test.json new file mode 100644 index 0000000..89f837a --- /dev/null +++ b/packages/vchart-aurora-theme/tsconfig.test.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "paths": { + "@visactor/vchart-theme-utils": ["../vchart-theme-utils/src"] + } + }, + "references": [] +} diff --git a/rush.json b/rush.json index 42fc846..0d0462c 100644 --- a/rush.json +++ b/rush.json @@ -54,6 +54,13 @@ "shouldPublish": true, "versionPolicyName": "vchartThemeMain" }, + { + "packageName": "@visactor/vchart-aurora-theme", + "projectFolder": "packages/vchart-aurora-theme", + "tags": ["package"], + "shouldPublish": true, + "versionPolicyName": "vchartThemeMain" + }, { "packageName": "@visactor/vchart-arco-theme", "projectFolder": "packages/vchart-arco-theme", From 1acfa20d3b3526d5233df91a8d6fa08ce08f9a2e Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Mon, 26 Jan 2026 18:02:23 +0800 Subject: [PATCH 02/14] docs: update changlog of rush --- .../feat-aurora-theme_2026-01-26-10-02.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vchart-aurora-theme/feat-aurora-theme_2026-01-26-10-02.json diff --git a/common/changes/@visactor/vchart-aurora-theme/feat-aurora-theme_2026-01-26-10-02.json b/common/changes/@visactor/vchart-aurora-theme/feat-aurora-theme_2026-01-26-10-02.json new file mode 100644 index 0000000..169c01c --- /dev/null +++ b/common/changes/@visactor/vchart-aurora-theme/feat-aurora-theme_2026-01-26-10-02.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "feat: 新增vchart-aurora-theme主题包\n\n新增aurora主题包，包含完整的主题配置和示例代码\n\n", + "type": "none", + "packageName": "@visactor/vchart-aurora-theme" + } + ], + "packageName": "@visactor/vchart-aurora-theme", + "email": "yangxian.x@bytedance.com" +} \ No newline at end of file From 1631dfdab428452b3a5272f3670e876b97ebdd79 Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Mon, 26 Jan 2026 19:24:55 +0800 Subject: [PATCH 03/14] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=20vchart-auro?= =?UTF-8?q?ra-theme=20=E7=89=88=E6=9C=AC=E5=8F=B7=E8=87=B3=201.12.2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/vchart-aurora-theme/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vchart-aurora-theme/package.json b/packages/vchart-aurora-theme/package.json index 5a0dd8b..3c50eea 100644 --- a/packages/vchart-aurora-theme/package.json +++ b/packages/vchart-aurora-theme/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vchart-aurora-theme", - "version": "1.0.0", + "version": "1.12.2", "description": "Extended themes for VChart", "sideEffects": false, "main": "cjs/index.js", From 90d36d4302d3207d6ec80033d0060d54755a9627 Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Mon, 26 Jan 2026 20:10:33 +0800 Subject: [PATCH 04/14] =?UTF-8?q?feat(theme):=20=E6=B7=BB=E5=8A=A0aurora?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=85=8D=E7=BD=AE=E5=92=8C=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/vchart-aurora-theme/README.md | 5 +++++ packages/vchart-aurora-theme/public/aurora.json | 1 + packages/vchart-aurora-theme/src/index.ts | 2 ++ 3 files changed, 8 insertions(+) create mode 100644 packages/vchart-aurora-theme/public/aurora.json diff --git a/packages/vchart-aurora-theme/README.md b/packages/vchart-aurora-theme/README.md index a802ca2..1c7478e 100644 --- a/packages/vchart-aurora-theme/README.md +++ b/packages/vchart-aurora-theme/README.md @@ -1 +1,6 @@ # @visactor/vchart-aurora-theme + + + +- [aurora](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-semi-theme/public/aurora.json) light theme for ChartHub. + diff --git a/packages/vchart-aurora-theme/public/aurora.json b/packages/vchart-aurora-theme/public/aurora.json new file mode 100644 index 0000000..9afb2e9 --- /dev/null +++ b/packages/vchart-aurora-theme/public/aurora.json @@ -0,0 +1 @@ +{"colorScheme":{"default":{"dataScheme":["#1443FF","#33CCB2","#FFD500","#FFAA33","#FF7733","#F65656","#E93DBD","#9933FF","#5533FF","#A3ABC2"],"palette":{"backgroundColor":"transparent","borderColor":"#e3e5e8","shadowColor":"rgba(33,37,44,0.1)","hoverBackgroundColor":"#f1f2f5","sliderRailColor":"#f1f3f4","sliderHandleColor":"#ffffff","sliderTrackColor":"#0040ff","popupBackgroundColor":"#ffffff","primaryFontColor":"#21252c","secondaryFontColor":"#606773","tertiaryFontColor":"#89909d","axisLabelFontColor":"#909199","disableFontColor":"#bcc1cb","axisMarkerFontColor":"#ffffff","axisGridColor":"#E1E2E5","axisDomainColor":"#DCDEE1","dataZoomHandleStrokeColor":"#aeb5be","dataZoomChartColor":"#c9ced8","playerControllerColor":"#0040ff","scrollBarSliderColor":"rgba(0,0,0,0.3)","axisMarkerBackgroundColor":"#21252c","markLabelBackgroundColor":"#f1f2f5","markLineStrokeColor":"#606773","dangerColor":"#e33232","warningColor":"#ffc528","successColor":"#07a35a","infoColor":"#3073f2","discreteLegendPagerTextColor":"rgb(51, 51, 51)","discreteLegendPagerHandlerColor":"rgb(47, 69, 84)","discreteLegendPagerHandlerDisableColor":"rgb(170, 170, 170)","emptyCircleColor":"#e3e5e8","bandColor":"#1443FF","blackColors6":"#F0F0F0","blackColors15":"#D9D9D9","blackColors25":"#BFBFBF","blackColors45":"#8C8C8C","blackColors65":"#595959","blackColors85":"#262626","blackColors95":"#0D0D0D","blackColors100":"#000","whiteColors6":"#0F0F0F","whiteColors15":"#262626","whiteColors25":"#404040","whiteColors45":"#737373","whiteColors65":"#A6A6A6","whiteColors85":"#D9D9D9","whiteColors95":"#F2F2F2","whiteColors100":"#FFFFFF"}}},"token":{"fontFamily":"\"PingFang SC\", \"-apple-system\", \"Segoe UI\", \"Helvetica Neue\", Arial,\n Roboto, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","fontSize":12,"l1FontSize":32,"l1LineHeight":"150%","l2FontSize":20,"l2LineHeight":"140%","l3FontSize":16,"l3LineHeight":"150%","l4FontSize":14,"l4LineHeight":"150%","l5FontSize":12,"l5LineHeight":"130%","l6FontSize":10,"l6LineHeight":"120%"},"series":{"scatter":{"point":{"style":{"size":8,"symbolType":"circle","lineWidth":1,"fillOpacity":0.35,"stroke":null}},"label":{"visible":false,"offset":5,"position":"top","style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}}}},"line":{"label":{"visible":false,"position":"top","offset":4,"style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}}},"point":{"style":{"symbolType":"circle","visible":false,"size":12,"lineWidth":2,"shadowColor":"rgba(0, 0, 0, 0.1)","shadowBlur":3,"stroke":{"type":"palette","key":"whiteColors100"}}},"line":{"style":{"lineWidth":2,"curveType":"monotone"}}},"area":{"label":{"visible":false,"offset":5,"position":"top","style":{"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2}},"point":{"style":{"symbolType":"circle","visible":false,"size":12,"lineWidth":2,"shadowColor":"rgba(0, 0, 0, 0.1)","shadowBlur":3,"stroke":{"type":"palette","key":"whiteColors100"}}},"seriesMark":"area","line":{"style":{"curveType":"monotone","lineWidth":2}},"area":{"style":{"fillOpacity":0.25,"lineWidth":2},"state":{"selected":{"fillOpacity":0.5}}}},"bar":{"label":{"visible":false,"position":"outside","offset":5,"style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"},"fill":{"type":"palette","key":"secondaryFontColor"}}},"barMaxWidth":8,"barGapInGroup":4},"bar3d":{"bar3d":{"style":{"length":3}},"label":{"visible":false,"style":{"offset":12,"position":"outside"}}},"pie":{"outerRadius":0.8,"pie":{"style":{"fillOpacity":1,"padAngle":0,"stroke":"#fff","lineWidth":2},"state":{"hover":{"lineWidth":0},"selected":{"lineWidth":0}}},"label":{"visible":true,"interactive":true,"position":"outside","style":{"fontWeight":"normal","stroke":{"type":"palette","key":"backgroundColor"},"fillOpacity":1,"fill":null}},"innerLabel":{"style":{"lineWidth":2}},"emptyCircle":{"style":{"fill":{"type":"palette","key":"emptyCircleColor"},"fillOpacity":1}},"innerRadius":0.54},"pie3d":{"outerRadius":0.6,"pie3d":{"style":{"height":10,"fillOpacity":1}},"label":{"visible":false,"interactive":true,"position":"outside"}},"map":{"defaultFillColor":"#f3f3f3","area":{"style":{"lineWidth":0.5,"strokeOpacity":1,"stroke":"black","fillOpacity":1}},"label":{"interactive":false,"style":{"fontSize":{"type":"token","key":"l6FontSize"},"lineHeight":{"type":"token","key":"l6LineHeight"},"textBaseline":"middle","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"},"stroke":{"type":"palette","key":"backgroundColor"}}}},"radar":{"label":{"visible":false,"offset":4,"style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}},"position":"top"},"point":{"style":{"symbolType":"circle","visible":false,"size":12,"lineWidth":2,"shadowColor":"rgba(0, 0, 0, 0.1)","shadowBlur":3,"stroke":{"type":"palette","key":"whiteColors100"}}},"line":{"style":{"lineWidth":1}},"area":{"visible":true}},"dot":{"dot":{"style":{"size":10,"fillOpacity":1}},"symbol":{"style":{"size":10}},"title":{"style":{"textAlign":"left","textBaseline":"middle","fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}},"subTitle":{"style":{"textAlign":"left","textBaseline":"top","fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}}},"link":{"arrow":{"style":{"size":10}}},"wordCloud":{"word":{"padding":1,"style":{"textAlign":"center","textBaseline":"alphabetic"}}},"wordCloud3d":{"word":{"padding":1,"style":{"textAlign":"center","textBaseline":"alphabetic"}}},"funnel":{"label":{"style":{"fill":{"type":"palette","key":"whiteColors100"},"textBaseline":"middle","lineWidth":2,"fontSize":12}},"outerLabel":{"style":{"fontSize":12,"fill":{"type":"palette","key":"secondaryFontColor"}},"line":{"style":{"stroke":{"type":"palette","key":"axisDomainColor"},"lineWidth":2}}},"transformLabel":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fill":{"type":"palette","key":"secondaryFontColor"},"textBaseline":"middle"}},"transform":{"style":{"fill":{"type":"palette","key":"axisGridColor"}}},"funnel":{"state":{"selected":{"fill":"#1966FF","stroke":"#3958E0","strokeOpacity":0.2,"lineWidth":4}}}},"funnel3d":{"label":{"style":{"fill":"white","textBaseline":"middle","lineWidth":2}},"outerLabel":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fill":{"type":"palette","key":"secondaryFontColor"}},"line":{"style":{"stroke":{"type":"palette","key":"axisDomainColor"}}}},"transformLabel":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fill":{"type":"palette","key":"secondaryFontColor"},"textBaseline":"middle"}},"transform3d":{"style":{"fill":{"type":"palette","key":"axisGridColor"}}}},"linearProgress":{"bandWidth":30,"progress":{"style":{"fillOpacity":1}},"track":{"style":{"fill":"#E7EBED","fillOpacity":1}}},"circularProgress":{"outerRadius":0.8,"innerRadius":0.6,"progress":{"style":{"fillOpacity":1,"cornerRadius":100}},"track":{"style":{"fillOpacity":1,"cornerRadius":100,"fill":"#DCDEE1"},"interactive":false},"tickMask":{"visible":false,"angle":3,"offsetAngle":0,"forceAlign":true}},"waterfall":{"seriesFieldName":{"total":"total","increase":"increase","decrease":"decrease"},"leaderLine":{"style":{"stroke":"black","lineWidth":1,"lineDash":[4,4]}},"stackLabel":{"visible":true,"offset":12,"position":"withChange","style":{"fill":"black","fontSize":{"type":"token","key":"l4FontSize"}}},"label":{"visible":false,"offset":12,"position":"inside","style":{"lineWidth":2}}},"gauge":{"outerRadius":0.8,"innerRadius":0.6,"padAngle":1.146,"segment":{"style":{"fillOpacity":1}},"tickMask":{"visible":false,"angle":3,"offsetAngle":0,"forceAlign":true}},"gaugePointer":{"pointer":{"type":"path","width":0.4,"height":0.4,"style":{"path":"M-0.020059 -0.978425 C-0.018029 -0.9888053 -0.013378 -1 0 -1 C0.01342 -1 0.01812 -0.989146 0.0201 -0.978425 C0.02161 -0.9702819 0.0692 -0.459505 0.09486 -0.184807 C0.10298 -0.097849 0.1089 -0.034548 0.11047 -0.018339 C0.11698 0.04908 0.07373 0.11111 0.00002 0.11111 C-0.07369 0.11111 -0.117184 0.04991 -0.110423 -0.018339 C-0.103662 -0.086591 -0.022089 -0.9680447 -0.020059 -0.978425Z"},"visible":false},"pin":{"width":0.025,"height":0.025,"style":{"path":"M1 0 C1 0.55228 0.55228 1 0 1 C-0.552285 1 -1 0.55228 -1 0 C-1 -0.552285 -0.552285 -1 0 -1 C0.55228 -1 1 -0.552285 1 0Z","fill":"#888"},"visible":false},"pinBackground":{"width":0.06,"height":0.06,"style":{"path":"M1 0 C1 0.55228 0.55228 1 0 1 C-0.552285 1 -1 0.55228 -1 0 C-1 -0.552285 -0.552285 -1 0 -1 C0.55228 -1 1 -0.552285 1 0Z","fill":"#ddd"},"visible":false}},"treemap":{"gapWidth":0,"nodePadding":[5],"nonLeaf":{"visible":false,"style":{"fillOpacity":0.5}},"label":{"style":{"fill":{"type":"palette","key":"whiteColors100"},"textBaseline":"middle","textAlign":"center","fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}},"nonLeafLabel":{"padding":24,"style":{"fill":"black","stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2,"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"textBaseline":"middle","textAlign":"center"}},"leaf":{"style":{"lineWidth":2,"stroke":{"type":"palette","key":"whiteColors100"}},"state":{"hover":{"fillOpacity":0.8,"lineWidth":0}}}},"sunburst":{"innerRadius":0,"outerRadius":1,"startAngle":-90,"endAngle":270,"gap":0,"labelLayout":{"align":"center","offset":0,"rotate":"radial"},"sunburst":{"style":{"stroke":{"type":"palette","key":"backgroundColor"},"fillOpacity":1,"cursor":"pointer"}},"label":{"visible":true,"style":{"cursor":"pointer","fill":{"type":"palette","key":"primaryFontColor"},"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}}},"rangeColumn":{"label":{"visible":false,"offset":5,"position":"inside","style":{"lineWidth":2,"fill":{"type":"palette","key":"axisMarkerFontColor"}},"minLabel":{"position":"end"},"maxLabel":{"position":"start"}}},"circlePacking":{"layoutPadding":5,"circlePacking":{"visible":true,"style":{"cursor":"pointer","stroke":{"type":"palette","key":"backgroundColor"}}},"label":{"visible":true,"style":{"cursor":"pointer","fill":"black","stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2,"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}}},"heatmap":{"cell":{"style":{"shape":"square","fillOpacity":1,"stroke":{"type":"palette","key":"whiteColors100"},"lineWidth":1},"state":{"hover":{"zIndex":100,"stroke":"#000"}}},"cellBackground":{"visible":false},"label":{"position":"inside","style":{"fill":{"type":"palette","key":"whiteColors100"},"fontSize":12}}},"sankey":{"link":{"style":{"fillOpacity":0.15,"round":true}}},"rose":{"rose":{"style":{"fillOpacity":1}},"label":{"style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"},"textAlign":"center","textBaseline":"middle"}}},"boxPlot":{"boxPlot":{"style":{"lineWidth":1}},"label":{"style":{"lineWidth":2}}},"correlation":{"centerLabel":{"visible":true,"position":"center","style":{"fill":"#fff","text":""}},"label":{"visible":true,"position":"bottom","style":{"fill":"#000"}}},"liquid":{"outlinePadding":10,"liquidBackground":{"style":{"lineWidth":0,"fillOpacity":0.2}},"liquidOutline":{"style":{"lineWidth":2}}},"venn":{"circle":{"style":{"opacity":0.8},"state":{"hover":{"opacity":1}}},"overlap":{"style":{"opacity":0.8},"state":{"hover":{"opacity":1,"stroke":"white","lineWidth":2}}},"label":{"visible":true,"style":{"fill":"white","textBaseline":"middle","textAlign":"center","fontSize":{"type":"token","key":"l4FontSize"},"lineHeight":{"type":"token","key":"l4LineHeight"}}},"overlapLabel":{"visible":true,"style":{"textBaseline":"middle","textAlign":"center","fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}}},"mosaic":{"label":{"visible":false,"position":"center","style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}}},"bar":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"}}}},"bar_horizontal":{"stackCornerRadius":[0,1,1,0],"label":{"position":"right","offset":4}},"bar_vertical":{"stackCornerRadius":[1,1,0,0],"label":{"position":"top","offset":4}}},"name":"aurora","background":{"type":"palette","key":"backgroundColor"},"padding":20,"fontFamily":{"type":"token","key":"fontFamily"},"mark":{"text":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1}}},"markByName":{"label":{"style":{"fontSize":12,"fontWeight":"normal","fillOpacity":1,"lineJoin":"bevel","fill":{"type":"palette","key":"blackColors65"},"lineWidth":0}},"area":{"style":{"fillOpacity":0.2}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"word":{"style":{"fontSize":null}},"fillingWord":{"style":{"fontSize":null}},"sunburst":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"}}},"circlePacking":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"}}},"funnel3d":{"style":{"stroke":false}},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06},"stroke":"transparent"}}},"component":{"discreteLegend":{"orient":"top","position":"middle","padding":[8,8,8,8],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":21,"fill":{"type":"palette","key":"blackColors45"},"fontWeight":"normal"},"space":12},"pager":{"textStyle":{"fill":{"type":"palette","key":"blackColors45"},"fontSize":10},"handler":{"style":{"fill":{"type":"palette","key":"blackColors100"},"size":10},"state":{"disable":{"fill":{"type":"palette","key":"discreteLegendPagerHandlerDisableColor"}}},"space":8}},"item":{"visible":true,"spaceCol":24,"spaceRow":12,"padding":0,"background":{"state":{"selectedHover":{"fill":{"type":"palette","key":"hoverBackgroundColor"}},"unSelectedHover":{"fill":{"type":"palette","key":"hoverBackgroundColor"}}},"visible":false},"shape":{"space":4,"style":{"lineWidth":0,"fillOpacity":1,"opacity":1,"size":8,"symbolType":"circle"},"state":{"unSelected":{"fillOpacity":0.2,"opacity":1,"fill":"#D8D8D8"}}},"label":{"space":100,"style":{"fill":"#85878A","fontSize":12,"lineHeight":12,"opacity":1,"fontWeight":400},"state":{"unSelected":{"fill":"#D8D8D8","opacity":1}}}},"allowAllCanceled":false,"visible":true,"maxRow":1},"colorLegend":{"horizontal":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":5,"style":{"fontSize":12,"fill":"#2C3542"}},"handler":{"style":{"symbolType":"rectRound","lineWidth":1,"outerBorder":null,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":16,"scaleX":0.5,"fill":"#fff","stroke":"#99B0F3","radius":2}},"startText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":"#2C3542"},"space":10},"rail":{"width":100,"height":4,"style":{"fill":"#DCDEE2"}}},"vertical":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":5,"style":{"fontSize":12,"fill":"#2C3542"}},"handler":{"style":{"symbolType":"rectRound","lineWidth":1,"outerBorder":null,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":16,"scaleY":0.5,"fill":"#fff","stroke":"#99B0F3","radius":2}},"startText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":"#2C3542"},"space":10},"rail":{"width":4,"height":100,"style":{"fill":"#DCDEE2"}}}},"sizeLegend":{"horizontal":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":{"type":"palette","key":"sliderTrackColor"}},"fill":{"type":"palette","key":"sliderHandleColor"}}},"startText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"sizeBackground":{"fill":{"type":"palette","key":"dataZoomChartColor"}},"track":{"style":{"fill":{"type":"palette","key":"sliderTrackColor","a":0.8}}},"rail":{"style":{"fill":{"type":"palette","key":"sliderRailColor"}},"width":200,"height":4}},"vertical":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":{"type":"palette","key":"sliderTrackColor"}},"fill":{"type":"palette","key":"sliderHandleColor"}}},"startText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"sizeBackground":{"fill":{"type":"palette","key":"dataZoomChartColor"}},"track":{"style":{"fill":{"type":"palette","key":"sliderTrackColor","a":0.8}}},"rail":{"style":{"fill":{"type":"palette","key":"sliderRailColor"}},"height":200,"width":4}}},"axis":{"domainLine":{"visible":true,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisDomainColor"},"strokeOpacity":1}},"grid":{"visible":true,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisGridColor"},"strokeOpacity":1,"lineDash":[4,4]}},"subGrid":{"visible":false,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisGridColor"},"strokeOpacity":1,"lineDash":[4,4]}},"tick":{"visible":true,"inside":false,"tickSize":4,"alignWithLabel":true,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"blackColors25"},"strokeOpacity":1}},"subTick":{"visible":false,"tickSize":2,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"blackColors15"},"strokeOpacity":1}},"label":{"visible":true,"inside":false,"space":8,"style":{"fontSize":12,"fill":{"type":"palette","key":"blackColors45"},"fontWeight":400,"fillOpacity":1}},"title":{"space":10,"padding":0,"style":{"fontSize":12,"lineHeight":12,"fill":{"type":"palette","key":"blackColors65"},"fontWeight":"normal","fillOpacity":1},"visible":false}},"axisBand":{"domainLine":{"visible":true},"grid":{"visible":false},"subGrid":{"visible":false},"tick":{"visible":true},"subTick":{"visible":false}},"axisLinear":{"domainLine":{"visible":false},"grid":{"visible":true},"subGrid":{"visible":false},"tick":{"visible":false},"subTick":{"visible":false}},"axisX":{"label":{"space":8},"title":{"space":8},"maxHeight":"30%","unit":{"visible":false,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisY":{"label":{"space":12,"autoLimit":true},"title":{"space":12,"autoRotate":true},"maxWidth":"30%","unit":{"visible":false,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisZ":{"label":{"space":0},"title":{"space":8},"maxHeight":"30%","unit":{"visible":false,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisAngle":{"grid":{"visible":true,"style":{"lineDash":[6,6]},"smooth":false},"label":{"space":4}},"axisRadius":{"grid":{"smooth":false,"visible":true},"subGrid":{"smooth":false,"visible":false},"domainLine":{}},"markLine":{"line":{"style":{"lineDash":[],"stroke":{"type":"palette","key":"blackColors25"},"lineWidth":1}},"startSymbol":{"visible":false,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"visible":false,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"label":{"refY":0,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"blackColors65"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}},"visible":false},"position":"insideStartTop","autoRotate":true}},"markArea":{"area":{"style":{"fill":{"type":"palette","key":"blackColors100","a":0.06}}},"label":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"blackColors65"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}},"visible":false}}},"markPoint":{"itemLine":{"decorativeLine":{"visible":false},"startSymbol":{"size":6,"visible":true,"style":{"fill":"#fff","stroke":{"type":"palette","key":"bandColor"},"lineWidth":2}},"endSymbol":{"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0},"visible":false},"line":{"style":{"stroke":{"type":"palette","key":"blackColors25"},"lineWidth":1}}},"itemContent":{"offsetY":-16,"autoRotate":false,"text":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"blackColors65"}}}}},"polarMarkLine":{"line":{"style":{"lineDash":[3,3],"stroke":{"type":"palette","key":"markLineStrokeColor"}}},"startSymbol":{"visible":false,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"visible":true,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"label":{"refY":5,"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}}}}},"polarMarkArea":{"area":{"style":{"fill":{"type":"palette","key":"axisDomainColor","a":0.25}}},"label":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}}}}},"polarMarkPoint":{"itemLine":{"decorativeLine":{"visible":false},"startSymbol":{"size":5,"visible":true,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"line":{"style":{"stroke":{"type":"palette","key":"markLineStrokeColor"}}}},"itemContent":{"offsetY":-50}},"geoMarkPoint":{"itemLine":{"decorativeLine":{"visible":false},"startSymbol":{"size":5,"visible":true,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"line":{"style":{"stroke":{"type":"palette","key":"markLineStrokeColor"}}}},"itemContent":{"offsetY":-50}},"tooltip":{"offset":{"x":16,"y":16},"panel":{"padding":{"top":12,"left":12,"right":12,"bottom":12},"backgroundColor":{"type":"palette","key":"popupBackgroundColor"},"border":{"color":{"type":"palette","key":"popupBackgroundColor"},"width":0,"radius":3},"shadow":{"x":0,"y":0,"blur":10,"spread":0,"color":"#aeaeae"}},"spaceRow":12,"titleLabel":{"fontSize":12,"lineHeight":12,"fontColor":"#1D1D2E","fontWeight":"500","textBaseline":"middle","spacing":0,"textAlign":"left"},"shape":{"size":8,"spacing":8},"keyLabel":{"fontSize":12,"lineHeight":12,"fontColor":{"type":"palette","key":"blackColors65"},"textBaseline":"middle","spacing":12,"textAlign":"left"},"valueLabel":{"fontSize":12,"lineHeight":12,"fontColor":{"type":"palette","key":"blackColors65"},"fontWeight":"normal","textBaseline":"middle","spacing":0}},"dataZoom":{"padding":[12,0],"showDetail":"auto","brushSelect":false,"middleHandler":{"visible":false,"background":{"size":6,"style":{"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"cornerRadius":2}},"icon":{"style":{"size":4,"fill":{"type":"palette","key":"sliderHandleColor"},"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"symbolType":"M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z","lineWidth":0.5}}},"background":{"size":20,"style":{"fill":{"type":"palette","key":"sliderRailColor"},"lineWidth":0}},"selectedBackground":{"style":{"fill":{"type":"palette","key":"sliderTrackColor"},"fillOpacity":0.1,"outerBorder":{"stroke":{"type":"palette","key":"sliderTrackColor"},"strokeOpacity":0.2,"distance":-0.5,"lineWidth":1}}},"selectedBackgroundChart":{"area":{"style":{"visible":false,"stroke":false,"fill":{"type":"palette","key":"dataZoomChartColor"}}},"line":{"style":{"visible":false,"stroke":{"type":"palette","key":"dataZoomChartColor"},"lineWidth":1}}},"startHandler":{"style":{"symbolType":"M-0.5-2.4h0.9c0.4,0,0.7,0.3,0.7,0.7v3.3c0,0.4-0.3,0.7-0.7,0.7h-0.9c-0.4,0-0.7-0.3-0.7-0.7v-3.3\nC-1.2-2-0.9-2.4-0.5-2.4z M-0.4-1.4L-0.4-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC-0.4-1.4-0.4-1.4-0.4-1.4z M0.3-1.4L0.3-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC0.3-1.4,0.3-1.4,0.3-1.4z;","fill":{"type":"palette","key":"sliderHandleColor"},"scaleX":1.2,"scaleY":1.2,"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"lineWidth":1}},"endHandler":{"style":{"symbolType":"M-0.5-2.4h0.9c0.4,0,0.7,0.3,0.7,0.7v3.3c0,0.4-0.3,0.7-0.7,0.7h-0.9c-0.4,0-0.7-0.3-0.7-0.7v-3.3\nC-1.2-2-0.9-2.4-0.5-2.4z M-0.4-1.4L-0.4-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC-0.4-1.4-0.4-1.4-0.4-1.4z M0.3-1.4L0.3-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC0.3-1.4,0.3-1.4,0.3-1.4z;","fill":{"type":"palette","key":"sliderHandleColor"},"scaleX":1.2,"scaleY":1.2,"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"lineWidth":1}},"startText":{"padding":8,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}}},"endText":{"padding":8,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}}},"backgroundChart":{"area":{"style":{"visible":true,"stroke":false,"fill":{"type":"palette","key":"dataZoomChartColor"}}},"line":{"style":{"visible":true,"stroke":{"type":"palette","key":"dataZoomChartColor"},"lineWidth":1}}},"horizontal":{"middleHandler":{"visible":false},"startHandler":{"style":{"size":22}},"selectedBackground":{"style":{"fill":"#6699FF","fillOpacity":0.2,"opacity":1,"stroke":"#6699FF","lineWidth":2,"cornerRadius":4}},"background":{"style":{"fill":"#F3F4F6","fillOpacity":0.2,"cornerRadius":4,"stroke":"#EDEEF0","opacity":1,"lineWidth":2}},"endHandler":{"style":{"size":22}},"backgroundChart":{"area":{"style":{"fill":false,"stroke":"#6699FF"}},"line":{"style":{"fill":false,"stroke":"#6699FF"}}},"startText":{"visible":false},"endText":{"visible":false},"height":44},"vertical":{"middleHandler":{"visible":false},"startHandler":{"style":{"size":22}},"selectedBackground":{"style":{"fill":"#6699FF","fillOpacity":0.2,"opacity":1,"stroke":"#6699FF","lineWidth":2,"cornerRadius":4}},"background":{"style":{"fill":"#F3F4F6","fillOpacity":0.2,"cornerRadius":4,"stroke":"#EDEEF0","opacity":1,"lineWidth":2}},"endHandler":{"style":{"size":22}},"backgroundChart":{"area":{"style":{"fill":false,"stroke":"#6699FF"}},"line":{"style":{"fill":false,"stroke":"#6699FF"}}},"startText":{"visible":false},"endText":{"visible":false},"width":44}},"crosshair":{"trigger":"hover","bandField":{"visible":false,"line":{"type":"rect","visible":true,"style":{"fill":"#CCD7EB","opacity":0.7,"lineWidth":0,"stroke":{"type":"palette","key":"markLineStrokeColor"},"lineDash":[],"fillOpacity":0.4}},"label":{"visible":false,"style":{"fontWeight":"normal","fill":{"type":"palette","key":"axisMarkerFontColor"},"fontSize":{"type":"token","key":"l5FontSize"}},"labelBackground":{"padding":{"bottom":0,"top":0,"left":2,"right":2},"style":{"fill":{"type":"palette","key":"axisMarkerBackgroundColor"},"cornerRadius":1}}}},"linearField":{"visible":false,"line":{"type":"line","visible":true,"style":{"stroke":"#CCD7EB","fill":"transparent","opacity":0.7,"lineDash":[],"lineWidth":0.4}},"label":{"visible":false,"style":{"fontWeight":"normal","fill":{"type":"palette","key":"axisMarkerFontColor"},"fontSize":{"type":"token","key":"l5FontSize"}},"labelBackground":{"padding":{"bottom":0,"top":0,"left":2,"right":2},"style":{"fill":{"type":"palette","key":"axisMarkerBackgroundColor"},"cornerRadius":1}}}}},"player":{"visible":true,"position":"start","padding":{"top":20,"bottom":20},"slider":{"space":10,"trackStyle":{"fill":{"type":"palette","key":"sliderTrackColor"},"fillOpacity":0.8},"railStyle":{"fill":{"type":"palette","key":"sliderRailColor"}},"handlerStyle":{"size":15,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2,"fill":{"type":"palette","key":"playerControllerColor"}}},"controller":{"start":{"order":0,"space":10,"position":"start","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"pause":{"order":0,"space":10,"position":"start","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"backward":{"order":0,"space":10,"position":"start","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"forward":{"order":0,"space":10,"position":"start","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}}}},"brush":{"style":{"fill":"#B0C8F9","fillOpacity":0.2,"stroke":"#B0C8F9","lineWidth":2},"brushMode":"single","brushType":"rect","brushMoved":true,"removeOnClick":true,"delayType":"throttle","delayTime":0},"indicator":{"title":{"visible":true,"autoLimit":false,"autoFit":false,"style":{"fontSize":16,"fill":"#12141A","fontWeight":500,"fillOpacity":1,"textBaseline":"top","textAlign":"center"}},"content":{"visible":true,"style":{"fontSize":12,"fill":"#85878A","fontWeight":400,"fillOpacity":1,"textBaseline":"top","textAlign":"center"}}},"title":{"padding":{"top":4,"bottom":20},"textStyle":{"fontSize":{"type":"token","key":"l3FontSize"},"lineHeight":{"type":"token","key":"l3LineHeight"},"fill":{"type":"palette","key":"primaryFontColor"}},"subtextStyle":{"fontSize":{"type":"token","key":"l4FontSize"},"lineHeight":{"type":"token","key":"l4LineHeight"},"fill":{"type":"palette","key":"tertiaryFontColor"}}},"mapLabel":{"visible":true,"offset":12,"position":"top","space":10,"nameLabel":{"visible":true,"style":{"textBaseline":"middle","textAlign":"left","fill":"black","fontSize":{"type":"token","key":"l6FontSize"}}},"valueLabel":{"visible":true,"style":{"textBaseline":"middle","textAlign":"left","fill":"black","fontSize":{"type":"token","key":"l6FontSize"}}},"background":{"visible":true,"padding":{"top":4,"bottom":4,"left":6,"right":6},"style":{"cornerRadius":2,"lineWidth":1,"fill":"white","stroke":"grey"}},"leader":{"visible":false,"style":{"lineWidth":1,"stroke":"red"}}},"poptip":{"visible":true,"position":"auto","padding":8,"titleStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"bold","fill":{"type":"palette","key":"primaryFontColor"}},"contentStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"primaryFontColor"}},"panel":{"visible":true,"fill":{"type":"palette","key":"popupBackgroundColor"},"cornerRadius":3,"lineWidth":0,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":0,"space":12}},"totalLabel":{"visible":false,"offset":5,"overlap":{"clampForce":true,"strategy":[]},"smartInvert":false,"animation":false,"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fill":{"type":"palette","key":"primaryFontColor"}}},"scrollBar":{"horizontal":{"height":12,"slider":{"style":{"fill":"rgba(0,0,0,0.15)"}}},"vertical":{"width":12,"slider":{"style":{"fill":"rgba(0,0,0,0.15)"}}}}},"animationThreshold":2000,"type":"light","description":"light theme for ChartHub."} \ No newline at end of file diff --git a/packages/vchart-aurora-theme/src/index.ts b/packages/vchart-aurora-theme/src/index.ts index 4a79093..e10bd6d 100644 --- a/packages/vchart-aurora-theme/src/index.ts +++ b/packages/vchart-aurora-theme/src/index.ts @@ -58,3 +58,5 @@ export const chartAuroraTheme: ITheme = { }, markByName }; + +export const allThemeMap = new Map([[chartAuroraTheme.name, chartAuroraTheme]]) as Map; From 0b04fdc2ed7719e07c294fba927a564157419a4a Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Mon, 26 Jan 2026 20:16:34 +0800 Subject: [PATCH 05/14] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=20vchart-auro?= =?UTF-8?q?ra-theme=20=E7=89=88=E6=9C=AC=E5=8F=B7=E8=87=B3=201.12.3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/vchart-aurora-theme/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vchart-aurora-theme/package.json b/packages/vchart-aurora-theme/package.json index 3c50eea..ddd6614 100644 --- a/packages/vchart-aurora-theme/package.json +++ b/packages/vchart-aurora-theme/package.json @@ -1,6 +1,6 @@ { "name": "@visactor/vchart-aurora-theme", - "version": "1.12.2", + "version": "1.12.3", "description": "Extended themes for VChart", "sideEffects": false, "main": "cjs/index.js", From 87a7d52e66eb060526270bea2df897bdf6838bb2 Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Tue, 27 Jan 2026 10:26:48 +0800 Subject: [PATCH 06/14] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=20vchart-them?= =?UTF-8?q?e-utils=20=E4=BE=9D=E8=B5=96=E7=89=88=E6=9C=AC=E8=87=B3=201.12.?= =?UTF-8?q?3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/vchart-aurora-theme/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vchart-aurora-theme/package.json b/packages/vchart-aurora-theme/package.json index ddd6614..ebf3794 100644 --- a/packages/vchart-aurora-theme/package.json +++ b/packages/vchart-aurora-theme/package.json @@ -28,7 +28,7 @@ "@visactor/vchart": ">=1.10.4" }, "dependencies": { - "@visactor/vchart-theme-utils": "workspace:1.12.2" + "@visactor/vchart-theme-utils": "workspace:1.12.3" }, "devDependencies": { "@esbuild-plugins/node-globals-polyfill": "0.1.1", From 32fd8f624200181883147a4ad5f283f04b5f4888 Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Thu, 29 Jan 2026 19:24:03 +0800 Subject: [PATCH 07/14] =?UTF-8?q?fix(vchart-aurora-theme):=20=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3=E4=B8=BB=E9=A2=98=E5=90=8D=E7=A7=B0=E5=BC=95=E7=94=A8?= =?UTF-8?q?=E5=92=8C=E9=A5=BC=E5=9B=BE=E6=A0=B7=E5=BC=8F=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将主题名称从vchart-semi-theme统一修正为vchart-aurora-theme 调整饼图内径为0，优化悬停和选中状态的外径和线宽配置 --- packages/vchart-aurora-theme/README.md | 2 +- packages/vchart-aurora-theme/bundler.config.js | 2 +- packages/vchart-aurora-theme/package.json | 2 +- .../vchart-aurora-theme/scripts/export-theme.ts | 2 +- .../vchart-aurora-theme/src/common/series/pie.ts | 16 ++++++++-------- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/vchart-aurora-theme/README.md b/packages/vchart-aurora-theme/README.md index 1c7478e..405894e 100644 --- a/packages/vchart-aurora-theme/README.md +++ b/packages/vchart-aurora-theme/README.md @@ -2,5 +2,5 @@ -- [aurora](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-semi-theme/public/aurora.json) light theme for ChartHub. +- [aurora](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-aurora-theme/public/aurora.json) light theme for ChartHub. diff --git a/packages/vchart-aurora-theme/bundler.config.js b/packages/vchart-aurora-theme/bundler.config.js index f3e3c17..015274e 100644 --- a/packages/vchart-aurora-theme/bundler.config.js +++ b/packages/vchart-aurora-theme/bundler.config.js @@ -8,6 +8,6 @@ module.exports = { cjs: 'cjs', umd: 'build' }, - name: 'vchart-semi-theme', + name: 'vchart-aurora-theme', umdOutputFilename: 'index' }; diff --git a/packages/vchart-aurora-theme/package.json b/packages/vchart-aurora-theme/package.json index ebf3794..dedfbf9 100644 --- a/packages/vchart-aurora-theme/package.json +++ b/packages/vchart-aurora-theme/package.json @@ -77,7 +77,7 @@ "repository": { "type": "git", "url": "https://github.com/VisActor/vchart-theme.git", - "directory": "packages/vchart-semi-theme" + "directory": "packages/vchart-aurora-theme" }, "author": { "name": "VisActor", diff --git a/packages/vchart-aurora-theme/scripts/export-theme.ts b/packages/vchart-aurora-theme/scripts/export-theme.ts index b6261f9..01ff43e 100644 --- a/packages/vchart-aurora-theme/scripts/export-theme.ts +++ b/packages/vchart-aurora-theme/scripts/export-theme.ts @@ -43,7 +43,7 @@ const readmeThemeListEnd = readme.indexOf(endTag); const newReadme = `${readme.slice(0, readmeThemeListStart)}\n\n${[...allThemeMap.keys()] .map( key => - `- [${key}](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-semi-theme/public/${key}.json) ${ + `- [${key}](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-aurora-theme/public/${key}.json) ${ allThemeMap.get(key)?.description ?? '' }` ) diff --git a/packages/vchart-aurora-theme/src/common/series/pie.ts b/packages/vchart-aurora-theme/src/common/series/pie.ts index 70e0c87..20f0259 100644 --- a/packages/vchart-aurora-theme/src/common/series/pie.ts +++ b/packages/vchart-aurora-theme/src/common/series/pie.ts @@ -2,27 +2,27 @@ import type { ISeriesTheme } from '@visactor/vchart'; export const pie: ISeriesTheme['pie'] = { outerRadius: 0.8, - innerRadius: 0.54, + innerRadius: 0, pie: { style: { padAngle: 0, stroke: '#fff', - lineWidth: 2 + lineWidth: 2, + lineJoin: 'round' }, state: { hover: { - lineWidth: 0 + outerRadius: 0.85, + lineWidth: 2 }, selected: { - lineWidth: 0 + outerRadius: 0.85, + lineWidth: 2 } } }, label: { visible: true, - position: 'outside', - style: { - fill: null - } + position: 'outside' } }; From 79924f69a933c1252e7ebbc1096ae2252db2f017 Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Thu, 29 Jan 2026 19:38:46 +0800 Subject: [PATCH 08/14] =?UTF-8?q?style(theme):=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E9=A2=9C=E8=89=B2=E6=96=B9=E6=A1=88=E5=B9=B6?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A2=9C=E8=89=B2=E8=B0=83=E8=89=B2=E6=9D=BF?= =?UTF-8?q?=E7=94=9F=E6=88=90=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将默认颜色方案替换为新的配色，同时使用Object.entries重构颜色调色板生成逻辑 --- .../src/common/color-scheme.ts | 37 +++++++++---------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/vchart-aurora-theme/src/common/color-scheme.ts b/packages/vchart-aurora-theme/src/common/color-scheme.ts index 42ffacd..e310222 100644 --- a/packages/vchart-aurora-theme/src/common/color-scheme.ts +++ b/packages/vchart-aurora-theme/src/common/color-scheme.ts @@ -2,16 +2,15 @@ import type { BuiltinColorPalette, IThemeColorScheme } from '@visactor/vchart'; const defaultColor = [ // 定义分类主题色 - '#1443FF', - '#33CCB2', - '#FFD500', - '#FFAA33', - '#FF7733', - '#F65656', - '#E93DBD', - '#9933FF', - '#5533FF', - '#A3ABC2' + '#3377FF', + '#1FE7F9', + '#53F3B3', + '#FFCD50', + '#ADB8D6', + '#B46FF4', + '#867AFF', + '#FAA64D', + '#F25E68' ]; const BLACK_COLORS = { @@ -36,15 +35,15 @@ const WHITE_COLORS = { 6: '#0F0F0F' }; -const blackColorPalettes = {}; -for (const key in BLACK_COLORS) { - blackColorPalettes[`blackColors${key}`] = BLACK_COLORS[key]; -} +const blackColorPalettes: Record = {}; +Object.entries(BLACK_COLORS).forEach(([key, value]) => { + blackColorPalettes[`blackColors${key}`] = value; +}); -const whiteColorPalettes = {}; -for (const key in WHITE_COLORS) { - whiteColorPalettes[`whiteColors${key}`] = WHITE_COLORS[key]; -} +const whiteColorPalettes: Record = {}; +Object.entries(WHITE_COLORS).forEach(([key, value]) => { + whiteColorPalettes[`whiteColors${key}`] = value; +}); export const colorScheme: IThemeColorScheme = { default: { @@ -64,6 +63,6 @@ export const colorScheme: IThemeColorScheme = { ...blackColorPalettes, ...whiteColorPalettes - } as Partial + } as unknown as BuiltinColorPalette } }; From c5db49ed70b1024e575c07815cd77ecb62d8a319 Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Thu, 29 Jan 2026 22:02:35 +0800 Subject: [PATCH 09/14] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=20vchart-them?= =?UTF-8?q?e-utils=20=E4=BE=9D=E8=B5=96=E8=87=B3=201.12.3=20=E7=89=88?= =?UTF-8?q?=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- common/config/rush/pnpm-lock.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 4cb4b4a..f059c45 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -166,7 +166,7 @@ importers: '@types/offscreencanvas': 2019.6.4 '@visactor/react-vchart': 1.12.1 '@visactor/vchart': 1.12.1 - '@visactor/vchart-theme-utils': workspace:1.12.2 + '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 '@vitejs/plugin-react-swc': ^3.4.1 eslint: ~8.18.0 From d05115a27ffc2785a0ae768989cfea5a54066cb9 Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Wed, 11 Mar 2026 19:34:23 +0800 Subject: [PATCH 10/14] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84vchart-aurora?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=B9=B6=E4=BC=98=E5=8C=96=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 删除未使用的mark.ts文件 - 添加font.css支持自定义字体 - 重构charts组件支持分类展示和空状态 - 优化线图、饼图、柱状图等系列样式和交互 - 重构颜色方案和主题配置 - 更新demo页面结构，支持图表分类导航 - 添加多种图表示例和交互功能 - 优化图例、提示框等组件样式 --- .../demo/src/chart-list.ts | 138 +++++- .../demo/src/{chartSpec.js => chartSpec.ts} | 456 +++++++++++++++--- .../vchart-aurora-theme/demo/src/charts.jsx | 9 +- .../vchart-aurora-theme/demo/src/font.css | 31 ++ .../vchart-aurora-theme/demo/src/frame.jsx | 87 +--- .../vchart-aurora-theme/demo/src/index.jsx | 1 + .../vchart-aurora-theme/public/aurora.json | 1 - .../src/common/color-scheme.ts | 69 ++- .../src/common/component/crosshair.ts | 37 +- .../src/common/component/legend.ts | 87 +--- .../src/common/component/tooltip.ts | 58 +-- .../vchart-aurora-theme/src/common/mark.ts | 11 - .../src/common/series/area.ts | 52 +- .../src/common/series/bar.ts | 41 +- .../src/common/series/line.ts | 26 +- .../src/common/series/pie.ts | 40 +- packages/vchart-aurora-theme/src/index.ts | 48 +- 17 files changed, 769 insertions(+), 423 deletions(-) rename packages/vchart-aurora-theme/demo/src/{chartSpec.js => chartSpec.ts} (66%) create mode 100644 packages/vchart-aurora-theme/demo/src/font.css delete mode 100644 packages/vchart-aurora-theme/public/aurora.json delete mode 100644 packages/vchart-aurora-theme/src/common/mark.ts diff --git a/packages/vchart-aurora-theme/demo/src/chart-list.ts b/packages/vchart-aurora-theme/demo/src/chart-list.ts index 51c6d3d..a8c33c6 100644 --- a/packages/vchart-aurora-theme/demo/src/chart-list.ts +++ b/packages/vchart-aurora-theme/demo/src/chart-list.ts @@ -1,56 +1,154 @@ import type { IChartInfo } from '@internal/chart-demo'; import { + barSpec, areaSpec, + areaSimpleSpec, + multiAreaSpec, barGroupHorizontalSpec, barGroupSpec, - barStackedHorizontalSpec, - barStackedPercentSpec, + benchmarkSpec, barStackedSpec, funnelSpec, lineSpec, pieSpec, + nestPieSpec, + metricPieSpec, radarSpec } from './chartSpec'; -export const charts: IChartInfo[] = [ +export interface IChartCategory { + key: string; + title: string; + charts: IChartInfo[]; +} + +// 柱状图系列 +export const barCharts: IChartInfo[] = [ + { + title: '基础柱状图', + spec: barSpec + }, { - title: 'Grouped Bar Chart', + title: '基础柱状图', spec: barGroupSpec }, { - title: 'Stacked Bar Chart', + title: '堆叠柱状图&Hover总量', spec: barStackedSpec }, { - title: 'Horizontal Grouped Bar Chart', + title: '带同行标杆柱状图', + spec: benchmarkSpec + }, + { + title: '水平分组柱状图', spec: barGroupHorizontalSpec + } +]; + +// 折线图系列 +export const lineCharts: IChartInfo[] = [ + { + title: '基础折线图', + spec: lineSpec + } +]; + +// 面积图系列 +export const areaCharts: IChartInfo[] = [ + { + title: '基础面积图', + spec: areaSpec }, { - title: 'Horizontal Stacked Bar Chart', - spec: barStackedHorizontalSpec + title: '迷你面积图', + spec: areaSimpleSpec }, { - title: 'Stacked Percentage Bar Chart', - spec: barStackedPercentSpec + title: '多项面积图', + spec: multiAreaSpec + } +]; + +// 饼图系列 +export const pieCharts: IChartInfo[] = [ + { + title: '基础饼图', + spec: pieSpec }, { - title: 'Line Chart', - spec: lineSpec + title: '定制标签的饼图', + spec: nestPieSpec }, { - title: 'Area Chart', - spec: areaSpec + title: '中心指标饼图', + spec: metricPieSpec + } +]; + +// 雷达图系列 +export const radarCharts: IChartInfo[] = [ + { + title: '基础雷达图', + spec: radarSpec + } +]; + +// 漏斗图系列 +export const funnelCharts: IChartInfo[] = [ + { + title: '基础漏斗图', + spec: funnelSpec + } +]; + +// 所有图表分类 +export const chartCategories: IChartCategory[] = [ + { + key: 'pie', + title: '饼图', + charts: pieCharts }, { - title: 'Pie Chart', - spec: pieSpec + key: 'bar', + title: '柱状图', + charts: barCharts }, { - title: 'Radar Chart', - spec: radarSpec + key: 'line', + title: '折线图', + charts: lineCharts }, { - title: 'Funnel Chart', - spec: funnelSpec + key: 'area', + title: '面积图', + charts: areaCharts } + + // { + // key: 'radar', + // title: '雷达图', + // charts: radarCharts + // }, + // { + // key: 'funnel', + // title: '漏斗图', + // charts: funnelCharts + // } ]; + +// 所有图表（向后兼容） +export const charts: IChartInfo[] = [ + ...barCharts, + ...lineCharts, + ...areaCharts, + ...pieCharts, + ...radarCharts, + ...funnelCharts +]; + +// 根据分类 key 获取图表列表 +export function getChartsByCategory(key: string): IChartInfo[] { + const category = chartCategories.find(c => c.key === key); + return category ? category.charts : charts; +} diff --git a/packages/vchart-aurora-theme/demo/src/chartSpec.js b/packages/vchart-aurora-theme/demo/src/chartSpec.ts similarity index 66% rename from packages/vchart-aurora-theme/demo/src/chartSpec.js rename to packages/vchart-aurora-theme/demo/src/chartSpec.ts index 9b532bd..f69f163 100644 --- a/packages/vchart-aurora-theme/demo/src/chartSpec.js +++ b/packages/vchart-aurora-theme/demo/src/chartSpec.ts @@ -1,3 +1,5 @@ +import { colorList, nestColorList } from '../../src/index'; + export const barSpec = { type: 'bar', data: { @@ -9,8 +11,8 @@ export const barSpec = { { type: 'Autocracies', year: '1970', value: 117 }, { type: 'Autocracies', year: '1980', value: 114 }, { type: 'Autocracies', year: '1990', value: 111 }, - { type: 'Autocracies', year: '2000', value: 89 }, - { type: 'Autocracies', year: '2010', value: 80 }, + { type: 'Autocracies', year: '2000', value: 0 }, + { type: 'Autocracies', year: '2010', value: 0.1 }, { type: 'Autocracies', year: '2018', value: 80 } ] }, @@ -64,8 +66,8 @@ export const barGroupSpec = { { type: 'Democracies', year: '2000', value: 87 }, { type: 'Democracies', year: '2010', value: 98 }, { type: 'Democracies', year: '2018', value: 99 }, - { type: 'Price', year: '1930', value: 56 }, - { type: 'Price', year: '1940', value: 122 }, + { type: 'Price', year: '1930', value: 0 }, + { type: 'Price', year: '1940', value: 0.1 }, { type: 'Price', year: '1950', value: 72 }, { type: 'Price', year: '1960', value: 82 }, { type: 'Price', year: '1970', value: 67 }, @@ -100,8 +102,9 @@ export const barGroupSpec = { indicator: { visible: true }, - label: { - visible: true + title: { + text: '柱状图标题', + subtext: '可选展示副标题一到两行文字' } }; @@ -215,75 +218,91 @@ export const barStackedSpec = { }, indicator: { visible: true + }, + tooltip: { + dimension: { + updateContent: items => { + const total = items.reduce((sum, item) => sum + Number(item.value), 0); + return [ + { key: '总量', value: total, hasShape: false }, // 新增总量项 + ...items + ]; + } + } } }; -export const barStackedHorizontalSpec = { +export const benchmarkSpec = { type: 'bar', - //stack: true, - data: { - values: [ - { type: 'Autocracies', year: '1930', value: 129 }, - { type: 'Autocracies', year: '1940', value: 133 }, - { type: 'Autocracies', year: '1950', value: 130 }, - { type: 'Autocracies', year: '1960', value: 126 }, - { type: 'Autocracies', year: '1970', value: 117 }, - { type: 'Autocracies', year: '1980', value: 114 }, - { type: 'Autocracies', year: '1990', value: 111 }, - { type: 'Democracies', year: '1930', value: 22 }, - { type: 'Democracies', year: '1940', value: 13 }, - { type: 'Democracies', year: '1950', value: 25 }, - { type: 'Democracies', year: '1960', value: 29 }, - { type: 'Democracies', year: '1970', value: 38 }, - { type: 'Democracies', year: '1980', value: 41 }, - { type: 'Democracies', year: '1990', value: 57 }, - { type: 'Price', year: '1930', value: 56 }, - { type: 'Price', year: '1940', value: 122 }, - { type: 'Price', year: '1950', value: 72 }, - { type: 'Price', year: '1960', value: 82 }, - { type: 'Price', year: '1970', value: 67 }, - { type: 'Price', year: '1980', value: 89 }, - { type: 'Price', year: '1990', value: 60 }, - { type: 'D', year: '1930', value: 56 }, - { type: 'D', year: '1940', value: 122 }, - { type: 'D', year: '1950', value: 72 }, - { type: 'D', year: '1960', value: 82 }, - { type: 'D', year: '1970', value: 67 }, - { type: 'D', year: '1980', value: 89 }, - { type: 'D', year: '1990', value: 60 }, - { type: 'E', year: '1930', value: 56 }, - { type: 'E', year: '1940', value: 122 }, - { type: 'E', year: '1950', value: 72 }, - { type: 'E', year: '1960', value: 82 }, - { type: 'E', year: '1970', value: 67 }, - { type: 'E', year: '1980', value: 89 }, - { type: 'E', year: '1990', value: 60 } - ] - }, - height: 500, - direction: 'horizontal', - xField: 'value', - yField: 'year', - seriesField: 'type', - axes: [ + data: [ { - orient: 'left', - visible: true, - domainLine: { visible: true }, - tick: { visible: true } + id: 'base', + values: [ + { + reason: '价格问题', + value: 250, + bench: 230 + }, + { + reason: '物流问题', + value: 200, + bench: 230 + }, + { + reason: '不想要了', + value: 100, + bench: 120 + }, + { + reason: '其他', + value: 20, + bench: 10 + } + ] + } + ], + series: [ + { + id: '退款金额', + type: 'bar', + xField: 'reason', + yField: 'value', + barMaxWidth: 16, + barGapInGroup: 2, + tooltip: { + dimension: { + content: { + key: '退款金额', + value: datum => datum.value + } + } + } }, { - orient: 'bottom', - visible: true, - domainLine: { visible: false }, - tick: { visible: false } + id: '同行标杆退款金额', + type: 'scatter', + xField: 'reason', + yField: 'bench', + tooltip: { + dimension: { + content: { + key: '同行标杆退款金额', + value: datum => datum.bench + } + } + }, + point: { + style: { + shape: 'rect', + size: [16, 2], + fill: '#2850C6', + stroke: '#2850C6' + } + } } ], legends: { visible: true - }, - indicator: { - visible: true } }; @@ -401,8 +420,18 @@ export const lineSpec = { legends: { visible: true }, - indicator: { - visible: true + crosshair: { + xField: { + line: { + type: 'line', + width: 1, + style: { + lineWidth: 1, + stroke: '#DCDEE1', + lineDash: [2, 2] + } + } + } } }; @@ -415,29 +444,201 @@ export const pieSpec = { { type: 'oxygen', value: '46.60' }, { type: 'silicon', value: '27.72' }, { type: 'aluminum', value: '8.13' }, - { type: 'iron', value: '5' }, - { type: 'calcium', value: '3.63' }, - { type: 'sodium', value: '2.83' }, - { type: 'potassium', value: '2.59' }, - { type: 'others', value: '3.5' } + { type: 'iron', value: '1' }, + { type: 'calcium', value: '3.63' } ] } ], valueField: 'value', categoryField: 'type', - legends: { + title: { visible: true, - orient: 'right' + text: '数据分布', + subtext: '可视化图表副标题一到两行文字' }, tooltip: { mark: { - content: [ - { - key: datum => datum['type'], - value: datum => datum['value'] + '%' + title: { + visible: false + } + } + }, + legends: { + visible: true + }, + label: { + visible: true + } +}; + +const rootDatum = [ + { type: '0~29', value: '126.04' }, + { type: '30~59', value: '128.77' }, + { type: '60 and over', value: '77.09' } +].map((item, index) => ({ ...item, color: nestColorList[index]?.pop() })); + +const subDatum = (() => { + const groupIndexMap = new Map(); + rootDatum.forEach((item, index) => { + groupIndexMap.set(item.type, index); + }); + + const groupItemIndexMap = new Map(); + const rawSubData = [ + { type: '0~9', group: '0~29', value: '39.12' }, + { type: '10~19', group: '0~29', value: '43.01' }, + { type: '20~29', group: '0~29', value: '43.91' }, + { type: '30~39', group: '30~59', value: '45.4' }, + { type: '40~49', group: '30~59', value: '40.89' }, + { type: '50~59', group: '30~59', value: '42.48' }, + { type: '60~69', group: '60 and over', value: '39.63' }, + { type: '70~79', group: '60 and over', value: '25.17' }, + { type: '80 and over', group: '60 and over', value: '12.29' } + ]; + + return rawSubData.map(item => { + const parentIndex = groupIndexMap.get(item.group)!; + const itemIndex = (groupItemIndexMap.get(item.group) ?? -1) + 1; + groupItemIndexMap.set(item.group, itemIndex); + return { ...item, color: nestColorList[parentIndex][itemIndex] }; + }); +})(); + +export const nestPieSpec = { + type: 'common', + data: [ + { + id: 'id0', + values: rootDatum + }, + { + id: 'id1', + values: subDatum + } + ], + series: [ + { + type: 'pie', + dataIndex: 0, + outerRadius: 0.75, + innerRadius: 0, + valueField: 'value', + categoryField: 'type', + + label: { + position: 'inside', + formatMethod: (label, data) => { + return data?.type; + }, + visible: true, + rotate: false + }, + color: nestColorList.map(item => item[item.length - 1]), + pie: { + state: { + hover: { + outerRadius: 0.75 + }, + selected: { + outerRadius: 0.75 + } + }, + style: { + fill: datum => { + return datum.color; + } + } + } + }, + { + type: 'pie', + dataIndex: 1, + outerRadius: 0.85, + innerRadius: 0.75, + valueField: 'value', + categoryField: 'type', + label: { + visible: true + }, + pie: { + style: { + fill: datum => { + return datum.color; + } } + } + } + ], + legends: { + visible: false + } +}; + +export const metricPieSpec = { + type: 'pie', + data: [ + { + id: 'id0', + values: [ + { type: 'oxygen', value: '46.60' }, + { type: 'silicon', value: '27.72' }, + { type: 'aluminum', value: '8.13' }, + { type: 'iron', value: '1' }, + { type: 'calcium', value: '3.63' } ] } + ], + outerRadius: 0.85, + innerRadius: 0.75, + valueField: 'value', + categoryField: 'type', + title: { + visible: true, + text: '数据分布', + subtext: '可视化图表副标题一到两行文字' + }, + indicator: { + visible: true, + trigger: 'hover', + limitRatio: 0.5, // same as inner radius + title: { + visible: true, + autoFit: false, + style: { + fontWeight: '500', + fontFamily: 'Douyin Number ABC', + fill: '#111', + fontSize: 32, + lineHeight: 46, + text: '25%' + } + }, + content: [ + { + visible: true, + autoFit: false, + style: { + fill: '#585858', + fontSize: 14, + lineHeight: 20, + text: '指标名称' + } + } + ] + }, + tooltip: { + mark: { + title: { + visible: false + } + } + }, + legend: { + visible: true, + orient: 'bottom' + }, + label: { + visible: true } }; @@ -580,6 +781,90 @@ export const funnelSpec = { }; export const areaSpec = { + type: 'area', + seriesMark: 'line', + data: { + values: [ + { type: 'Nail polish', country: 'Africa', value: 4229 }, + { type: 'Eyebrow pencil', country: 'Africa', value: 3932 }, + { type: 'Rouge', country: 'Africa', value: 5221 }, + { type: 'Lipstick', country: 'Africa', value: 9256 }, + { type: 'Eyeshadows', country: 'Africa', value: 3308 }, + { type: 'Eyeliner', country: 'Africa', value: 5432 }, + { type: 'Foundation', country: 'Africa', value: 13701 }, + { type: 'Lip gloss', country: 'Africa', value: 4008 }, + { type: 'Mascara', country: 'Africa', value: 18712 } + ] + }, + height: 600, + xField: ['type'], + yField: 'value', + seriesField: 'country', + legends: { + visible: false + }, + indicator: { + visible: true + }, + crosshair: { + xField: { + line: { + type: 'line', + width: 1, + style: { + lineWidth: 1, + stroke: '#DCDEE1', + lineDash: [2, 2] + } + } + } + } +}; + +export const areaSimpleSpec = { + type: 'area', + seriesMark: 'line', + data: { + values: [ + { type: 'Nail polish', country: 'Africa', value: 4229 }, + { type: 'Eyebrow pencil', country: 'Africa', value: 3932 }, + { type: 'Rouge', country: 'Africa', value: 5221 }, + { type: 'Lipstick', country: 'Africa', value: 9256 }, + { type: 'Eyeshadows', country: 'Africa', value: 3308 }, + { type: 'Eyeliner', country: 'Africa', value: 5432 }, + { type: 'Foundation', country: 'Africa', value: 13701 }, + { type: 'Lip gloss', country: 'Africa', value: 4008 }, + { type: 'Mascara', country: 'Africa', value: 18712 } + ] + }, + axes: [ + { + orient: 'bottom', + visible: false + }, + { + orient: 'left', + visible: false + } + ], + tooltip: { + visible: false + }, + xField: ['type'], + yField: 'value', + seriesField: 'country', + legends: { + visible: false + }, + indicator: { + visible: false + }, + crosshair: { + visible: false + } +}; + +export const multiAreaSpec = { type: 'area', seriesMark: 'line', data: { @@ -626,10 +911,23 @@ export const areaSpec = { xField: ['type'], yField: 'value', seriesField: 'country', - legends: { + indicator: { visible: true }, - indicator: { + legends: { visible: true + }, + crosshair: { + xField: { + line: { + type: 'line', + width: 1, + style: { + lineWidth: 1, + stroke: '#DCDEE1', + lineDash: [2, 2] + } + } + } } }; diff --git a/packages/vchart-aurora-theme/demo/src/charts.jsx b/packages/vchart-aurora-theme/demo/src/charts.jsx index 1c17f10..c2e884d 100644 --- a/packages/vchart-aurora-theme/demo/src/charts.jsx +++ b/packages/vchart-aurora-theme/demo/src/charts.jsx @@ -1,15 +1,18 @@ import React from 'react'; import { isMobile } from 'react-device-detect'; -import { charts } from './chart-list'; import { VChart } from '@visactor/react-vchart'; import { Card } from '@douyinfe/semi-ui'; const chartHeight = 400; -const Charts = () => { +const Charts = ({ charts = [] }) => { + if (charts.length === 0) { + return
暂无图表数据
; + } + return (
- {charts.map((chart, i) => { + {charts?.map((chart, i) => { return (
{ + const [selectedKey, setSelectedKey] = useState('bar'); + + const currentCharts = getChartsByCategory(selectedKey); + + const getCategoryTitle = key => { + const category = chartCategories.find(c => c.key === key); + return category ? category.title : '图表展示'; + }; + return (
), - text: 'Semi Templates' + text: 'VChart Aurora Theme' }} footer={
@@ -45,64 +46,24 @@ const Frame = () => { >
-

VChart Demo

+

{getCategoryTitle(selectedKey)}

- +
diff --git a/packages/vchart-aurora-theme/demo/src/index.jsx b/packages/vchart-aurora-theme/demo/src/index.jsx index b6b62c1..89679e6 100644 --- a/packages/vchart-aurora-theme/demo/src/index.jsx +++ b/packages/vchart-aurora-theme/demo/src/index.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import Frame from './frame.jsx'; import './normalize.css'; +import './font.css'; import VChart from '@visactor/vchart'; import { chartAuroraTheme } from '../../src/index.ts'; diff --git a/packages/vchart-aurora-theme/public/aurora.json b/packages/vchart-aurora-theme/public/aurora.json deleted file mode 100644 index 9afb2e9..0000000 --- a/packages/vchart-aurora-theme/public/aurora.json +++ /dev/null @@ -1 +0,0 @@ -{"colorScheme":{"default":{"dataScheme":["#1443FF","#33CCB2","#FFD500","#FFAA33","#FF7733","#F65656","#E93DBD","#9933FF","#5533FF","#A3ABC2"],"palette":{"backgroundColor":"transparent","borderColor":"#e3e5e8","shadowColor":"rgba(33,37,44,0.1)","hoverBackgroundColor":"#f1f2f5","sliderRailColor":"#f1f3f4","sliderHandleColor":"#ffffff","sliderTrackColor":"#0040ff","popupBackgroundColor":"#ffffff","primaryFontColor":"#21252c","secondaryFontColor":"#606773","tertiaryFontColor":"#89909d","axisLabelFontColor":"#909199","disableFontColor":"#bcc1cb","axisMarkerFontColor":"#ffffff","axisGridColor":"#E1E2E5","axisDomainColor":"#DCDEE1","dataZoomHandleStrokeColor":"#aeb5be","dataZoomChartColor":"#c9ced8","playerControllerColor":"#0040ff","scrollBarSliderColor":"rgba(0,0,0,0.3)","axisMarkerBackgroundColor":"#21252c","markLabelBackgroundColor":"#f1f2f5","markLineStrokeColor":"#606773","dangerColor":"#e33232","warningColor":"#ffc528","successColor":"#07a35a","infoColor":"#3073f2","discreteLegendPagerTextColor":"rgb(51, 51, 51)","discreteLegendPagerHandlerColor":"rgb(47, 69, 84)","discreteLegendPagerHandlerDisableColor":"rgb(170, 170, 170)","emptyCircleColor":"#e3e5e8","bandColor":"#1443FF","blackColors6":"#F0F0F0","blackColors15":"#D9D9D9","blackColors25":"#BFBFBF","blackColors45":"#8C8C8C","blackColors65":"#595959","blackColors85":"#262626","blackColors95":"#0D0D0D","blackColors100":"#000","whiteColors6":"#0F0F0F","whiteColors15":"#262626","whiteColors25":"#404040","whiteColors45":"#737373","whiteColors65":"#A6A6A6","whiteColors85":"#D9D9D9","whiteColors95":"#F2F2F2","whiteColors100":"#FFFFFF"}}},"token":{"fontFamily":"\"PingFang SC\", \"-apple-system\", \"Segoe UI\", \"Helvetica Neue\", Arial,\n Roboto, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","fontSize":12,"l1FontSize":32,"l1LineHeight":"150%","l2FontSize":20,"l2LineHeight":"140%","l3FontSize":16,"l3LineHeight":"150%","l4FontSize":14,"l4LineHeight":"150%","l5FontSize":12,"l5LineHeight":"130%","l6FontSize":10,"l6LineHeight":"120%"},"series":{"scatter":{"point":{"style":{"size":8,"symbolType":"circle","lineWidth":1,"fillOpacity":0.35,"stroke":null}},"label":{"visible":false,"offset":5,"position":"top","style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}}}},"line":{"label":{"visible":false,"position":"top","offset":4,"style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}}},"point":{"style":{"symbolType":"circle","visible":false,"size":12,"lineWidth":2,"shadowColor":"rgba(0, 0, 0, 0.1)","shadowBlur":3,"stroke":{"type":"palette","key":"whiteColors100"}}},"line":{"style":{"lineWidth":2,"curveType":"monotone"}}},"area":{"label":{"visible":false,"offset":5,"position":"top","style":{"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2}},"point":{"style":{"symbolType":"circle","visible":false,"size":12,"lineWidth":2,"shadowColor":"rgba(0, 0, 0, 0.1)","shadowBlur":3,"stroke":{"type":"palette","key":"whiteColors100"}}},"seriesMark":"area","line":{"style":{"curveType":"monotone","lineWidth":2}},"area":{"style":{"fillOpacity":0.25,"lineWidth":2},"state":{"selected":{"fillOpacity":0.5}}}},"bar":{"label":{"visible":false,"position":"outside","offset":5,"style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"},"fill":{"type":"palette","key":"secondaryFontColor"}}},"barMaxWidth":8,"barGapInGroup":4},"bar3d":{"bar3d":{"style":{"length":3}},"label":{"visible":false,"style":{"offset":12,"position":"outside"}}},"pie":{"outerRadius":0.8,"pie":{"style":{"fillOpacity":1,"padAngle":0,"stroke":"#fff","lineWidth":2},"state":{"hover":{"lineWidth":0},"selected":{"lineWidth":0}}},"label":{"visible":true,"interactive":true,"position":"outside","style":{"fontWeight":"normal","stroke":{"type":"palette","key":"backgroundColor"},"fillOpacity":1,"fill":null}},"innerLabel":{"style":{"lineWidth":2}},"emptyCircle":{"style":{"fill":{"type":"palette","key":"emptyCircleColor"},"fillOpacity":1}},"innerRadius":0.54},"pie3d":{"outerRadius":0.6,"pie3d":{"style":{"height":10,"fillOpacity":1}},"label":{"visible":false,"interactive":true,"position":"outside"}},"map":{"defaultFillColor":"#f3f3f3","area":{"style":{"lineWidth":0.5,"strokeOpacity":1,"stroke":"black","fillOpacity":1}},"label":{"interactive":false,"style":{"fontSize":{"type":"token","key":"l6FontSize"},"lineHeight":{"type":"token","key":"l6LineHeight"},"textBaseline":"middle","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"},"stroke":{"type":"palette","key":"backgroundColor"}}}},"radar":{"label":{"visible":false,"offset":4,"style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}},"position":"top"},"point":{"style":{"symbolType":"circle","visible":false,"size":12,"lineWidth":2,"shadowColor":"rgba(0, 0, 0, 0.1)","shadowBlur":3,"stroke":{"type":"palette","key":"whiteColors100"}}},"line":{"style":{"lineWidth":1}},"area":{"visible":true}},"dot":{"dot":{"style":{"size":10,"fillOpacity":1}},"symbol":{"style":{"size":10}},"title":{"style":{"textAlign":"left","textBaseline":"middle","fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}},"subTitle":{"style":{"textAlign":"left","textBaseline":"top","fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}}},"link":{"arrow":{"style":{"size":10}}},"wordCloud":{"word":{"padding":1,"style":{"textAlign":"center","textBaseline":"alphabetic"}}},"wordCloud3d":{"word":{"padding":1,"style":{"textAlign":"center","textBaseline":"alphabetic"}}},"funnel":{"label":{"style":{"fill":{"type":"palette","key":"whiteColors100"},"textBaseline":"middle","lineWidth":2,"fontSize":12}},"outerLabel":{"style":{"fontSize":12,"fill":{"type":"palette","key":"secondaryFontColor"}},"line":{"style":{"stroke":{"type":"palette","key":"axisDomainColor"},"lineWidth":2}}},"transformLabel":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fill":{"type":"palette","key":"secondaryFontColor"},"textBaseline":"middle"}},"transform":{"style":{"fill":{"type":"palette","key":"axisGridColor"}}},"funnel":{"state":{"selected":{"fill":"#1966FF","stroke":"#3958E0","strokeOpacity":0.2,"lineWidth":4}}}},"funnel3d":{"label":{"style":{"fill":"white","textBaseline":"middle","lineWidth":2}},"outerLabel":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fill":{"type":"palette","key":"secondaryFontColor"}},"line":{"style":{"stroke":{"type":"palette","key":"axisDomainColor"}}}},"transformLabel":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fill":{"type":"palette","key":"secondaryFontColor"},"textBaseline":"middle"}},"transform3d":{"style":{"fill":{"type":"palette","key":"axisGridColor"}}}},"linearProgress":{"bandWidth":30,"progress":{"style":{"fillOpacity":1}},"track":{"style":{"fill":"#E7EBED","fillOpacity":1}}},"circularProgress":{"outerRadius":0.8,"innerRadius":0.6,"progress":{"style":{"fillOpacity":1,"cornerRadius":100}},"track":{"style":{"fillOpacity":1,"cornerRadius":100,"fill":"#DCDEE1"},"interactive":false},"tickMask":{"visible":false,"angle":3,"offsetAngle":0,"forceAlign":true}},"waterfall":{"seriesFieldName":{"total":"total","increase":"increase","decrease":"decrease"},"leaderLine":{"style":{"stroke":"black","lineWidth":1,"lineDash":[4,4]}},"stackLabel":{"visible":true,"offset":12,"position":"withChange","style":{"fill":"black","fontSize":{"type":"token","key":"l4FontSize"}}},"label":{"visible":false,"offset":12,"position":"inside","style":{"lineWidth":2}}},"gauge":{"outerRadius":0.8,"innerRadius":0.6,"padAngle":1.146,"segment":{"style":{"fillOpacity":1}},"tickMask":{"visible":false,"angle":3,"offsetAngle":0,"forceAlign":true}},"gaugePointer":{"pointer":{"type":"path","width":0.4,"height":0.4,"style":{"path":"M-0.020059 -0.978425 C-0.018029 -0.9888053 -0.013378 -1 0 -1 C0.01342 -1 0.01812 -0.989146 0.0201 -0.978425 C0.02161 -0.9702819 0.0692 -0.459505 0.09486 -0.184807 C0.10298 -0.097849 0.1089 -0.034548 0.11047 -0.018339 C0.11698 0.04908 0.07373 0.11111 0.00002 0.11111 C-0.07369 0.11111 -0.117184 0.04991 -0.110423 -0.018339 C-0.103662 -0.086591 -0.022089 -0.9680447 -0.020059 -0.978425Z"},"visible":false},"pin":{"width":0.025,"height":0.025,"style":{"path":"M1 0 C1 0.55228 0.55228 1 0 1 C-0.552285 1 -1 0.55228 -1 0 C-1 -0.552285 -0.552285 -1 0 -1 C0.55228 -1 1 -0.552285 1 0Z","fill":"#888"},"visible":false},"pinBackground":{"width":0.06,"height":0.06,"style":{"path":"M1 0 C1 0.55228 0.55228 1 0 1 C-0.552285 1 -1 0.55228 -1 0 C-1 -0.552285 -0.552285 -1 0 -1 C0.55228 -1 1 -0.552285 1 0Z","fill":"#ddd"},"visible":false}},"treemap":{"gapWidth":0,"nodePadding":[5],"nonLeaf":{"visible":false,"style":{"fillOpacity":0.5}},"label":{"style":{"fill":{"type":"palette","key":"whiteColors100"},"textBaseline":"middle","textAlign":"center","fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}},"nonLeafLabel":{"padding":24,"style":{"fill":"black","stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2,"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"textBaseline":"middle","textAlign":"center"}},"leaf":{"style":{"lineWidth":2,"stroke":{"type":"palette","key":"whiteColors100"}},"state":{"hover":{"fillOpacity":0.8,"lineWidth":0}}}},"sunburst":{"innerRadius":0,"outerRadius":1,"startAngle":-90,"endAngle":270,"gap":0,"labelLayout":{"align":"center","offset":0,"rotate":"radial"},"sunburst":{"style":{"stroke":{"type":"palette","key":"backgroundColor"},"fillOpacity":1,"cursor":"pointer"}},"label":{"visible":true,"style":{"cursor":"pointer","fill":{"type":"palette","key":"primaryFontColor"},"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}}},"rangeColumn":{"label":{"visible":false,"offset":5,"position":"inside","style":{"lineWidth":2,"fill":{"type":"palette","key":"axisMarkerFontColor"}},"minLabel":{"position":"end"},"maxLabel":{"position":"start"}}},"circlePacking":{"layoutPadding":5,"circlePacking":{"visible":true,"style":{"cursor":"pointer","stroke":{"type":"palette","key":"backgroundColor"}}},"label":{"visible":true,"style":{"cursor":"pointer","fill":"black","stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2,"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}}},"heatmap":{"cell":{"style":{"shape":"square","fillOpacity":1,"stroke":{"type":"palette","key":"whiteColors100"},"lineWidth":1},"state":{"hover":{"zIndex":100,"stroke":"#000"}}},"cellBackground":{"visible":false},"label":{"position":"inside","style":{"fill":{"type":"palette","key":"whiteColors100"},"fontSize":12}}},"sankey":{"link":{"style":{"fillOpacity":0.15,"round":true}}},"rose":{"rose":{"style":{"fillOpacity":1}},"label":{"style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"},"textAlign":"center","textBaseline":"middle"}}},"boxPlot":{"boxPlot":{"style":{"lineWidth":1}},"label":{"style":{"lineWidth":2}}},"correlation":{"centerLabel":{"visible":true,"position":"center","style":{"fill":"#fff","text":""}},"label":{"visible":true,"position":"bottom","style":{"fill":"#000"}}},"liquid":{"outlinePadding":10,"liquidBackground":{"style":{"lineWidth":0,"fillOpacity":0.2}},"liquidOutline":{"style":{"lineWidth":2}}},"venn":{"circle":{"style":{"opacity":0.8},"state":{"hover":{"opacity":1}}},"overlap":{"style":{"opacity":0.8},"state":{"hover":{"opacity":1,"stroke":"white","lineWidth":2}}},"label":{"visible":true,"style":{"fill":"white","textBaseline":"middle","textAlign":"center","fontSize":{"type":"token","key":"l4FontSize"},"lineHeight":{"type":"token","key":"l4LineHeight"}}},"overlapLabel":{"visible":true,"style":{"textBaseline":"middle","textAlign":"center","fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"}}}},"mosaic":{"label":{"visible":false,"position":"center","style":{"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}}},"bar":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"}}}},"bar_horizontal":{"stackCornerRadius":[0,1,1,0],"label":{"position":"right","offset":4}},"bar_vertical":{"stackCornerRadius":[1,1,0,0],"label":{"position":"top","offset":4}}},"name":"aurora","background":{"type":"palette","key":"backgroundColor"},"padding":20,"fontFamily":{"type":"token","key":"fontFamily"},"mark":{"text":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fillOpacity":1}}},"markByName":{"label":{"style":{"fontSize":12,"fontWeight":"normal","fillOpacity":1,"lineJoin":"bevel","fill":{"type":"palette","key":"blackColors65"},"lineWidth":0}},"area":{"style":{"fillOpacity":0.2}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"word":{"style":{"fontSize":null}},"fillingWord":{"style":{"fontSize":null}},"sunburst":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"}}},"circlePacking":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"}}},"funnel3d":{"style":{"stroke":false}},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06},"stroke":"transparent"}}},"component":{"discreteLegend":{"orient":"top","position":"middle","padding":[8,8,8,8],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":21,"fill":{"type":"palette","key":"blackColors45"},"fontWeight":"normal"},"space":12},"pager":{"textStyle":{"fill":{"type":"palette","key":"blackColors45"},"fontSize":10},"handler":{"style":{"fill":{"type":"palette","key":"blackColors100"},"size":10},"state":{"disable":{"fill":{"type":"palette","key":"discreteLegendPagerHandlerDisableColor"}}},"space":8}},"item":{"visible":true,"spaceCol":24,"spaceRow":12,"padding":0,"background":{"state":{"selectedHover":{"fill":{"type":"palette","key":"hoverBackgroundColor"}},"unSelectedHover":{"fill":{"type":"palette","key":"hoverBackgroundColor"}}},"visible":false},"shape":{"space":4,"style":{"lineWidth":0,"fillOpacity":1,"opacity":1,"size":8,"symbolType":"circle"},"state":{"unSelected":{"fillOpacity":0.2,"opacity":1,"fill":"#D8D8D8"}}},"label":{"space":100,"style":{"fill":"#85878A","fontSize":12,"lineHeight":12,"opacity":1,"fontWeight":400},"state":{"unSelected":{"fill":"#D8D8D8","opacity":1}}}},"allowAllCanceled":false,"visible":true,"maxRow":1},"colorLegend":{"horizontal":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":5,"style":{"fontSize":12,"fill":"#2C3542"}},"handler":{"style":{"symbolType":"rectRound","lineWidth":1,"outerBorder":null,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":16,"scaleX":0.5,"fill":"#fff","stroke":"#99B0F3","radius":2}},"startText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":"#2C3542"},"space":10},"rail":{"width":100,"height":4,"style":{"fill":"#DCDEE2"}}},"vertical":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":5,"style":{"fontSize":12,"fill":"#2C3542"}},"handler":{"style":{"symbolType":"rectRound","lineWidth":1,"outerBorder":null,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":16,"scaleY":0.5,"fill":"#fff","stroke":"#99B0F3","radius":2}},"startText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":"#2C3542"},"space":10},"rail":{"width":4,"height":100,"style":{"fill":"#DCDEE2"}}}},"sizeLegend":{"horizontal":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":{"type":"palette","key":"sliderTrackColor"}},"fill":{"type":"palette","key":"sliderHandleColor"}}},"startText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"sizeBackground":{"fill":{"type":"palette","key":"dataZoomChartColor"}},"track":{"style":{"fill":{"type":"palette","key":"sliderTrackColor","a":0.8}}},"rail":{"style":{"fill":{"type":"palette","key":"sliderRailColor"}},"width":200,"height":4}},"vertical":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":{"type":"palette","key":"sliderTrackColor"}},"fill":{"type":"palette","key":"sliderHandleColor"}}},"startText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"sizeBackground":{"fill":{"type":"palette","key":"dataZoomChartColor"}},"track":{"style":{"fill":{"type":"palette","key":"sliderTrackColor","a":0.8}}},"rail":{"style":{"fill":{"type":"palette","key":"sliderRailColor"}},"height":200,"width":4}}},"axis":{"domainLine":{"visible":true,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisDomainColor"},"strokeOpacity":1}},"grid":{"visible":true,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisGridColor"},"strokeOpacity":1,"lineDash":[4,4]}},"subGrid":{"visible":false,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisGridColor"},"strokeOpacity":1,"lineDash":[4,4]}},"tick":{"visible":true,"inside":false,"tickSize":4,"alignWithLabel":true,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"blackColors25"},"strokeOpacity":1}},"subTick":{"visible":false,"tickSize":2,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"blackColors15"},"strokeOpacity":1}},"label":{"visible":true,"inside":false,"space":8,"style":{"fontSize":12,"fill":{"type":"palette","key":"blackColors45"},"fontWeight":400,"fillOpacity":1}},"title":{"space":10,"padding":0,"style":{"fontSize":12,"lineHeight":12,"fill":{"type":"palette","key":"blackColors65"},"fontWeight":"normal","fillOpacity":1},"visible":false}},"axisBand":{"domainLine":{"visible":true},"grid":{"visible":false},"subGrid":{"visible":false},"tick":{"visible":true},"subTick":{"visible":false}},"axisLinear":{"domainLine":{"visible":false},"grid":{"visible":true},"subGrid":{"visible":false},"tick":{"visible":false},"subTick":{"visible":false}},"axisX":{"label":{"space":8},"title":{"space":8},"maxHeight":"30%","unit":{"visible":false,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisY":{"label":{"space":12,"autoLimit":true},"title":{"space":12,"autoRotate":true},"maxWidth":"30%","unit":{"visible":false,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisZ":{"label":{"space":0},"title":{"space":8},"maxHeight":"30%","unit":{"visible":false,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisAngle":{"grid":{"visible":true,"style":{"lineDash":[6,6]},"smooth":false},"label":{"space":4}},"axisRadius":{"grid":{"smooth":false,"visible":true},"subGrid":{"smooth":false,"visible":false},"domainLine":{}},"markLine":{"line":{"style":{"lineDash":[],"stroke":{"type":"palette","key":"blackColors25"},"lineWidth":1}},"startSymbol":{"visible":false,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"visible":false,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"label":{"refY":0,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"blackColors65"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}},"visible":false},"position":"insideStartTop","autoRotate":true}},"markArea":{"area":{"style":{"fill":{"type":"palette","key":"blackColors100","a":0.06}}},"label":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"blackColors65"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}},"visible":false}}},"markPoint":{"itemLine":{"decorativeLine":{"visible":false},"startSymbol":{"size":6,"visible":true,"style":{"fill":"#fff","stroke":{"type":"palette","key":"bandColor"},"lineWidth":2}},"endSymbol":{"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0},"visible":false},"line":{"style":{"stroke":{"type":"palette","key":"blackColors25"},"lineWidth":1}}},"itemContent":{"offsetY":-16,"autoRotate":false,"text":{"style":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"blackColors65"}}}}},"polarMarkLine":{"line":{"style":{"lineDash":[3,3],"stroke":{"type":"palette","key":"markLineStrokeColor"}}},"startSymbol":{"visible":false,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"visible":true,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"label":{"refY":5,"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}}}}},"polarMarkArea":{"area":{"style":{"fill":{"type":"palette","key":"axisDomainColor","a":0.25}}},"label":{"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}}}}},"polarMarkPoint":{"itemLine":{"decorativeLine":{"visible":false},"startSymbol":{"size":5,"visible":true,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"line":{"style":{"stroke":{"type":"palette","key":"markLineStrokeColor"}}}},"itemContent":{"offsetY":-50}},"geoMarkPoint":{"itemLine":{"decorativeLine":{"visible":false},"startSymbol":{"size":5,"visible":true,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"line":{"style":{"stroke":{"type":"palette","key":"markLineStrokeColor"}}}},"itemContent":{"offsetY":-50}},"tooltip":{"offset":{"x":16,"y":16},"panel":{"padding":{"top":12,"left":12,"right":12,"bottom":12},"backgroundColor":{"type":"palette","key":"popupBackgroundColor"},"border":{"color":{"type":"palette","key":"popupBackgroundColor"},"width":0,"radius":3},"shadow":{"x":0,"y":0,"blur":10,"spread":0,"color":"#aeaeae"}},"spaceRow":12,"titleLabel":{"fontSize":12,"lineHeight":12,"fontColor":"#1D1D2E","fontWeight":"500","textBaseline":"middle","spacing":0,"textAlign":"left"},"shape":{"size":8,"spacing":8},"keyLabel":{"fontSize":12,"lineHeight":12,"fontColor":{"type":"palette","key":"blackColors65"},"textBaseline":"middle","spacing":12,"textAlign":"left"},"valueLabel":{"fontSize":12,"lineHeight":12,"fontColor":{"type":"palette","key":"blackColors65"},"fontWeight":"normal","textBaseline":"middle","spacing":0}},"dataZoom":{"padding":[12,0],"showDetail":"auto","brushSelect":false,"middleHandler":{"visible":false,"background":{"size":6,"style":{"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"cornerRadius":2}},"icon":{"style":{"size":4,"fill":{"type":"palette","key":"sliderHandleColor"},"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"symbolType":"M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z","lineWidth":0.5}}},"background":{"size":20,"style":{"fill":{"type":"palette","key":"sliderRailColor"},"lineWidth":0}},"selectedBackground":{"style":{"fill":{"type":"palette","key":"sliderTrackColor"},"fillOpacity":0.1,"outerBorder":{"stroke":{"type":"palette","key":"sliderTrackColor"},"strokeOpacity":0.2,"distance":-0.5,"lineWidth":1}}},"selectedBackgroundChart":{"area":{"style":{"visible":false,"stroke":false,"fill":{"type":"palette","key":"dataZoomChartColor"}}},"line":{"style":{"visible":false,"stroke":{"type":"palette","key":"dataZoomChartColor"},"lineWidth":1}}},"startHandler":{"style":{"symbolType":"M-0.5-2.4h0.9c0.4,0,0.7,0.3,0.7,0.7v3.3c0,0.4-0.3,0.7-0.7,0.7h-0.9c-0.4,0-0.7-0.3-0.7-0.7v-3.3\nC-1.2-2-0.9-2.4-0.5-2.4z M-0.4-1.4L-0.4-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC-0.4-1.4-0.4-1.4-0.4-1.4z M0.3-1.4L0.3-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC0.3-1.4,0.3-1.4,0.3-1.4z;","fill":{"type":"palette","key":"sliderHandleColor"},"scaleX":1.2,"scaleY":1.2,"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"lineWidth":1}},"endHandler":{"style":{"symbolType":"M-0.5-2.4h0.9c0.4,0,0.7,0.3,0.7,0.7v3.3c0,0.4-0.3,0.7-0.7,0.7h-0.9c-0.4,0-0.7-0.3-0.7-0.7v-3.3\nC-1.2-2-0.9-2.4-0.5-2.4z M-0.4-1.4L-0.4-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC-0.4-1.4-0.4-1.4-0.4-1.4z M0.3-1.4L0.3-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC0.3-1.4,0.3-1.4,0.3-1.4z;","fill":{"type":"palette","key":"sliderHandleColor"},"scaleX":1.2,"scaleY":1.2,"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"lineWidth":1}},"startText":{"padding":8,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}}},"endText":{"padding":8,"style":{"fontSize":{"type":"token","key":"l5FontSize"},"lineHeight":{"type":"token","key":"l5LineHeight"},"fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}}},"backgroundChart":{"area":{"style":{"visible":true,"stroke":false,"fill":{"type":"palette","key":"dataZoomChartColor"}}},"line":{"style":{"visible":true,"stroke":{"type":"palette","key":"dataZoomChartColor"},"lineWidth":1}}},"horizontal":{"middleHandler":{"visible":false},"startHandler":{"style":{"size":22}},"selectedBackground":{"style":{"fill":"#6699FF","fillOpacity":0.2,"opacity":1,"stroke":"#6699FF","lineWidth":2,"cornerRadius":4}},"background":{"style":{"fill":"#F3F4F6","fillOpacity":0.2,"cornerRadius":4,"stroke":"#EDEEF0","opacity":1,"lineWidth":2}},"endHandler":{"style":{"size":22}},"backgroundChart":{"area":{"style":{"fill":false,"stroke":"#6699FF"}},"line":{"style":{"fill":false,"stroke":"#6699FF"}}},"startText":{"visible":false},"endText":{"visible":false},"height":44},"vertical":{"middleHandler":{"visible":false},"startHandler":{"style":{"size":22}},"selectedBackground":{"style":{"fill":"#6699FF","fillOpacity":0.2,"opacity":1,"stroke":"#6699FF","lineWidth":2,"cornerRadius":4}},"background":{"style":{"fill":"#F3F4F6","fillOpacity":0.2,"cornerRadius":4,"stroke":"#EDEEF0","opacity":1,"lineWidth":2}},"endHandler":{"style":{"size":22}},"backgroundChart":{"area":{"style":{"fill":false,"stroke":"#6699FF"}},"line":{"style":{"fill":false,"stroke":"#6699FF"}}},"startText":{"visible":false},"endText":{"visible":false},"width":44}},"crosshair":{"trigger":"hover","bandField":{"visible":false,"line":{"type":"rect","visible":true,"style":{"fill":"#CCD7EB","opacity":0.7,"lineWidth":0,"stroke":{"type":"palette","key":"markLineStrokeColor"},"lineDash":[],"fillOpacity":0.4}},"label":{"visible":false,"style":{"fontWeight":"normal","fill":{"type":"palette","key":"axisMarkerFontColor"},"fontSize":{"type":"token","key":"l5FontSize"}},"labelBackground":{"padding":{"bottom":0,"top":0,"left":2,"right":2},"style":{"fill":{"type":"palette","key":"axisMarkerBackgroundColor"},"cornerRadius":1}}}},"linearField":{"visible":false,"line":{"type":"line","visible":true,"style":{"stroke":"#CCD7EB","fill":"transparent","opacity":0.7,"lineDash":[],"lineWidth":0.4}},"label":{"visible":false,"style":{"fontWeight":"normal","fill":{"type":"palette","key":"axisMarkerFontColor"},"fontSize":{"type":"token","key":"l5FontSize"}},"labelBackground":{"padding":{"bottom":0,"top":0,"left":2,"right":2},"style":{"fill":{"type":"palette","key":"axisMarkerBackgroundColor"},"cornerRadius":1}}}}},"player":{"visible":true,"position":"start","padding":{"top":20,"bottom":20},"slider":{"space":10,"trackStyle":{"fill":{"type":"palette","key":"sliderTrackColor"},"fillOpacity":0.8},"railStyle":{"fill":{"type":"palette","key":"sliderRailColor"}},"handlerStyle":{"size":15,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2,"fill":{"type":"palette","key":"playerControllerColor"}}},"controller":{"start":{"order":0,"space":10,"position":"start","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"pause":{"order":0,"space":10,"position":"start","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"backward":{"order":0,"space":10,"position":"start","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"forward":{"order":0,"space":10,"position":"start","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}}}},"brush":{"style":{"fill":"#B0C8F9","fillOpacity":0.2,"stroke":"#B0C8F9","lineWidth":2},"brushMode":"single","brushType":"rect","brushMoved":true,"removeOnClick":true,"delayType":"throttle","delayTime":0},"indicator":{"title":{"visible":true,"autoLimit":false,"autoFit":false,"style":{"fontSize":16,"fill":"#12141A","fontWeight":500,"fillOpacity":1,"textBaseline":"top","textAlign":"center"}},"content":{"visible":true,"style":{"fontSize":12,"fill":"#85878A","fontWeight":400,"fillOpacity":1,"textBaseline":"top","textAlign":"center"}}},"title":{"padding":{"top":4,"bottom":20},"textStyle":{"fontSize":{"type":"token","key":"l3FontSize"},"lineHeight":{"type":"token","key":"l3LineHeight"},"fill":{"type":"palette","key":"primaryFontColor"}},"subtextStyle":{"fontSize":{"type":"token","key":"l4FontSize"},"lineHeight":{"type":"token","key":"l4LineHeight"},"fill":{"type":"palette","key":"tertiaryFontColor"}}},"mapLabel":{"visible":true,"offset":12,"position":"top","space":10,"nameLabel":{"visible":true,"style":{"textBaseline":"middle","textAlign":"left","fill":"black","fontSize":{"type":"token","key":"l6FontSize"}}},"valueLabel":{"visible":true,"style":{"textBaseline":"middle","textAlign":"left","fill":"black","fontSize":{"type":"token","key":"l6FontSize"}}},"background":{"visible":true,"padding":{"top":4,"bottom":4,"left":6,"right":6},"style":{"cornerRadius":2,"lineWidth":1,"fill":"white","stroke":"grey"}},"leader":{"visible":false,"style":{"lineWidth":1,"stroke":"red"}}},"poptip":{"visible":true,"position":"auto","padding":8,"titleStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fontWeight":"bold","fill":{"type":"palette","key":"primaryFontColor"}},"contentStyle":{"fontSize":{"type":"token","key":"l5FontSize"},"fill":{"type":"palette","key":"primaryFontColor"}},"panel":{"visible":true,"fill":{"type":"palette","key":"popupBackgroundColor"},"cornerRadius":3,"lineWidth":0,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":0,"space":12}},"totalLabel":{"visible":false,"offset":5,"overlap":{"clampForce":true,"strategy":[]},"smartInvert":false,"animation":false,"style":{"fontSize":{"type":"token","key":"l4FontSize"},"fill":{"type":"palette","key":"primaryFontColor"}}},"scrollBar":{"horizontal":{"height":12,"slider":{"style":{"fill":"rgba(0,0,0,0.15)"}}},"vertical":{"width":12,"slider":{"style":{"fill":"rgba(0,0,0,0.15)"}}}}},"animationThreshold":2000,"type":"light","description":"light theme for ChartHub."} \ No newline at end of file diff --git a/packages/vchart-aurora-theme/src/common/color-scheme.ts b/packages/vchart-aurora-theme/src/common/color-scheme.ts index e310222..74cb2a5 100644 --- a/packages/vchart-aurora-theme/src/common/color-scheme.ts +++ b/packages/vchart-aurora-theme/src/common/color-scheme.ts @@ -1,68 +1,53 @@ import type { BuiltinColorPalette, IThemeColorScheme } from '@visactor/vchart'; -const defaultColor = [ +export const colorList = [ // 定义分类主题色 '#3377FF', '#1FE7F9', '#53F3B3', '#FFCD50', '#ADB8D6', - '#B46FF4', '#867AFF', '#FAA64D', - '#F25E68' + '#FF8082', + '#B46FF4' ]; -const BLACK_COLORS = { - 100: '#000', - 95: '#0D0D0D', - 85: '#262626', - 65: '#595959', - 45: '#8C8C8C', - 25: '#BFBFBF', - 15: '#D9D9D9', - 6: '#F0F0F0' -}; - -const WHITE_COLORS = { - 100: '#FFFFFF', - 95: '#F2F2F2', - 85: '#D9D9D9', - 65: '#A6A6A6', - 45: '#737373', - 25: '#404040', - 15: '#262626', - 6: '#0F0F0F' -}; - -const blackColorPalettes: Record = {}; -Object.entries(BLACK_COLORS).forEach(([key, value]) => { - blackColorPalettes[`blackColors${key}`] = value; -}); - -const whiteColorPalettes: Record = {}; -Object.entries(WHITE_COLORS).forEach(([key, value]) => { - whiteColorPalettes[`whiteColors${key}`] = value; -}); +export const nestColorList = [ + ['#3377FF', '#5587FD', '#76A4FF', '#A0C0FF', '#BFD4FF', '#E5EEFF'], + ['#1FE7F9', '#71F1FF', '#A2F5FF', '#BCF8FF', '#D2FAFF', '#E5FDFF'], + ['#53F3B3', '#6BFFC4', '#9FFFD9', '#C1FFE6', '#DCFFF1', '#EBFFF7'], + ['#FFCD50', '#FFD971', '#FFE395', '#FFEBB2', '#FEF2D1', '#FFF8E8'], + ['#ADB8D6', '#BEC8E4', '#CBD3ED', '#D9E0F5', '#E7ECFB', '#F2F5FF'], + ['#867AFF', '#9A8DFF', '#ACA1FF', '#C4BCFF', '#DBD6FF', '#EDEBFF'], + ['#FAA64D', '#FFB96F', '#FECB94', '#FFD8AD', '#FFE5C9', '#FFF4E9'], + ['#FF8082', '#FF99A0', '#FFBBBF', '#FFD4D7', '#FFE8EA', '#FFF7F8'], + ['#B46FF4', '#BF80FF', '#D1A4FD', '#E0C1FF', '#EDDAFF', '#F5ECFF'] +]; export const colorScheme: IThemeColorScheme = { default: { - dataScheme: defaultColor, + dataScheme: colorList, palette: { - bandColor: defaultColor[0], - + bandColor: colorList[0], /** 背景色 */ backgroundColor: 'transparent', + /** 主要字色 */ + primaryFontColor: '#17171A', + /** 次要字色 */ + secondaryFontColor: '#5E5F66', + /** 第三字色 */ + tertiaryFontColor: '#888888', + /** 轴线颜色 */ axisDomainColor: '#DCDEE1', /** 轴标签字色 */ - axisLabelFontColor: '#909199', + axisLabelFontColor: '#888888', /** 轴网格线颜色 */ - axisGridColor: '#E1E2E5', - - ...blackColorPalettes, - ...whiteColorPalettes + axisGridColor: '#EFF0F2', + /** 浮层背景区域颜色 */ + popupBackgroundColor: '#ffffff' } as unknown as BuiltinColorPalette } }; diff --git a/packages/vchart-aurora-theme/src/common/component/crosshair.ts b/packages/vchart-aurora-theme/src/common/component/crosshair.ts index 1f11492..b0f24a9 100644 --- a/packages/vchart-aurora-theme/src/common/component/crosshair.ts +++ b/packages/vchart-aurora-theme/src/common/component/crosshair.ts @@ -1,33 +1,22 @@ import type { ICrosshairTheme } from '@visactor/vchart'; export const crosshair: ICrosshairTheme = { - trigger: 'hover', - bandField: { + xField: { line: { - type: 'rect', - visible: true, + type: 'rect', // 设置为矩形类型 style: { - fill: '#CCD7EB', - fillOpacity: 0.4, - lineDash: [] + fill: { + gradient: 'linear', // 线性渐变 + x0: 0, + y0: 0, + x1: 0, + y1: 1, + stops: [ + { offset: 0, color: 'rgba(51, 119, 255, 0.1)' }, + { offset: 1, color: 'rgba(118, 164, 255, 0.1)' } + ] + } } - }, - label: { - visible: false - } - }, - linearField: { - visible: false, - line: { - type: 'line', - style: { - stroke: '#CCD7EB', - lineWidth: 0.4, - lineDash: [] - } - }, - label: { - visible: false } } }; diff --git a/packages/vchart-aurora-theme/src/common/component/legend.ts b/packages/vchart-aurora-theme/src/common/component/legend.ts index 802f34b..419fff4 100644 --- a/packages/vchart-aurora-theme/src/common/component/legend.ts +++ b/packages/vchart-aurora-theme/src/common/component/legend.ts @@ -1,32 +1,15 @@ import type { IComponentTheme } from '@visactor/vchart'; -const commonColorLegendTheme = { - handlerText: { - space: 10, - style: { - fontSize: 12, - fill: '#2C3542' - } - }, - title: { - space: 5, - style: { - fontSize: 12, - fill: '#2C3542' - } - } -}; - export const legend: Partial = { discreteLegend: { visible: true, orient: 'top', + position: 'middle', padding: [8, 8, 8, 8], maxRow: 1, title: { visible: false, textStyle: { - fill: { type: 'palette', key: 'blackColors45' }, fontSize: 12, lineHeight: 21 } @@ -44,13 +27,12 @@ export const legend: Partial = { style: { size: 8, symbolType: 'circle' - }, - state: { unSelected: { fill: '#D8D8D8' } } + } }, label: { space: 100, style: { - fill: '#85878A', + fill: '#585858', fontSize: 12, lineHeight: 12, opacity: 1, @@ -58,74 +40,11 @@ export const legend: Partial = { }, state: { unSelected: { - fill: '#D8D8D8', opacity: 1 } } } }, - pager: { - handler: { - space: 8, - style: { - size: 10, - fill: { - type: 'palette', - key: 'blackColors100' - } - } - }, - textStyle: { - fill: { type: 'palette', key: 'blackColors45' }, - fontSize: 10 - } - }, allowAllCanceled: false - }, - colorLegend: { - horizontal: { - ...commonColorLegendTheme, - handler: { - style: { - symbolType: 'rectRound', - size: 16, - scaleX: 0.5, - fill: '#fff', - lineWidth: 1, - stroke: '#99B0F3', - radius: 2, - outerBorder: null - } - }, - rail: { - height: 4, - width: 100, - style: { - fill: '#DCDEE2' - } - } - }, - vertical: { - ...commonColorLegendTheme, - handler: { - style: { - symbolType: 'rectRound', - size: 16, - scaleY: 0.5, - fill: '#fff', - lineWidth: 1, - stroke: '#99B0F3', - radius: 2, - outerBorder: null - } - }, - rail: { - width: 4, - height: 100, - style: { - fill: '#DCDEE2' - } - } - } } }; diff --git a/packages/vchart-aurora-theme/src/common/component/tooltip.ts b/packages/vchart-aurora-theme/src/common/component/tooltip.ts index cf04faa..a2ff0b1 100644 --- a/packages/vchart-aurora-theme/src/common/component/tooltip.ts +++ b/packages/vchart-aurora-theme/src/common/component/tooltip.ts @@ -1,60 +1,8 @@ import type { ITooltipTheme } from '@visactor/vchart'; export const tooltip: ITooltipTheme = { - offset: { x: 16, y: 16 }, - panel: { - padding: { top: 12, left: 12, right: 12, bottom: 12 }, - backgroundColor: { - type: 'palette', - key: 'popupBackgroundColor' - } as any, - border: { - color: { - type: 'palette', - key: 'popupBackgroundColor' - } as any, - width: 0, - radius: 3 - }, - shadow: { - x: 0, - y: 0, - blur: 10, - spread: 0, - color: '#aeaeae' - } - }, - spaceRow: 12, - titleLabel: { - fontSize: 12, - lineHeight: 12, - fontColor: '#1D1D2E', - fontWeight: '500', - textAlign: 'left', - textBaseline: 'middle', - spacing: 0 - }, - shape: { size: 8, spacing: 8 }, - keyLabel: { - fontSize: 12, - lineHeight: 12, - fontColor: { - type: 'palette', - key: 'blackColors65' - } as any, - textAlign: 'left', - textBaseline: 'middle', - spacing: 12 - }, - valueLabel: { - fontSize: 12, - lineHeight: 12, - fontColor: { - type: 'palette', - key: 'blackColors65' - } as any, - fontWeight: 'normal', - textBaseline: 'middle', - spacing: 0 + dimension: { + shapeType: 'circle', + shapeSize: 8 } }; diff --git a/packages/vchart-aurora-theme/src/common/mark.ts b/packages/vchart-aurora-theme/src/common/mark.ts deleted file mode 100644 index 13971f2..0000000 --- a/packages/vchart-aurora-theme/src/common/mark.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { IGlobalMarkThemeByName } from '@visactor/vchart'; - -export const markByName: IGlobalMarkThemeByName = { - label: { - style: { - fontSize: 12, - fill: { type: 'palette', key: 'blackColors65' }, - lineWidth: 0 - } - } -}; diff --git a/packages/vchart-aurora-theme/src/common/series/area.ts b/packages/vchart-aurora-theme/src/common/series/area.ts index 3e0bdce..0192ef5 100644 --- a/packages/vchart-aurora-theme/src/common/series/area.ts +++ b/packages/vchart-aurora-theme/src/common/series/area.ts @@ -12,24 +12,62 @@ export const area: Pick< lineWidth: 2, shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 3, - stroke: { type: 'palette', key: 'whiteColors100' } + stroke: '#fff' + }, + state: { + dimension_hover: { + visible: true + } } }, line: { style: { curveType: 'monotone', - lineWidth: 2 + lineWidth: 2, + stroke: { + gradient: 'linear', + x0: 0, + y0: 0, + x1: 1, + y1: 0, + stops: [ + { + offset: 0, + opacity: 0.7 + }, + { + offset: 1, + opacity: 1 + } + ] + } } }, area: { style: { - fillOpacity: 0.25, - lineWidth: 2 + // lineWidth: 2, + fill: { + gradient: 'linear', + x0: 0, + y0: 0, + x1: 0, + y1: 1, + stops: [ + { + offset: 0, + opacity: 0.7 + }, + { + offset: 1, + opacity: 0 + } + ] + } }, state: { - selected: { - fillOpacity: 0.5 - } + // selected: { + // fillOpacity: 0.5 + // } } } } diff --git a/packages/vchart-aurora-theme/src/common/series/bar.ts b/packages/vchart-aurora-theme/src/common/series/bar.ts index d3c89b5..3160edd 100644 --- a/packages/vchart-aurora-theme/src/common/series/bar.ts +++ b/packages/vchart-aurora-theme/src/common/series/bar.ts @@ -1,19 +1,46 @@ import type { ISeriesTheme, SeriesTypeEnum, SeriesTypeForThemeEnum } from '@visactor/vchart'; const bar: ISeriesTheme['bar'] = { - barMaxWidth: 8, - // @ts-ignore - barGapInGroup: 4, // FIXME: typeError - label: { + barMaxWidth: 16, + barGapInGroup: 2, + // barMinHeight: 2, + bar: { style: { - fill: { type: 'palette', key: 'secondaryFontColor' } + // @ts-ignore + visible: datum => datum.value > 0, // 数据为0时隐藏柱子 + outerBorder: { + stroke: ['white', false, false, false], + lineWidth: 1 + } + } + }, + legends: { + visible: true, + item: { + shape: { + visible: true, + style: { + symbolType: 'circle' + } + } + } + }, + tooltip: { + visible: true, + activeType: 'dimension', + mark: { + shapeType: 'circle' + }, + dimension: { + visible: true, + shapeType: 'circle' } } }; const bar_horizontal: ISeriesTheme['bar'] = { // @ts-ignore - stackCornerRadius: [0, 1, 1, 0], // FIXME: typeError + stackCornerRadius: [0, 2, 2, 0], // FIXME: typeError label: { position: 'right', offset: 4 @@ -22,7 +49,7 @@ const bar_horizontal: ISeriesTheme['bar'] = { const bar_vertical: ISeriesTheme['bar'] = { // @ts-ignore - stackCornerRadius: [1, 1, 0, 0], // FIXME: typeError + stackCornerRadius: [2, 2, 0, 0], // FIXME: typeError, label: { position: 'top', offset: 4 diff --git a/packages/vchart-aurora-theme/src/common/series/line.ts b/packages/vchart-aurora-theme/src/common/series/line.ts index 29e11ec..46b3440 100644 --- a/packages/vchart-aurora-theme/src/common/series/line.ts +++ b/packages/vchart-aurora-theme/src/common/series/line.ts @@ -4,7 +4,24 @@ export const line: ISeriesTheme['line'] = { line: { style: { lineWidth: 2, - curveType: 'monotone' + curveType: 'monotone', + stroke: { + gradient: 'linear', + x0: 0, + y0: 0, + x1: 1, + y1: 0, + stops: [ + { + offset: 0, + opacity: 0.7 + }, + { + offset: 1, + opacity: 1 + } + ] + } } }, point: { @@ -14,7 +31,12 @@ export const line: ISeriesTheme['line'] = { lineWidth: 2, shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 3, - stroke: { type: 'palette', key: 'whiteColors100' } + stroke: '#fff' + }, + state: { + dimension_hover: { + visible: true + } } }, label: { diff --git a/packages/vchart-aurora-theme/src/common/series/pie.ts b/packages/vchart-aurora-theme/src/common/series/pie.ts index 20f0259..be08a5a 100644 --- a/packages/vchart-aurora-theme/src/common/series/pie.ts +++ b/packages/vchart-aurora-theme/src/common/series/pie.ts @@ -8,7 +8,8 @@ export const pie: ISeriesTheme['pie'] = { padAngle: 0, stroke: '#fff', lineWidth: 2, - lineJoin: 'round' + lineJoin: 'round', + cornerRadius: 2 }, state: { hover: { @@ -23,6 +24,41 @@ export const pie: ISeriesTheme['pie'] = { }, label: { visible: true, - position: 'outside' + position: 'outside', + formatMethod: (label, data) => { + return { + type: 'rich', + text: [ + { + text: `${data?.value}\n`, + fill: '#111', + fontSize: 16, + fontWeight: 500, + fontFamily: 'douyinNumber', + stroke: false + }, + { + text: data?.type, + fill: '#606165', + fontSize: 12, + fontWeight: 400, + stroke: false + } + ] + }; + }, + line: { + style: { + lineWidth: 2 + } + }, + style: { + type: 'rich', + boundsPadding: [6, 0, 6, 0] + }, + legend: { + visible: true, + orient: 'bottom' + } } }; diff --git a/packages/vchart-aurora-theme/src/index.ts b/packages/vchart-aurora-theme/src/index.ts index e10bd6d..280cb64 100644 --- a/packages/vchart-aurora-theme/src/index.ts +++ b/packages/vchart-aurora-theme/src/index.ts @@ -1,5 +1,5 @@ import type { ITheme } from '@visactor/vchart'; -import { colorScheme } from './common/color-scheme'; +import { colorScheme, colorList, nestColorList } from './common/color-scheme'; import { axis } from './common/component/axis'; import { axisPolar } from './common/component/polar-axis'; @@ -28,35 +28,37 @@ import { radar } from './common/series/radar'; export const chartAuroraTheme: ITheme = { name: 'aurora', type: 'light', - description: 'light theme for ChartHub.', + description: 'light theme for Aurora.', colorScheme, - token, + // token, component: { - ...axis, + // ...axis, ...legend, - ...axisPolar, + // ...axisPolar, tooltip, - crosshair, - indicator, - markLine, - markArea, - markPoint, - dataZoom, - scrollBar + crosshair + // indicator, + // markLine, + // markArea, + // markPoint, + // dataZoom, + // scrollBar }, series: { - ...area, - ...bar, - ...gauge, - line, - scatter, pie, - funnel, - treemap, - heatmap, - radar - }, - markByName + ...bar, + ...area, + line + + // ...gauge, + // scatter, + // funnel, + // treemap, + // heatmap, + // radar + } }; +export { colorList, nestColorList }; + export const allThemeMap = new Map([[chartAuroraTheme.name, chartAuroraTheme]]) as Map; From 3d3ee95d38a16e5b847590bd3a5b6ef792322ab6 Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Wed, 11 Mar 2026 21:43:25 +0800 Subject: [PATCH 11/14] =?UTF-8?q?fix(tooltip):=20=E4=BF=AE=E6=94=B9tooltip?= =?UTF-8?q?=E5=9B=BE=E5=BD=A2=E5=BD=A2=E7=8A=B6=E4=B8=BA=E5=9C=86=E5=BD=A2?= =?UTF-8?q?=E4=BB=A5=E5=8C=B9=E9=85=8D=E5=9B=BE=E4=BE=8B=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=20refactor(legend):=20=E7=AE=80=E5=8C=96=E5=9B=BE=E4=BE=8B?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=85=8D=E7=BD=AE=20chore(deps):=20=E5=8D=87?= =?UTF-8?q?=E7=BA=A7@visactor/vchart=E5=8F=8A=E7=9B=B8=E5=85=B3=E4=BE=9D?= =?UTF-8?q?=E8=B5=96=E8=87=B32.0.19=E7=89=88=E6=9C=AC=20docs:=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=BC=80=E5=8F=91=E6=8C=87=E5=8D=97=E5=92=8C=E4=BB=BB?= =?UTF-8?q?=E5=8A=A1=E5=88=97=E8=A1=A8=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- common/config/rush/pnpm-lock.yaml | 567 ++++++++++++------ packages/vchart-arco-theme/package.json | 4 +- .../.trae/AI_DEVELOPMENT_GUIDE.md | 52 ++ packages/vchart-aurora-theme/.trae/TASKS.md | 64 ++ .../vchart-aurora-theme/demo/src/chartSpec.ts | 14 +- packages/vchart-aurora-theme/package.json | 5 +- .../src/common/component/legend.ts | 18 +- .../src/common/component/tooltip.ts | 4 +- packages/vchart-semi-theme/package.json | 4 +- packages/vchart-theme-converter/package.json | 4 +- .../vchart-theme-demo-component/package.json | 4 +- packages/vchart-theme-utils/package.json | 4 +- packages/vchart-theme/package.json | 4 +- .../vchart-tt-platform-theme/package.json | 4 +- packages/vchart-ve-o-theme/package.json | 4 +- share/chart-demo/package.json | 4 +- 16 files changed, 535 insertions(+), 225 deletions(-) create mode 100644 packages/vchart-aurora-theme/.trae/AI_DEVELOPMENT_GUIDE.md create mode 100644 packages/vchart-aurora-theme/.trae/TASKS.md diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index f059c45..4d617b5 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -31,8 +31,8 @@ importers: '@types/react-dom': ^17.0.0 '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 '@vitejs/plugin-react-swc': ^3.4.1 @@ -102,8 +102,8 @@ importers: '@types/react-dom': 17.0.25 '@typescript-eslint/eslint-plugin': 5.30.0_cow5zg7tx6c3eisi5a4ud5kwia '@typescript-eslint/parser': 5.30.0_vwud3sodsb5zxmzckoj7rdwdbq - '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@vitejs/plugin-react': 4.2.1_vite@4.5.3 '@vitejs/plugin-react-swc': 3.6.0_vite@4.5.3 classnames: 2.5.1 @@ -164,8 +164,8 @@ importers: '@types/jest': ~29.5.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 '@vitejs/plugin-react-swc': ^3.4.1 @@ -178,6 +178,7 @@ importers: react: ^18.0.0 react-device-detect: ^2.2.2 react-dom: ^18.0.0 + sass: ^1.63.6 ts-jest: ~29.1.0 ts-loader: 8.0.2 ts-node: 10.9.0 @@ -190,8 +191,8 @@ importers: '@visactor/vchart-theme-utils': link:../vchart-theme-utils devDependencies: '@babel/runtime': 7.28.6 - '@douyinfe/semi-icons': 2.90.13_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.90.13_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-icons': 2.92.2_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.92.2_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 @@ -205,8 +206,8 @@ importers: '@types/jest': 29.5.12 '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 - '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@vitejs/plugin-react': 4.2.1_vite@4.5.3 '@vitejs/plugin-react-swc': 3.6.0_vite@4.5.3 eslint: 8.18.0 @@ -218,13 +219,14 @@ importers: react: 18.2.0 react-device-detect: 2.2.3_biqbaboplfbrettd7655fr4n2y react-dom: 18.2.0_react@18.2.0 + sass: 1.98.0 ts-jest: 29.1.2_doipufordlnvh5g4adbwayvyvy ts-loader: 8.0.2_typescript@4.9.5 ts-node: 10.9.0_misjo77sqtw74jgpkxp7bulu2q tslib: 2.3.1 tslint: 5.12.1_typescript@4.9.5 typescript: 4.9.5 - vite: 4.5.3_@types+node@20.12.7 + vite: 4.5.3_drwgbx6kncedk3tgksguhmevgq vite-plugin-svgr: 4.2.0_phsvvvlejkpjhjvgxznbnrvcoa ../../packages/vchart-semi-theme: @@ -245,8 +247,8 @@ importers: '@types/jest': ~29.5.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 '@vitejs/plugin-react-swc': ^3.4.1 @@ -271,8 +273,8 @@ importers: '@visactor/vchart-theme-utils': link:../vchart-theme-utils devDependencies: '@babel/runtime': 7.28.6 - '@douyinfe/semi-icons': 2.90.13_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.90.13_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-icons': 2.92.2_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.92.2_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 @@ -286,8 +288,8 @@ importers: '@types/jest': 29.5.12 '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 - '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@vitejs/plugin-react': 4.2.1_vite@4.5.3 '@vitejs/plugin-react-swc': 3.6.0_vite@4.5.3 eslint: 8.18.0 @@ -320,11 +322,11 @@ importers: '@types/jest': ~29.5.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 + '@visactor/vchart': 2.0.19 '@visactor/vchart-arco-theme': workspace:1.12.3 '@visactor/vchart-semi-theme': workspace:1.12.3 '@visactor/vchart-tt-platform-theme': workspace:1.12.3 - '@visactor/vchart-types': 1.12.1 + '@visactor/vchart-types': 2.0.19 '@visactor/vchart-ve-o-theme': workspace:1.12.3 eslint: ~8.18.0 husky: 7.0.4 @@ -352,11 +354,11 @@ importers: '@types/jest': 29.5.12 '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 + '@visactor/vchart': 2.0.19 '@visactor/vchart-arco-theme': link:../vchart-arco-theme '@visactor/vchart-semi-theme': link:../vchart-semi-theme '@visactor/vchart-tt-platform-theme': link:../vchart-tt-platform-theme - '@visactor/vchart-types': 1.12.1 + '@visactor/vchart-types': 2.0.19 '@visactor/vchart-ve-o-theme': link:../vchart-ve-o-theme eslint: 8.18.0 husky: 7.0.4 @@ -401,8 +403,8 @@ importers: '@types/react-dom': ^17.0.0 '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-semi-theme': workspace:1.12.3 '@visactor/vchart-theme': workspace:1.12.3 '@visactor/vutils': ~0.18.15 @@ -476,8 +478,8 @@ importers: '@types/react-dom': 17.0.25 '@typescript-eslint/eslint-plugin': 5.30.0_cow5zg7tx6c3eisi5a4ud5kwia '@typescript-eslint/parser': 5.30.0_vwud3sodsb5zxmzckoj7rdwdbq - '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@visactor/vchart-semi-theme': link:../vchart-semi-theme '@visactor/vchart-theme': link:../vchart-theme '@vitejs/plugin-react': 4.2.1_vite@4.5.3 @@ -539,8 +541,8 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': ^17.0.0 '@types/react-dom': ^17.0.0 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-theme': workspace:1.12.3 '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 @@ -552,8 +554,8 @@ importers: vite: ^4.5.0 dependencies: '@arco-design/web-react': 2.61.2_42iwexueogtmu5amowprdpoisy - '@douyinfe/semi-icons': 2.90.13_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.90.13_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-icons': 2.92.2_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.92.2_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@visactor/vchart-theme': link:../vchart-theme '@visactor/vchart-theme-utils': link:../vchart-theme-utils @@ -568,8 +570,8 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': 17.0.80 '@types/react-dom': 17.0.25 - '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@vitejs/plugin-react': 4.2.1_vite@4.5.3 eslint: 8.18.0 react: 18.2.0 @@ -589,8 +591,8 @@ importers: '@types/jest': ~29.5.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 - '@visactor/vchart-types': 1.12.1 + '@visactor/vchart': 2.0.19 + '@visactor/vchart-types': 2.0.19 eslint: ~8.18.0 husky: 7.0.4 jest: ~29.5.0 @@ -616,8 +618,8 @@ importers: '@types/jest': 29.5.12 '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 - '@visactor/vchart-types': 1.12.1 + '@visactor/vchart': 2.0.19 + '@visactor/vchart-types': 2.0.19 eslint: 8.18.0 husky: 7.0.4 jest: 29.5.0_nfgaym6ygctcxvhgdn7jfhc2pq @@ -653,8 +655,8 @@ importers: '@types/jest': ~29.5.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-semi-theme': workspace:1.12.3 '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 @@ -682,8 +684,8 @@ importers: '@visactor/vchart-theme-utils': link:../vchart-theme-utils devDependencies: '@babel/runtime': 7.28.6 - '@douyinfe/semi-icons': 2.90.13_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.90.13_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-icons': 2.92.2_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.92.2_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 @@ -698,8 +700,8 @@ importers: '@types/jest': 29.5.12 '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 - '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@vitejs/plugin-react': 4.2.1_vite@4.5.3 '@vitejs/plugin-react-swc': 3.6.0_vite@4.5.3 eslint: 8.18.0 @@ -747,8 +749,8 @@ importers: '@types/react-dom': ^17.0.0 '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-arco-theme': workspace:1.12.3 '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 @@ -816,8 +818,8 @@ importers: '@types/react-dom': 17.0.25 '@typescript-eslint/eslint-plugin': 5.30.0_cow5zg7tx6c3eisi5a4ud5kwia '@typescript-eslint/parser': 5.30.0_vwud3sodsb5zxmzckoj7rdwdbq - '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@vitejs/plugin-react': 4.2.1_vite@4.5.3 '@vitejs/plugin-react-swc': 3.6.0_vite@4.5.3 classnames: 2.5.1 @@ -867,8 +869,8 @@ importers: '@types/jest': ~29.5.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 - '@visactor/vchart-types': 1.12.1 + '@visactor/vchart': 2.0.19 + '@visactor/vchart-types': 2.0.19 eslint: ~8.18.0 husky: 7.0.4 jest: ~29.5.0 @@ -892,8 +894,8 @@ importers: '@types/jest': 29.5.12 '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 - '@visactor/vchart-types': 1.12.1 + '@visactor/vchart': 2.0.19 + '@visactor/vchart-types': 2.0.19 eslint: 8.18.0 husky: 7.0.4 jest: 29.5.0_nfgaym6ygctcxvhgdn7jfhc2pq @@ -2485,8 +2487,8 @@ packages: memoize-one: 5.2.1 scroll-into-view-if-needed: 2.2.31 - /@douyinfe/semi-icons-lab/2.90.13_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-/3ihlPM1F2XHB4IucYDyDkkZVQ5h43bSJksAwnnMwiDRCiwvfk1vMPruwWdJ6tFoIBANYo/qjyZHv1MwNH/Gmg==} + /@douyinfe/semi-icons-lab/2.92.2_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-fji8IsmaktOYztG2HSezObFgejz7WEBWT/X52jj48k8Mz3cOJxD6vZyzmttfvpQPKH2/G0KpmxbkQ3cNHOiHFQ==} peerDependencies: react: '>=16.0.0' react-dom: '>=16.0.0' @@ -2502,8 +2504,8 @@ packages: classnames: 2.5.1 react: 18.2.0 - /@douyinfe/semi-icons/2.90.13_react@18.2.0: - resolution: {integrity: sha512-9OiKvleOMB+t0h+Vbq/6Tz90JJPANJDvW5g3XtVWmIwIgScgy/N52fMhWXDf6Avr6wi9MDPcQZ6SYPO2S7m4sQ==} + /@douyinfe/semi-icons/2.92.2_react@18.2.0: + resolution: {integrity: sha512-+fgK2Oe2+uokQZnrd+rHgksmfvDVvqT1fhbl49qJlDsg/xaXRxI2LOQRqBI+x0sOKabGKem+P3lY24Jgd/IGnQ==} peerDependencies: react: '>=16.0.0' dependencies: @@ -3193,6 +3195,149 @@ packages: rimraf: 3.0.2 dev: true + /@parcel/watcher-android-arm64/2.5.6: + resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-darwin-arm64/2.5.6: + resolution: {integrity: sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-darwin-x64/2.5.6: + resolution: {integrity: sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-freebsd-x64/2.5.6: + resolution: {integrity: sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-arm-glibc/2.5.6: + resolution: {integrity: sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==} + engines: {node: '>= 10.0.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-arm-musl/2.5.6: + resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==} + engines: {node: '>= 10.0.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-arm64-glibc/2.5.6: + resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-arm64-musl/2.5.6: + resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-x64-glibc/2.5.6: + resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-x64-musl/2.5.6: + resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-win32-arm64/2.5.6: + resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-win32-ia32/2.5.6: + resolution: {integrity: sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==} + engines: {node: '>= 10.0.0'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-win32-x64/2.5.6: + resolution: {integrity: sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher/2.5.6: + resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==} + engines: {node: '>= 10.0.0'} + requiresBuild: true + dependencies: + detect-libc: 2.1.2 + is-glob: 4.0.3 + node-addon-api: 7.1.1 + picomatch: 4.0.3 + optionalDependencies: + '@parcel/watcher-android-arm64': 2.5.6 + '@parcel/watcher-darwin-arm64': 2.5.6 + '@parcel/watcher-darwin-x64': 2.5.6 + '@parcel/watcher-freebsd-x64': 2.5.6 + '@parcel/watcher-linux-arm-glibc': 2.5.6 + '@parcel/watcher-linux-arm-musl': 2.5.6 + '@parcel/watcher-linux-arm64-glibc': 2.5.6 + '@parcel/watcher-linux-arm64-musl': 2.5.6 + '@parcel/watcher-linux-x64-glibc': 2.5.6 + '@parcel/watcher-linux-x64-musl': 2.5.6 + '@parcel/watcher-win32-arm64': 2.5.6 + '@parcel/watcher-win32-ia32': 2.5.6 + '@parcel/watcher-win32-x64': 2.5.6 + dev: true + optional: true + /@resvg/resvg-js-android-arm-eabi/2.4.1: resolution: {integrity: sha512-AA6f7hS0FAPpvQMhBCf6f1oD1LdlqNXKCxAAPpKh6tR11kqV0YIB9zOlIYgITM14mq2YooLFl6XIbbvmY+jwUw==} engines: {node: '>= 10'} @@ -4483,53 +4628,60 @@ packages: '@typescript-eslint/types': 5.30.0 eslint-visitor-keys: 3.4.3 - /@visactor/react-vchart/1.12.1_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-nQLsj6zQf/a6cClABbGKgwFYTSqFJ7ZWBAt0YjePEBHI8xERsVpD2lgEYXFqkA822QIFGv9wk82NeJXRkT8oJA==} + /@visactor/react-vchart/2.0.19_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-gLEJ8Q6DhI21xX6PDUEmhSUu4Ft8+Foho7TktiMMX6Nll5RYgXagjtjRAI1kSSKm6t/7ZXbBsmP4RdL+KaGtNA==} peerDependencies: react: '>=16.0.0' react-dom: '>=16.0.0' dependencies: - '@visactor/vchart': 1.12.1 - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vutils': 0.18.15 + '@visactor/vchart': 2.0.19 + '@visactor/vchart-extension': 2.0.19 + '@visactor/vrender-core': 1.0.41 + '@visactor/vrender-kits': 1.0.41 + '@visactor/vutils': 1.0.23 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 react-is: 18.2.0 dev: true - /@visactor/vchart-types/1.12.1: - resolution: {integrity: sha512-jr6yw2kYFVbxAWPT3G50ZykXGm3//NMG0KhVFE7g6/VPDFIhb8HAAVkb5g/taybOxSAVbCZ3yHUbbe2ZhhBWgA==} + /@visactor/vchart-extension/2.0.19: + resolution: {integrity: sha512-SCFysGMRGdNK6wYFKDrvZzGdYbVjGhdbqlWA5t2fdbuVcCN7wNBTDKI+pL4yUL3n9M1ZtVxQp5uOw9I0AjFHZQ==} + dependencies: + '@visactor/vchart': 2.0.19 + '@visactor/vdataset': 1.0.23 + '@visactor/vlayouts': 1.0.23 + '@visactor/vrender-animate': 1.0.41 + '@visactor/vrender-components': 1.0.41 + '@visactor/vrender-core': 1.0.41 + '@visactor/vrender-kits': 1.0.41 + '@visactor/vutils': 1.0.23 dev: true - /@visactor/vchart/1.12.1: - resolution: {integrity: sha512-/MSNRN2+gL8lgmXw3IQw9oG2ORxp1Kehvd4p4W95yd8EK6CVwYMRqredT84J3kr4jOtpK2a3ylsWNMUNFk8CrQ==} + /@visactor/vchart-types/2.0.19: + resolution: {integrity: sha512-G3MaSthmlDPzcTMN/XlqPSzihDneh6lXZZ3MAqEUeamvoOSHPJPAcwe7PFE4tOFwthAgM43j+W3d2sbtujkzOg==} + dev: true + + /@visactor/vchart/2.0.19: + resolution: {integrity: sha512-pPNAHUuNlw1FNgbSSwT9comeJUXpaTAe8yed1MVI5rT+TspIg9Wpio29ZlUjrevUxosQqka5VAD63jQS6PMaOg==} dependencies: - '@visactor/vdataset': 0.18.15 - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-hierarchy': 0.14.0 - '@visactor/vgrammar-projection': 0.14.0 - '@visactor/vgrammar-sankey': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vgrammar-venn': 0.14.0 - '@visactor/vgrammar-wordcloud': 0.14.0 - '@visactor/vgrammar-wordcloud-shape': 0.14.0 - '@visactor/vrender-components': 0.20.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 - '@visactor/vutils-extension': 1.12.1 + '@visactor/vdataset': 1.0.23 + '@visactor/vlayouts': 1.0.23 + '@visactor/vrender-animate': 1.0.41 + '@visactor/vrender-components': 1.0.41 + '@visactor/vrender-core': 1.0.41 + '@visactor/vrender-kits': 1.0.41 + '@visactor/vscale': 1.0.23 + '@visactor/vutils': 1.0.23 + '@visactor/vutils-extension': 2.0.19 dev: true - /@visactor/vdataset/0.18.15: - resolution: {integrity: sha512-LWaaunGetH8ThWjz6CE7NMG/LcFS41lTl76UCNJM1msfQxyIsbtoHim7t+Hdvud76oRZM0rxX/V4iB/+JpMRfw==} + /@visactor/vdataset/1.0.23: + resolution: {integrity: sha512-zrLk9FBUWJoW6b30XnPKzXwAXl8USdLDfed6QZLsmdkylRU8V7yZeXE2aKwU8Lg1U4HmQngqmqOx7/QlbX44Tg==} dependencies: '@turf/flatten': 6.5.0 '@turf/helpers': 6.5.0 '@turf/rewind': 6.5.0 - '@visactor/vutils': 0.18.15 + '@visactor/vutils': 1.0.23 d3-dsv: 2.0.0 d3-geo: 1.12.1 d3-hexbin: 0.2.2 @@ -4545,129 +4697,62 @@ packages: topojson-client: 3.1.0 dev: true - /@visactor/vgrammar-coordinate/0.14.0: - resolution: {integrity: sha512-9ZxQ0BQmcxi70Bl5oHRe2xd4UVPTbjdHhyQOIT1l4X6fVUwyIf2nRibQILHOlQj+KN8AhrdQIuYp1rD6khecpg==} - dependencies: - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vgrammar-core/0.14.0: - resolution: {integrity: sha512-VZu/9cPkjrG6xVx4KeV5zJpEYKfqMR4vov3nIKqgXgIuKgqLcVSrsFsthoYu9qi8xCbPtgZSFI2yo0qiB9wN3g==} + /@visactor/vlayouts/1.0.23: + resolution: {integrity: sha512-fK1f5LmuumhYanLArk5yrT4BZxu4IAmdc8WMwfB/KAvV+2dTPFuBUMWbWnDl0siQoU9SX9l/bLozUnI9n7BwBQ==} dependencies: - '@visactor/vdataset': 0.18.15 - '@visactor/vgrammar-coordinate': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-components': 0.20.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vgrammar-hierarchy/0.14.0: - resolution: {integrity: sha512-Tme/aCx3m+tKcUu5X5BJLqc654YzNXpCc29s6T97DEev1PCvyGeTf/lvBUirnfSBkgoCbrfDZVpK/zOAUtrC0g==} - dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vgrammar-projection/0.14.0: - resolution: {integrity: sha512-/Y1ffjMl1j8X7TXHrni9IBQJkL7q1yzVaFILhXUjY3NnYXWuDGJKEgK1BX3KbJhZzGLjDLeRVATvSYN1pzkO4A==} - dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vutils': 0.18.15 - d3-geo: 1.12.1 - dev: true - - /@visactor/vgrammar-sankey/0.14.0: - resolution: {integrity: sha512-VVnmi7znTYnDQNAxW0stK14LSVFKSQe/flnavkVds91tgtT5+RBLE09Vqz9eH45n23nxHEfwrWA4sHiWfQ8mLg==} - dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vgrammar-util/0.14.0: - resolution: {integrity: sha512-h838qgT6IFHYtugTf7sC+rRvz2aU/W0EEnXX/cEeyvMAkuBgdC0Jq6vmGYAbmm+hwbhUREC5QvxudwSEEKCelg==} - dependencies: - '@visactor/vrender-core': 0.20.0 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vgrammar-venn/0.14.0: - resolution: {integrity: sha512-l8w802GiSs3oRhn9lvt5YERyQwvgaCHXlOMU26tQqssrR0u6tbdH0Q+crqL6jzLktwzVVfbVPRC3q1pBQU6geQ==} - dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vutils': 0.18.15 + '@turf/helpers': 6.5.0 + '@turf/invariant': 6.5.0 + '@visactor/vscale': 1.0.23 + '@visactor/vutils': 1.0.23 + eventemitter3: 4.0.7 dev: true - /@visactor/vgrammar-wordcloud-shape/0.14.0: - resolution: {integrity: sha512-gDMTVaryB37uTZSXYpf0Zih894lHVJQRrPZYSiHvu5Jj9FZcisqBU+G8Q1Lo4WZJVhfWvCeuv9tYHtR9Gvuw3A==} + /@visactor/vrender-animate/1.0.41: + resolution: {integrity: sha512-kdMoIh7OEo6z4rZfnJHX7d+izBhGVWq6MR22uppk0LPilfdBd/1hSNAEKO6C9JWAy5uROGFpEkh+kk+ar/zSZg==} dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 + '@visactor/vrender-core': 1.0.41 + '@visactor/vutils': 1.0.23 dev: true - /@visactor/vgrammar-wordcloud/0.14.0: - resolution: {integrity: sha512-NYzNS9vKuZJJUvqshxA88ScH7fB57tdO/wvtBYTDwRp249xqK/uzrAtaOgzNj4bJ5vwu//R+i5hYOjzdQABebw==} + /@visactor/vrender-components/1.0.41: + resolution: {integrity: sha512-B7iXJE1TdkYapPZN6DNxoaErY4FzGf5AbcbG/z6Q0hnzO4Iw1hKdtlTGOIYA1+JXhehDWcyy+D0bnoNQNf+rgw==} dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vutils': 0.18.15 + '@visactor/vrender-animate': 1.0.41 + '@visactor/vrender-core': 1.0.41 + '@visactor/vrender-kits': 1.0.41 + '@visactor/vscale': 1.0.23 + '@visactor/vutils': 1.0.23 dev: true - /@visactor/vrender-components/0.20.0: - resolution: {integrity: sha512-nZUtFF1Kg8xjDGGIVeBdAOjxWW+jibUV4ltF1G/Z4GaHYUzpYfifWVrPBpo4BFIjaeICaSit2nKvntXhEUzj2w==} + /@visactor/vrender-core/1.0.41: + resolution: {integrity: sha512-P7YVUJ45vwqPA460W6JJjg201ThvxBrjEgTBJ4tHKaHZPP/nVyF8rPyUOCL8QesEFDB+R0e/sUJUVs+ckHhd2w==} dependencies: - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vrender-core/0.20.0: - resolution: {integrity: sha512-P6Ata06lmVlLu23usSFluILuyxhMydRIgPW5o0zzK/EASstirRdWEx4EghZmobg3XPoipzh0/8O8ddBBtzaflg==} - dependencies: - '@visactor/vutils': 0.18.15 + '@visactor/vutils': 1.0.23 color-convert: 2.0.1 dev: true - /@visactor/vrender-kits/0.20.0: - resolution: {integrity: sha512-9r7XQdLoNfCtr+QQU0JpghDXQ7DOaa3CnvJmXrSn1gonkeDmUmTN9yDs8L2URdYEpXrThPUMJsVy/N3Tp3cqCA==} + /@visactor/vrender-kits/1.0.41: + resolution: {integrity: sha512-ffJlKkNseOsnRjvBmxKxQ9dsQXu+K288NFCtB0ZZ2N/mtcTsZUlH5SDCcsAvDhPGEvJ22Ye4MFKcXSEDctpGzA==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.20.0 - '@visactor/vutils': 0.18.15 - roughjs: 4.5.2 + '@visactor/vrender-core': 1.0.41 + '@visactor/vutils': 1.0.23 + gifuct-js: 2.1.2 + lottie-web: 5.13.0 + roughjs: 4.6.6 dev: true - /@visactor/vscale/0.18.15: - resolution: {integrity: sha512-09dDWc6muJbOMxzp4odCsyLjqAF6u3BOx9kAJJ0tEpKE1AuHL4BTejNe697mJAnXqAo2ynAA+dn+cgWYiW1WQg==} + /@visactor/vscale/1.0.23: + resolution: {integrity: sha512-XePhYuRoNAp+8MeSMuEOOvhVAlOwvM1sDT2yFxE6zdwVB2GjZk8mH+5N2xQGQWk75YmGJjlJASFtgwjlb1yWxw==} dependencies: - '@visactor/vutils': 0.18.15 + '@visactor/vutils': 1.0.23 dev: true - /@visactor/vutils-extension/1.12.1: - resolution: {integrity: sha512-4UcTDdlgkCpDNUxO+U1OMWWqkxhYNS9UF8qR3xBC3x5z7Mu2c8ppM7oZDujnTeJEoG7+JKpOIpX/el3pFFh8Rg==} + /@visactor/vutils-extension/2.0.19: + resolution: {integrity: sha512-uRYCZFw7bYFdrSPQNIrYYsEGKuVn7lTMd4zDKBA2qnAfAZ/Y4WeXzZhQKdXgTFu5UGa292CqmVqMlVKFNWjC+A==} dependencies: - '@visactor/vdataset': 0.18.15 - '@visactor/vutils': 0.18.15 + '@visactor/vdataset': 1.0.23 + '@visactor/vutils': 1.0.23 dev: true /@visactor/vutils/0.18.15: @@ -4676,6 +4761,15 @@ packages: '@turf/helpers': 6.5.0 '@turf/invariant': 6.5.0 eventemitter3: 4.0.7 + dev: false + + /@visactor/vutils/1.0.23: + resolution: {integrity: sha512-M8SLqgdHhKN8QmQKTWD1gzEaHptpIV9pvMYvC6+VeOsqYvZZ6UdhSCAAczTYVo+m/uwcEC2JHSUspbrs8rzlRQ==} + dependencies: + '@turf/helpers': 6.5.0 + '@turf/invariant': 6.5.0 + eventemitter3: 4.0.7 + dev: true /@vitejs/plugin-react-swc/3.6.0_vite@4.5.3: resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==} @@ -5637,6 +5731,13 @@ packages: fsevents: 2.3.3 dev: true + /chokidar/4.0.3: + resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} + engines: {node: '>= 14.16.0'} + dependencies: + readdirp: 4.1.2 + dev: true + /chownr/2.0.0: resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==} engines: {node: '>=10'} @@ -6292,6 +6393,12 @@ packages: engines: {node: '>=0.10.0'} dev: false + /detect-libc/2.1.2: + resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} + engines: {node: '>=8'} + dev: true + optional: true + /detect-newline/2.1.0: resolution: {integrity: sha512-CwffZFvlJffUg9zZA0uqrjQayUTC8ob94pnr5sFwaVv3IOmkfUHcWH+jXaQK3askE51Cqe8/9Ql/0uXNwqZ8Zg==} engines: {node: '>=0.10.0'} @@ -7357,6 +7464,12 @@ packages: engines: {node: '>=0.10.0'} dev: false + /gifuct-js/2.1.2: + resolution: {integrity: sha512-rI2asw77u0mGgwhV3qA+OEgYqaDn5UNqgs+Bx0FGwSpuqfYn+Ir6RQY5ENNQ8SbIiG/m5gVa7CD5RriO4f4Lsg==} + dependencies: + js-binary-schema-parser: 2.0.3 + dev: true + /glob-parent/3.1.0: resolution: {integrity: sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==} dependencies: @@ -7640,6 +7753,10 @@ packages: glogg: 1.0.2 dev: false + /hachure-fill/0.5.2: + resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==} + dev: true + /hard-rejection/2.1.0: resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==} engines: {node: '>=6'} @@ -7851,6 +7968,10 @@ packages: requiresBuild: true optional: true + /immutable/5.1.5: + resolution: {integrity: sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==} + dev: true + /import-fresh/3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -8819,6 +8940,10 @@ packages: resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==} dev: true + /js-binary-schema-parser/2.0.3: + resolution: {integrity: sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg==} + dev: true + /js-string-escape/1.0.1: resolution: {integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==} engines: {node: '>= 0.8'} @@ -9166,6 +9291,10 @@ packages: dependencies: js-tokens: 4.0.0 + /lottie-web/5.13.0: + resolution: {integrity: sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==} + dev: true + /loupe/2.3.7: resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==} dependencies: @@ -9669,6 +9798,11 @@ packages: tslib: 2.3.1 dev: true + /node-addon-api/7.1.1: + resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==} + dev: true + optional: true + /node-gyp/8.4.1: resolution: {integrity: sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==} engines: {node: '>= 10.12.0'} @@ -10140,6 +10274,12 @@ packages: engines: {node: '>=10'} dev: true + /picomatch/4.0.3: + resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==} + engines: {node: '>=12'} + dev: true + optional: true + /pidtree/0.5.0: resolution: {integrity: sha512-9nxspIM7OpZuhBxPg73Zvyq7j1QMPMPsGKTqRc2XOaFQauDvoNz9fM1Wdkjmeo7l9GXOZiRs97sPkuayl39wjA==} engines: {node: '>=0.10'} @@ -10724,6 +10864,11 @@ packages: picomatch: 2.3.1 dev: true + /readdirp/4.1.2: + resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} + engines: {node: '>= 14.18.0'} + dev: true + /rechoir/0.6.2: resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==} engines: {node: '>= 0.10'} @@ -11005,9 +11150,10 @@ packages: fsevents: 2.3.3 dev: true - /roughjs/4.5.2: - resolution: {integrity: sha512-2xSlLDKdsWyFxrveYWk9YQ/Y9UfK38EAMRNkYkMqYBJvPX8abCa9PN0x3w02H8Oa6/0bcZICJU+U95VumPqseg==} + /roughjs/4.6.6: + resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==} dependencies: + hachure-fill: 0.5.2 path-data-parser: 0.1.0 points-on-curve: 0.2.0 points-on-path: 0.2.1 @@ -11071,6 +11217,18 @@ packages: yargs: 17.7.2 dev: true + /sass/1.98.0: + resolution: {integrity: sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + chokidar: 4.0.3 + immutable: 5.1.5 + source-map-js: 1.2.0 + optionalDependencies: + '@parcel/watcher': 2.5.6 + dev: true + /sax/1.2.4: resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==} dev: true @@ -12701,6 +12859,43 @@ packages: fsevents: 2.3.3 dev: true + /vite/4.5.3_drwgbx6kncedk3tgksguhmevgq: + resolution: {integrity: sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 20.12.7 + esbuild: 0.18.20 + postcss: 8.4.38 + rollup: 3.29.4 + sass: 1.98.0 + optionalDependencies: + fsevents: 2.3.3 + dev: true + /vitest/0.30.1_less@4.1.3+terser@5.17.1: resolution: {integrity: sha512-y35WTrSTlTxfMLttgQk4rHcaDkbHQwDP++SNwPb+7H8yb13Q3cu2EixrtHzF27iZ8v0XCciSsLg00RkPAzB/aA==} engines: {node: '>=v14.18.0'} diff --git a/packages/vchart-arco-theme/package.json b/packages/vchart-arco-theme/package.json index da8720e..a94f171 100644 --- a/packages/vchart-arco-theme/package.json +++ b/packages/vchart-arco-theme/package.json @@ -77,8 +77,8 @@ "react-router-dom": "^5.2.0", "react-device-detect": "^2.2.2", "redux": "^4.1.2", - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", "@arco-design/webpack-plugin": "^1.6.0", "@arco-plugins/vite-plugin-svgr": "^0.7.2", "@svgr/webpack": "^5.5.0", diff --git a/packages/vchart-aurora-theme/.trae/AI_DEVELOPMENT_GUIDE.md b/packages/vchart-aurora-theme/.trae/AI_DEVELOPMENT_GUIDE.md new file mode 100644 index 0000000..faa502a --- /dev/null +++ b/packages/vchart-aurora-theme/.trae/AI_DEVELOPMENT_GUIDE.md @@ -0,0 +1,52 @@ +# VChart Aurora Theme 开发指南 (AI Development Guide) + +本文档旨在为 AI 助手提供一套标准的开发、修改与验证流程，确保 VChart 主题包开发的规范性和高效性。 + +## 1. 项目环境 (Environment) + +- **项目根目录**: `/Users/bytedance/rep/vchart-theme/packages/vchart-aurora-theme` +- **Demo 目录**: `/Users/bytedance/rep/vchart-theme/packages/vchart-aurora-theme/demo` +- **启动项目**: 在 `packages/vchart-aurora-theme` 目录下执行 `npm run start`。 +- **运行状态**: 开发服务器启动后 (Vite)，请根据终端输出的 Local 地址访问 Demo 页面（通常为 `http://localhost:5173/` 或 `http://localhost:5174/` 等）。 + +## 2. 核心文件映射 (File Mapping) + +在执行修改任务时，请根据需求类型定位到以下核心文件： + +| 模块 (Module) | 文件路径 (Path) | 关键内容 (Content) | +| :------------ | :--------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **全局色板** | [`src/common/color-scheme.ts`](src/common/color-scheme.ts) | `colorList` (数据色板), `palette` (背景色/字体色/轴线色) | +| **设计变量** | [`src/common/token.ts`](src/common/token.ts) | `fontFamily`, `fontSize`, `borderRadius`, `padding` 等基础 Token | +| **组件样式** | `src/common/component/*.ts` | - [`axis.ts`](src/common/component/axis.ts): 坐标轴
- [`legend.ts`](src/common/component/legend.ts): 图例
- [`tooltip.ts`](src/common/component/tooltip.ts): 提示框
- [`crosshair.ts`](src/common/component/crosshair.ts): 十字准星 | +| **图表系列** | `src/common/series/*.ts` | - [`bar.ts`](src/common/series/bar.ts): 柱状图
- [`line.ts`](src/common/series/line.ts): 折线图
- [`pie.ts`](src/common/series/pie.ts): 饼图
- 其他: `area.ts`, `scatter.ts`, `radar.ts` 等 | +| **测试用例** | [`demo/src/chartSpec.ts`](demo/src/chartSpec.ts) | 包含 `barSpec`, `lineSpec`, `pieSpec` 等测试配置，用于 Demo 展示 | + +## 3. 开发流程 (Workflow) + +### Step 1: 需求分析 + +阅读 `TASKS.md` 或用户指令，明确修改点（例如：“修改背景色”或“调整坐标轴字号”）。 + +### Step 2: 代码修改 + +1. **定位**: 根据映射表找到对应源码文件。 +2. **修改**: 保持代码风格一致，进行最小必要修改。 + - _Tip_: 修改 `color-scheme.ts` 影响全局颜色。 + - _Tip_: 修改 `token.ts` 影响全局尺寸/字体。 + - _Tip_: 修改 `component/series` 文件进行特定组件/图表的精细调整。 + +### Step 3: 验证闭环 + +1. **检查 Demo**: 修改保存后，Vite 会热更新。 +2. **更新用例 (可选)**: 如果现有 Demo 图表无法展示修改效果（例如缺少特定类型的图表），请在 `demo/src/chartSpec.ts` 中添加新的 Spec。 并在 `demo/src/chart-list.ts` 中注册。 +3. **确认**: 启动项目并通过内置浏览器访问 Demo 页面（URL 见启动日志）查看效果，确认是否符合需求。 + +## 4. 辅助工具 (Tools) + +- **VChart 专家助手**: 遇到 VChart 配置问题、需要创建复杂 Demo 或诊断图表问题时，可以使用 `vchart-development-assistant` skill 获取帮助。 + +## 5. 注意事项 + +- **只修改必要文件**: 避免改动构建配置或无关逻辑。 +- **保持类型安全**: 确保 TypeScript 类型检查通过。 +- **实时反馈**: 修改完成后，简要描述改动点并提示用户查看 Demo。 diff --git a/packages/vchart-aurora-theme/.trae/TASKS.md b/packages/vchart-aurora-theme/.trae/TASKS.md new file mode 100644 index 0000000..384ee84 --- /dev/null +++ b/packages/vchart-aurora-theme/.trae/TASKS.md @@ -0,0 +1,64 @@ +# 任务列表 (Tasks) + +请在此文档中添加开发需求。AI 将会读取此文档，按顺序执行任务并更新状态。 + +## 📝 提需示例 (Request Examples) + +如果你需要提出新需求，请复制以下格式添加到 **[待办任务]** 区域： + +### 示例 1：修改样式 + +```markdown +- [ ] **Task: 调整柱状图默认宽度** + - **描述**: 将柱状图（Bar Chart）的默认 `barMaxWidth` 设置为 20px。 + - **文件**: `src/common/series/bar.ts` + - **验证**: 检查 Demo 中的柱状图是否变宽/变窄。 +``` + +### 示例 2：新增图表配置 + +```markdown +- [ ] **Task: 添加漏斗图测试用例** + - **描述**: 在 Demo 中新增一个漏斗图（Funnel Chart）的 Spec，用于测试漏斗图主题样式。 + - **文件**: `demo/src/chartSpec.ts` + - **验证**: Demo 页面出现漏斗图。 +``` + +--- + +## 🚀 待办任务 (Pending Tasks) + + + +- [ ] **Task: 修复 Line/Area 图例和 Tooltip 颜色渐变问题** + - **描述**: 在 Line 和 Area 图表中，由于 Series 样式使用了渐变色，导致 Legends 和 Tooltip 的图形也呈现渐变。需修改主题配置，使其显示为纯色。 + - **文件**: `src/common/series/line.ts`, `src/common/series/area.ts` + - **优先级**: 高 + +--- + +## 🔄 进行中 (In Progress) + + + +--- + +## ✅ 已完成 (Completed) + + + +- [x] **Task: 禁用迷你面积图 Hover 效果 (Demo Only)** + + - **描述**: 修改 Demo 配置，禁用迷你面积图 (`areaSimpleSpec`) 的 Hover 交互。注意：只改 Demo，不改主题。 + - **文件**: `demo/src/chartSpec.ts` + - **优先级**: 中 + +- [x] **Task: 基础折线图增加背景色和圆角 (Demo Only)** + + - **描述**: 修改 Demo 配置，为基础折线图 (`lineSpec`) 添加渐变背景 `linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 97.6%)` 和圆角 `12px`, 只包含图表区域，不包含 xy 轴。注意：只改 Demo，不改主题。 + - **文件**: `demo/src/chartSpec.ts` + - **优先级**: 中 + +- [x] **Task: tooltip 的每项的图形形状改成圆形** + - **描述**: tooltip 的每项的图形形状改成圆形，和 legends 的形状保持一致。在面积图 demo 中完成验证 + - **优先级**: 高 diff --git a/packages/vchart-aurora-theme/demo/src/chartSpec.ts b/packages/vchart-aurora-theme/demo/src/chartSpec.ts index f69f163..5ddffe5 100644 --- a/packages/vchart-aurora-theme/demo/src/chartSpec.ts +++ b/packages/vchart-aurora-theme/demo/src/chartSpec.ts @@ -823,6 +823,9 @@ export const areaSpec = { export const areaSimpleSpec = { type: 'area', + hover: { + enable: false + }, seriesMark: 'line', data: { values: [ @@ -853,6 +856,13 @@ export const areaSimpleSpec = { xField: ['type'], yField: 'value', seriesField: 'country', + point: { + state: { + dimension_hover: { + visible: false + } + } + }, legends: { visible: false }, @@ -860,7 +870,9 @@ export const areaSimpleSpec = { visible: false }, crosshair: { - visible: false + xField: { + visible: false + } } }; diff --git a/packages/vchart-aurora-theme/package.json b/packages/vchart-aurora-theme/package.json index dedfbf9..da71513 100644 --- a/packages/vchart-aurora-theme/package.json +++ b/packages/vchart-aurora-theme/package.json @@ -62,9 +62,10 @@ "@vitejs/plugin-react-swc": "^3.4.1", "vite": "^4.5.0", "vite-plugin-svgr": "^4.1.0", + "sass": "^1.63.6", "@babel/runtime": "latest", - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", "@douyinfe/semi-ui": "^2.51.3", "@douyinfe/semi-icons": "latest", "@douyinfe/semi-icons-lab": "latest" diff --git a/packages/vchart-aurora-theme/src/common/component/legend.ts b/packages/vchart-aurora-theme/src/common/component/legend.ts index 419fff4..1e1ca0f 100644 --- a/packages/vchart-aurora-theme/src/common/component/legend.ts +++ b/packages/vchart-aurora-theme/src/common/component/legend.ts @@ -5,38 +5,24 @@ export const legend: Partial = { visible: true, orient: 'top', position: 'middle', - padding: [8, 8, 8, 8], maxRow: 1, title: { - visible: false, - textStyle: { - fontSize: 12, - lineHeight: 21 - } + visible: false }, item: { visible: true, - spaceCol: 24, - spaceRow: 12, - padding: 0, background: { visible: false }, shape: { - space: 4, style: { size: 8, symbolType: 'circle' } }, label: { - space: 100, style: { - fill: '#585858', - fontSize: 12, - lineHeight: 12, - opacity: 1, - fontWeight: 400 + fill: '#585858' }, state: { unSelected: { diff --git a/packages/vchart-aurora-theme/src/common/component/tooltip.ts b/packages/vchart-aurora-theme/src/common/component/tooltip.ts index a2ff0b1..cdde208 100644 --- a/packages/vchart-aurora-theme/src/common/component/tooltip.ts +++ b/packages/vchart-aurora-theme/src/common/component/tooltip.ts @@ -1,8 +1,8 @@ import type { ITooltipTheme } from '@visactor/vchart'; export const tooltip: ITooltipTheme = { - dimension: { + shape: { shapeType: 'circle', - shapeSize: 8 + size: 8 } }; diff --git a/packages/vchart-semi-theme/package.json b/packages/vchart-semi-theme/package.json index 05c768e..b344a6a 100644 --- a/packages/vchart-semi-theme/package.json +++ b/packages/vchart-semi-theme/package.json @@ -63,8 +63,8 @@ "vite": "^4.5.0", "vite-plugin-svgr": "^4.1.0", "@babel/runtime": "latest", - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", "@douyinfe/semi-ui": "^2.51.3", "@douyinfe/semi-icons": "latest", "@douyinfe/semi-icons-lab": "latest" diff --git a/packages/vchart-theme-converter/package.json b/packages/vchart-theme-converter/package.json index f7bfd90..0285bfa 100644 --- a/packages/vchart-theme-converter/package.json +++ b/packages/vchart-theme-converter/package.json @@ -23,8 +23,8 @@ "@visactor/vutils": "~0.18.15" }, "devDependencies": { - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", "@visactor/vchart-semi-theme": "workspace:1.12.3", "@visactor/vchart-theme": "workspace:1.12.3", "echarts": "5.5.0", diff --git a/packages/vchart-theme-demo-component/package.json b/packages/vchart-theme-demo-component/package.json index fcb8527..1a14e72 100644 --- a/packages/vchart-theme-demo-component/package.json +++ b/packages/vchart-theme-demo-component/package.json @@ -50,8 +50,8 @@ "@types/jest": "~29.5.0", "@types/offscreencanvas": "2019.6.4", "@types/node": "*", - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1" + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19" }, "publishConfig": { "access": "public" diff --git a/packages/vchart-theme-utils/package.json b/packages/vchart-theme-utils/package.json index 2e8f306..9953967 100644 --- a/packages/vchart-theme-utils/package.json +++ b/packages/vchart-theme-utils/package.json @@ -36,8 +36,8 @@ "ts-jest": "~29.1.0", "@types/jest": "~29.5.0", "@rushstack/eslint-patch": "~1.1.4", - "@visactor/vchart": "1.12.1", - "@visactor/vchart-types": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/vchart-types": "2.0.19", "eslint": "~8.18.0", "vite": "^4.5.0", "typescript": "4.9.5", diff --git a/packages/vchart-theme/package.json b/packages/vchart-theme/package.json index fa24e06..be4455d 100644 --- a/packages/vchart-theme/package.json +++ b/packages/vchart-theme/package.json @@ -38,8 +38,8 @@ "ts-jest": "~29.1.0", "@types/jest": "~29.5.0", "@rushstack/eslint-patch": "~1.1.4", - "@visactor/vchart": "1.12.1", - "@visactor/vchart-types": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/vchart-types": "2.0.19", "eslint": "~8.18.0", "vite": "^4.5.0", "typescript": "4.9.5", diff --git a/packages/vchart-tt-platform-theme/package.json b/packages/vchart-tt-platform-theme/package.json index 43f0f71..d6687da 100644 --- a/packages/vchart-tt-platform-theme/package.json +++ b/packages/vchart-tt-platform-theme/package.json @@ -65,8 +65,8 @@ "vite-plugin-svgr": "^4.1.0", "node-sass": "^9.0.0", "@babel/runtime": "latest", - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", "@douyinfe/semi-ui": "^2.51.3", "@douyinfe/semi-icons": "latest", "@douyinfe/semi-icons-lab": "latest", diff --git a/packages/vchart-ve-o-theme/package.json b/packages/vchart-ve-o-theme/package.json index 1a6ca6d..6926d4e 100644 --- a/packages/vchart-ve-o-theme/package.json +++ b/packages/vchart-ve-o-theme/package.json @@ -74,8 +74,8 @@ "react-redux": "^7.2.6", "react-device-detect": "^2.2.2", "redux": "^4.1.2", - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", "@arco-design/webpack-plugin": "^1.6.0", "@arco-plugins/vite-plugin-svgr": "^0.7.2", "@svgr/webpack": "^5.5.0", diff --git a/share/chart-demo/package.json b/share/chart-demo/package.json index b586357..b87e046 100644 --- a/share/chart-demo/package.json +++ b/share/chart-demo/package.json @@ -25,8 +25,8 @@ "@visactor/vchart": ">=1.10.4" }, "devDependencies": { - "@visactor/vchart": "1.12.1", - "@visactor/vchart-types": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/vchart-types": "2.0.19", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", From b1a4c0012b106b5e287dbef2912cf0746c821c81 Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Thu, 12 Mar 2026 16:58:28 +0800 Subject: [PATCH 12/14] =?UTF-8?q?refactor(vchart-aurora-theme):=20?= =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=B8=BB=E9=A2=98=E9=85=8D=E7=BD=AE=E5=B9=B6?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E8=A1=A8=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 删除未使用的组件主题配置，简化系列样式定义 新增条形图专用颜色方案和交叉线配置 调整图例和交叉线组件以适应不同图表类型 优化主题索引文件结构，按图表类型组织配置 更新示例图表规范以展示新主题效果 --- .../vchart-aurora-theme/demo/src/chartSpec.ts | 107 +++++++++++++----- .../src/common/color-scheme.ts | 13 +++ .../src/common/component/axis.ts | 65 ----------- .../src/common/component/crosshair.ts | 16 ++- .../src/common/component/data-zoom.ts | 68 ----------- .../src/common/component/indicator.ts | 20 ---- .../src/common/component/legend.ts | 30 +++-- .../src/common/component/mark-area.ts | 18 --- .../src/common/component/mark-line.ts | 29 ----- .../src/common/component/mark-point.ts | 38 ------- .../src/common/component/polar-axis.ts | 27 ----- .../src/common/component/scroll-bar.ts | 20 ---- .../src/common/series/area.ts | 25 +--- .../src/common/series/bar.ts | 32 +----- .../src/common/series/line.ts | 23 +--- packages/vchart-aurora-theme/src/index.ts | 58 +++++----- 16 files changed, 165 insertions(+), 424 deletions(-) delete mode 100644 packages/vchart-aurora-theme/src/common/component/axis.ts delete mode 100644 packages/vchart-aurora-theme/src/common/component/data-zoom.ts delete mode 100644 packages/vchart-aurora-theme/src/common/component/indicator.ts delete mode 100644 packages/vchart-aurora-theme/src/common/component/mark-area.ts delete mode 100644 packages/vchart-aurora-theme/src/common/component/mark-line.ts delete mode 100644 packages/vchart-aurora-theme/src/common/component/mark-point.ts delete mode 100644 packages/vchart-aurora-theme/src/common/component/polar-axis.ts delete mode 100644 packages/vchart-aurora-theme/src/common/component/scroll-bar.ts diff --git a/packages/vchart-aurora-theme/demo/src/chartSpec.ts b/packages/vchart-aurora-theme/demo/src/chartSpec.ts index 5ddffe5..2c3efac 100644 --- a/packages/vchart-aurora-theme/demo/src/chartSpec.ts +++ b/packages/vchart-aurora-theme/demo/src/chartSpec.ts @@ -241,62 +241,73 @@ export const benchmarkSpec = { { reason: '价格问题', value: 250, - bench: 230 + type: '退款金额' }, { reason: '物流问题', value: 200, - bench: 230 + type: '退款金额' }, { reason: '不想要了', value: 100, - bench: 120 + type: '退款金额' }, { reason: '其他', value: 20, - bench: 10 + type: '退款金额' + } + ] + }, + { + id: 'bench', + values: [ + { + reason: '价格问题', + value: 230, + type: '同行标杆' + }, + { + reason: '物流问题', + value: 230, + type: '同行标杆' + }, + { + reason: '不想要了', + value: 120, + type: '同行标杆' + }, + { + reason: '其他', + value: 10, + type: '同行标杆' } ] } ], series: [ { - id: '退款金额', + id: 'base', type: 'bar', + dataId: 'base', + seriesField: 'type', xField: 'reason', yField: 'value', barMaxWidth: 16, - barGapInGroup: 2, - tooltip: { - dimension: { - content: { - key: '退款金额', - value: datum => datum.value - } - } - } + barGapInGroup: 2 }, { - id: '同行标杆退款金额', + id: 'bench', type: 'scatter', + dataId: 'bench', + seriesField: 'type', xField: 'reason', - yField: 'bench', - tooltip: { - dimension: { - content: { - key: '同行标杆退款金额', - value: datum => datum.bench - } - } - }, + yField: 'value', point: { style: { shape: 'rect', - size: [16, 2], - fill: '#2850C6', - stroke: '#2850C6' + size: [16, 2] } } } @@ -413,6 +424,48 @@ export const lineSpec = { { type: 'Mascara', country: 'USA', value: 11261 } ] }, + customMark: [ + { + type: 'rect', + zIndex: 1, + style: { + x: (datum, ctx) => { + const region = ctx.chart.getAllRegions()[0]; + return region.getLayoutStartPoint().x; + }, + y: (datum, ctx) => { + const region = ctx.chart.getAllRegions()[0]; + return region.getLayoutStartPoint().y - 12; + }, + width: (datum, ctx) => { + const region = ctx.chart.getAllRegions()[0]; + return region.getLayoutRect().width; + }, + height: (datum, ctx) => { + const region = ctx.chart.getAllRegions()[0]; + return region.getLayoutRect().height + 12; + }, + cornerRadius: 12, + fill: { + gradient: 'linear', + x0: 0, + y0: 0, + x1: 0, + y1: 1, + stops: [ + { + offset: 0, + color: '#F5F9FF' + }, + { + offset: 1, + color: '#fff' + } + ] + } + } + } + ], height: 600, xField: ['type'], yField: 'value', diff --git a/packages/vchart-aurora-theme/src/common/color-scheme.ts b/packages/vchart-aurora-theme/src/common/color-scheme.ts index 74cb2a5..3c2794f 100644 --- a/packages/vchart-aurora-theme/src/common/color-scheme.ts +++ b/packages/vchart-aurora-theme/src/common/color-scheme.ts @@ -13,6 +13,19 @@ export const colorList = [ '#B46FF4' ]; +export const barColorList = [ + // 定义分类主题色 + '#3377FF', + '#1FE7F9', + '#FFCD50', + '#53F3B3', + '#ADB8D6', + '#867AFF', + '#FAA64D', + '#FF8082', + '#B46FF4' +]; + export const nestColorList = [ ['#3377FF', '#5587FD', '#76A4FF', '#A0C0FF', '#BFD4FF', '#E5EEFF'], ['#1FE7F9', '#71F1FF', '#A2F5FF', '#BCF8FF', '#D2FAFF', '#E5FDFF'], diff --git a/packages/vchart-aurora-theme/src/common/component/axis.ts b/packages/vchart-aurora-theme/src/common/component/axis.ts deleted file mode 100644 index d9898ef..0000000 --- a/packages/vchart-aurora-theme/src/common/component/axis.ts +++ /dev/null @@ -1,65 +0,0 @@ -import type { IComponentTheme } from '@visactor/vchart'; - -export const axis: Pick< - IComponentTheme, - 'axis' | 'axisAngle' | 'axisBand' | 'axisLinear' | 'axisRadius' | 'axisX' | 'axisY' -> = { - axis: { - domainLine: { - visible: true, - style: { - lineWidth: 1, - stroke: { type: 'palette', key: 'axisDomainColor' } - } - }, - grid: { - visible: true, - style: { - lineWidth: 1, - stroke: { type: 'palette', key: 'axisGridColor' }, - lineDash: [4, 4] - } - }, - subGrid: { - visible: false, - style: { - lineWidth: 1, - stroke: { type: 'palette', key: 'axisGridColor' }, - lineDash: [4, 4] - } - }, - tick: { - visible: true, - style: { - lineWidth: 1, - stroke: { type: 'palette', key: 'blackColors25' } - } - }, - subTick: { - visible: false, - tickSize: 2, - style: { - lineWidth: 1, - stroke: { type: 'palette', key: 'blackColors15' } - } - }, - label: { - visible: true, - space: 8, - style: { - fontSize: 12, - fill: { type: 'palette', key: 'blackColors45' }, - fontWeight: 400, - fillOpacity: 1 - } - }, - title: { - visible: false, - style: { - fill: { type: 'palette', key: 'blackColors65' }, - fontSize: 12, - lineHeight: 12 - } - } - } -}; diff --git a/packages/vchart-aurora-theme/src/common/component/crosshair.ts b/packages/vchart-aurora-theme/src/common/component/crosshair.ts index b0f24a9..83367d6 100644 --- a/packages/vchart-aurora-theme/src/common/component/crosshair.ts +++ b/packages/vchart-aurora-theme/src/common/component/crosshair.ts @@ -1,6 +1,6 @@ import type { ICrosshairTheme } from '@visactor/vchart'; -export const crosshair: ICrosshairTheme = { +export const barCrosshair: ICrosshairTheme = { xField: { line: { type: 'rect', // 设置为矩形类型 @@ -20,3 +20,17 @@ export const crosshair: ICrosshairTheme = { } } }; + +export const lineCrosshair: ICrosshairTheme = { + bandField: { + line: { + type: 'line', + width: 1, + style: { + lineWidth: 1, + stroke: '#DCDEE1', + lineDash: [2, 2] + } + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/data-zoom.ts b/packages/vchart-aurora-theme/src/common/component/data-zoom.ts deleted file mode 100644 index 4fe7503..0000000 --- a/packages/vchart-aurora-theme/src/common/component/data-zoom.ts +++ /dev/null @@ -1,68 +0,0 @@ -import type { IDataZoomTheme } from '@visactor/vchart'; - -export const dataZoomCommon: IDataZoomTheme = { - middleHandler: { - visible: false - }, - startHandler: { - style: { - size: 22 - } - }, - selectedBackground: { - style: { - fill: '#6699FF', - fillOpacity: 0.2, - opacity: 1, - stroke: '#6699FF', - lineWidth: 2, - cornerRadius: 4 - } - }, - background: { - style: { - fill: '#F3F4F6', - fillOpacity: 0.2, - cornerRadius: 4, - stroke: '#EDEEF0', - opacity: 1, - lineWidth: 2 - } - }, - endHandler: { - style: { - size: 22 - } - }, - backgroundChart: { - area: { - style: { - fill: false, - stroke: '#6699FF' - } - }, - line: { - style: { - fill: false, - stroke: '#6699FF' - } - } - }, - startText: { - visible: false - }, - endText: { - visible: false - } -}; - -export const dataZoom: IDataZoomTheme = { - horizontal: { - ...dataZoomCommon, - height: 44 - }, - vertical: { - ...dataZoomCommon, - width: 44 - } -}; diff --git a/packages/vchart-aurora-theme/src/common/component/indicator.ts b/packages/vchart-aurora-theme/src/common/component/indicator.ts deleted file mode 100644 index 97b084e..0000000 --- a/packages/vchart-aurora-theme/src/common/component/indicator.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type { IIndicatorTheme } from '@visactor/vchart'; - -export const indicator: IIndicatorTheme = { - title: { - visible: true, - style: { - fill: '#12141A', - fontWeight: 500, - fontSize: 16 - } - }, - content: { - visible: true, - style: { - fill: '#85878A', - fontWeight: 400, - fontSize: 12 - } - } -}; diff --git a/packages/vchart-aurora-theme/src/common/component/legend.ts b/packages/vchart-aurora-theme/src/common/component/legend.ts index 1e1ca0f..8888e98 100644 --- a/packages/vchart-aurora-theme/src/common/component/legend.ts +++ b/packages/vchart-aurora-theme/src/common/component/legend.ts @@ -16,18 +16,32 @@ export const legend: Partial = { }, shape: { style: { - size: 8, symbolType: 'circle' } + } + }, + allowAllCanceled: false + } +}; + +export const lineLegend: Partial = { + discreteLegend: { + visible: true, + orient: 'top', + position: 'middle', + maxRow: 1, + title: { + visible: false + }, + item: { + visible: true, + background: { + visible: false }, - label: { + shape: { style: { - fill: '#585858' - }, - state: { - unSelected: { - opacity: 1 - } + size: [8, 2], + symbolType: 'rect' } } }, diff --git a/packages/vchart-aurora-theme/src/common/component/mark-area.ts b/packages/vchart-aurora-theme/src/common/component/mark-area.ts deleted file mode 100644 index 49117d1..0000000 --- a/packages/vchart-aurora-theme/src/common/component/mark-area.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { IMarkAreaTheme } from '@visactor/vchart'; - -export const markArea: IMarkAreaTheme = { - area: { - style: { - fill: { type: 'palette', key: 'blackColors100', a: 0.06 } - } - }, - label: { - style: { - fontSize: { type: 'token', key: 'l5FontSize' }, - fill: { type: 'palette', key: 'blackColors65' } - }, - labelBackground: { - visible: false - } - } -}; diff --git a/packages/vchart-aurora-theme/src/common/component/mark-line.ts b/packages/vchart-aurora-theme/src/common/component/mark-line.ts deleted file mode 100644 index efcf477..0000000 --- a/packages/vchart-aurora-theme/src/common/component/mark-line.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { IMarkLineTheme } from '@visactor/vchart'; - -export const markLine: IMarkLineTheme = { - line: { - style: { - lineDash: [], - lineWidth: 1, - stroke: { type: 'palette', key: 'blackColors25' } - } - }, - startSymbol: { - visible: false - }, - endSymbol: { - visible: false - }, - label: { - position: 'insideStartTop', - refY: 0, - autoRotate: true, - style: { - fontSize: { type: 'token', key: 'l5FontSize' }, - fill: { type: 'palette', key: 'blackColors65' } - }, - labelBackground: { - visible: false - } - } -}; diff --git a/packages/vchart-aurora-theme/src/common/component/mark-point.ts b/packages/vchart-aurora-theme/src/common/component/mark-point.ts deleted file mode 100644 index 388af88..0000000 --- a/packages/vchart-aurora-theme/src/common/component/mark-point.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type { IMarkPointTheme } from '@visactor/vchart'; - -export const markPoint: IMarkPointTheme = { - itemContent: { - // @ts-ignore - autoRotate: false, // FIXME: type error - offsetY: -16, - text: { - style: { - fontSize: { type: 'token', key: 'l5FontSize' }, - fill: { type: 'palette', key: 'blackColors65' } - } - } - }, - itemLine: { - decorativeLine: { - visible: false - }, - startSymbol: { - visible: true, - size: 6, - style: { - fill: '#fff', - stroke: { type: 'palette', key: 'bandColor' }, - lineWidth: 2 - } - }, - endSymbol: { - visible: false - }, - line: { - style: { - lineWidth: 1, - stroke: { type: 'palette', key: 'blackColors25' } - } - } - } -}; diff --git a/packages/vchart-aurora-theme/src/common/component/polar-axis.ts b/packages/vchart-aurora-theme/src/common/component/polar-axis.ts deleted file mode 100644 index bc04e25..0000000 --- a/packages/vchart-aurora-theme/src/common/component/polar-axis.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type { IPolarAxisCommonTheme } from '@visactor/vchart'; - -const axisRadius: IPolarAxisCommonTheme = { - domainLine: {}, - grid: { - smooth: false, - visible: true - }, - subGrid: { - smooth: false - } -}; - -const axisAngle: IPolarAxisCommonTheme = { - grid: { - visible: true, - smooth: false - }, - label: { - space: 4 - } -}; - -export const axisPolar = { - axisRadius, - axisAngle -}; diff --git a/packages/vchart-aurora-theme/src/common/component/scroll-bar.ts b/packages/vchart-aurora-theme/src/common/component/scroll-bar.ts deleted file mode 100644 index c92c07e..0000000 --- a/packages/vchart-aurora-theme/src/common/component/scroll-bar.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type { IScrollBarTheme } from '@visactor/vchart'; - -export const scrollBar: IScrollBarTheme = { - horizontal: { - height: 12, - slider: { - style: { - fill: 'rgba(0,0,0,0.15)' - } - } - }, - vertical: { - width: 12, - slider: { - style: { - fill: 'rgba(0,0,0,0.15)' - } - } - } -}; diff --git a/packages/vchart-aurora-theme/src/common/series/area.ts b/packages/vchart-aurora-theme/src/common/series/area.ts index 0192ef5..a4da8e7 100644 --- a/packages/vchart-aurora-theme/src/common/series/area.ts +++ b/packages/vchart-aurora-theme/src/common/series/area.ts @@ -23,29 +23,11 @@ export const area: Pick< line: { style: { curveType: 'monotone', - lineWidth: 2, - stroke: { - gradient: 'linear', - x0: 0, - y0: 0, - x1: 1, - y1: 0, - stops: [ - { - offset: 0, - opacity: 0.7 - }, - { - offset: 1, - opacity: 1 - } - ] - } + lineWidth: 2 } }, area: { style: { - // lineWidth: 2, fill: { gradient: 'linear', x0: 0, @@ -63,11 +45,6 @@ export const area: Pick< } ] } - }, - state: { - // selected: { - // fillOpacity: 0.5 - // } } } } diff --git a/packages/vchart-aurora-theme/src/common/series/bar.ts b/packages/vchart-aurora-theme/src/common/series/bar.ts index 3160edd..914364c 100644 --- a/packages/vchart-aurora-theme/src/common/series/bar.ts +++ b/packages/vchart-aurora-theme/src/common/series/bar.ts @@ -7,33 +7,11 @@ const bar: ISeriesTheme['bar'] = { bar: { style: { // @ts-ignore - visible: datum => datum.value > 0, // 数据为0时隐藏柱子 - outerBorder: { - stroke: ['white', false, false, false], - lineWidth: 1 - } - } - }, - legends: { - visible: true, - item: { - shape: { - visible: true, - style: { - symbolType: 'circle' - } - } - } - }, - tooltip: { - visible: true, - activeType: 'dimension', - mark: { - shapeType: 'circle' - }, - dimension: { - visible: true, - shapeType: 'circle' + visible: datum => datum.value > 0 // 数据为0时隐藏柱子 + // outerBorder: { + // stroke: ['white', false, false, false], + // lineWidth: 1 + // } } } }; diff --git a/packages/vchart-aurora-theme/src/common/series/line.ts b/packages/vchart-aurora-theme/src/common/series/line.ts index 46b3440..b8ec5fb 100644 --- a/packages/vchart-aurora-theme/src/common/series/line.ts +++ b/packages/vchart-aurora-theme/src/common/series/line.ts @@ -4,24 +4,7 @@ export const line: ISeriesTheme['line'] = { line: { style: { lineWidth: 2, - curveType: 'monotone', - stroke: { - gradient: 'linear', - x0: 0, - y0: 0, - x1: 1, - y1: 0, - stops: [ - { - offset: 0, - opacity: 0.7 - }, - { - offset: 1, - opacity: 1 - } - ] - } + curveType: 'monotone' } }, point: { @@ -38,9 +21,5 @@ export const line: ISeriesTheme['line'] = { visible: true } } - }, - label: { - position: 'top', - offset: 4 } }; diff --git a/packages/vchart-aurora-theme/src/index.ts b/packages/vchart-aurora-theme/src/index.ts index 280cb64..98292d7 100644 --- a/packages/vchart-aurora-theme/src/index.ts +++ b/packages/vchart-aurora-theme/src/index.ts @@ -1,28 +1,19 @@ import type { ITheme } from '@visactor/vchart'; -import { colorScheme, colorList, nestColorList } from './common/color-scheme'; -import { axis } from './common/component/axis'; -import { axisPolar } from './common/component/polar-axis'; +import { colorScheme, colorList, barColorList, nestColorList } from './common/color-scheme'; -import { legend } from './common/component/legend'; +import { legend, lineLegend } from './common/component/legend'; import { token } from './common/token'; import { tooltip } from './common/component/tooltip'; -import { crosshair } from './common/component/crosshair'; +import { barCrosshair, lineCrosshair } from './common/component/crosshair'; import { area } from './common/series/area'; import { barTheme as bar } from './common/series/bar'; import { line } from './common/series/line'; -import { markByName } from './common/mark'; import { scatter } from './common/series/scatter'; import { pie } from './common/series/pie'; -import { indicator } from './common/component/indicator'; import { funnel } from './common/series/funnel'; import { treemap } from './common/series/treemap'; import { gauge } from './common/series/gauge'; import { heatmap } from './common/series/heatmap'; -import { markLine } from './common/component/mark-line'; -import { markArea } from './common/component/mark-area'; -import { markPoint } from './common/component/mark-point'; -import { dataZoom } from './common/component/data-zoom'; -import { scrollBar } from './common/component/scroll-bar'; import { radar } from './common/series/radar'; export const chartAuroraTheme: ITheme = { @@ -30,32 +21,39 @@ export const chartAuroraTheme: ITheme = { type: 'light', description: 'light theme for Aurora.', colorScheme, - // token, component: { - // ...axis, ...legend, - // ...axisPolar, - tooltip, - crosshair - // indicator, - // markLine, - // markArea, - // markPoint, - // dataZoom, - // scrollBar + tooltip + }, + chart: { + line: { + component: { + crosshair: lineCrosshair, + ...lineLegend + } + }, + area: { + component: { + crosshair: lineCrosshair, + ...lineLegend + } + }, + bar: { + component: { + crosshair: barCrosshair + }, + colorScheme: { + default: { + dataScheme: barColorList + } + } + } }, series: { pie, ...bar, ...area, line - - // ...gauge, - // scatter, - // funnel, - // treemap, - // heatmap, - // radar } }; From 90af619e89169345814028c84290a17aa75a40ed Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Thu, 12 Mar 2026 20:36:56 +0800 Subject: [PATCH 13/14] =?UTF-8?q?feat(demo):=20=E6=96=B0=E5=A2=9E=E5=8F=8C?= =?UTF-8?q?=E8=BD=B4=E6=9F=B1=E7=8A=B6=E5=9B=BE=E7=A4=BA=E4=BE=8B=E5=B9=B6?= =?UTF-8?q?=E6=B8=85=E7=90=86=E6=97=A0=E7=94=A8=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加双Y轴柱状图示例，展示金额和百分比数据 移除bar.ts中已注释的无用代码 更新TASKS.md任务状态 --- packages/vchart-aurora-theme/.trae/TASKS.md | 22 +++-- .../demo/src/chart-list.ts | 5 ++ .../vchart-aurora-theme/demo/src/chartSpec.ts | 82 +++++++++++++++++++ .../src/common/series/bar.ts | 4 - 4 files changed, 102 insertions(+), 11 deletions(-) diff --git a/packages/vchart-aurora-theme/.trae/TASKS.md b/packages/vchart-aurora-theme/.trae/TASKS.md index 384ee84..fac0d8b 100644 --- a/packages/vchart-aurora-theme/.trae/TASKS.md +++ b/packages/vchart-aurora-theme/.trae/TASKS.md @@ -30,13 +30,6 @@ -- [ ] **Task: 修复 Line/Area 图例和 Tooltip 颜色渐变问题** - - **描述**: 在 Line 和 Area 图表中，由于 Series 样式使用了渐变色，导致 Legends 和 Tooltip 的图形也呈现渐变。需修改主题配置，使其显示为纯色。 - - **文件**: `src/common/series/line.ts`, `src/common/series/area.ts` - - **优先级**: 高 - ---- - ## 🔄 进行中 (In Progress) @@ -47,6 +40,21 @@ +- [x] **Task: 修复 Line/Area 图例和 Tooltip 颜色渐变问题** + - **描述**: 在 Line 和 Area 图表中，由于 Series 样式使用了渐变色，导致 Legends 和 Tooltip 的图形也呈现渐变。需修改主题配置，使其显示为纯色。 + - **文件**: `src/common/series/line.ts`, `src/common/series/area.ts` + - **优先级**: 高 + +- [x] **Task: 新增柱状图双Y轴Demo** + - **描述**: 新增一个柱状图的demo，包含两个y轴，左边单位金额，右边单位百分比，比如退款金额、退款率。spec参考benchmarkSpec。 + - **文件**: `demo/src/chartSpec.ts`, `demo/src/chart-list.ts` + - **验证**: Demo 页面出现双Y轴柱状图。 + +- [x] **Task: legend取消选中时，shape有border** + - **描述**: legend取消选中时，shape有border，填充色变为白色，边框颜色保持原色。 + - **文件**: `src/common/component/legend.ts` + - **优先级**: 中 + - [x] **Task: 禁用迷你面积图 Hover 效果 (Demo Only)** - **描述**: 修改 Demo 配置，禁用迷你面积图 (`areaSimpleSpec`) 的 Hover 交互。注意：只改 Demo，不改主题。 diff --git a/packages/vchart-aurora-theme/demo/src/chart-list.ts b/packages/vchart-aurora-theme/demo/src/chart-list.ts index a8c33c6..ec1b3db 100644 --- a/packages/vchart-aurora-theme/demo/src/chart-list.ts +++ b/packages/vchart-aurora-theme/demo/src/chart-list.ts @@ -7,6 +7,7 @@ import { barGroupHorizontalSpec, barGroupSpec, benchmarkSpec, + dualAxisBarSpec, barStackedSpec, funnelSpec, lineSpec, @@ -40,6 +41,10 @@ export const barCharts: IChartInfo[] = [ title: '带同行标杆柱状图', spec: benchmarkSpec }, + { + title: '双轴图（金额/比率）', + spec: dualAxisBarSpec + }, { title: '水平分组柱状图', spec: barGroupHorizontalSpec diff --git a/packages/vchart-aurora-theme/demo/src/chartSpec.ts b/packages/vchart-aurora-theme/demo/src/chartSpec.ts index 2c3efac..c3928a5 100644 --- a/packages/vchart-aurora-theme/demo/src/chartSpec.ts +++ b/packages/vchart-aurora-theme/demo/src/chartSpec.ts @@ -833,6 +833,88 @@ export const funnelSpec = { } }; +export const dualAxisBarSpec = { + type: 'common', + data: [ + { + id: 'dualAxisDataLeft', + values: [ + { category: '1月', type: '退款金额', value: 12.3 }, + { category: '2月', type: '退款金额', value: 15.8 }, + { category: '3月', type: '退款金额', value: 10.2 }, + { category: '4月', type: '退款金额', value: 18.6 }, + { category: '5月', type: '退款金额', value: 16.4 }, + { category: '6月', type: '退款金额', value: 20.1 } + ] + }, + { + id: 'dualAxisDataRight', + values: [ + { category: '1月', type: '退款率', value: 32.5 }, + { category: '2月', type: '退款率', value: 45.1 }, + { category: '3月', type: '退款率', value: 28.4 }, + { category: '4月', type: '退款率', value: 55.0 }, + { category: '5月', type: '退款率', value: 48.3 }, + { category: '6月', type: '退款率', value: 62.7 } + ] + } + ], + series: [ + { + type: 'bar', + id: 'amountBar', + name: '金额', + dataIndex: 0, + xField: ['category', 'type'], + yField: 'value' + }, + { + type: 'bar', + id: 'percentBar', + name: '占比', + dataIndex: 1, + xField: ['category', 'type'], + yField: 'value' + } + ], + axes: [ + { + orient: 'bottom', + type: 'band', + label: { + visible: true + } + }, + { + orient: 'left', + type: 'linear', + seriesId: ['amountBar'], + label: { + visible: true, + formatMethod: val => val.toFixed(1) + '万' + }, + grid: { + visible: true + } + }, + { + orient: 'right', + type: 'linear', + seriesId: ['percentBar'], + label: { + visible: true, + formatMethod: val => val.toFixed(1) + '%' + }, + grid: { + visible: false + } + } + ], + legends: { + visible: true + } +}; + export const areaSpec = { type: 'area', seriesMark: 'line', diff --git a/packages/vchart-aurora-theme/src/common/series/bar.ts b/packages/vchart-aurora-theme/src/common/series/bar.ts index 914364c..dd497a6 100644 --- a/packages/vchart-aurora-theme/src/common/series/bar.ts +++ b/packages/vchart-aurora-theme/src/common/series/bar.ts @@ -8,10 +8,6 @@ const bar: ISeriesTheme['bar'] = { style: { // @ts-ignore visible: datum => datum.value > 0 // 数据为0时隐藏柱子 - // outerBorder: { - // stroke: ['white', false, false, false], - // lineWidth: 1 - // } } } }; From 010ba7a0e8a00b64c137194da32e3cd6d8736abc Mon Sep 17 00:00:00 2001 From: "yangxian.x" Date: Wed, 18 Mar 2026 16:50:10 +0800 Subject: [PATCH 14/14] =?UTF-8?q?feat(theme):=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E4=B8=BB=E9=A2=98=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 为面积图添加seriesMark配置 - 调整tooltip面板圆角样式 - 优化饼图样式和交互，包括最小角度、标签布局等 - 更新demo中的图表配置，包括半径、标题和状态交互 --- .../vchart-aurora-theme/demo/src/chartSpec.ts | 42 ++++++++++++++----- .../src/common/component/tooltip.ts | 5 +++ .../src/common/series/area.ts | 1 + .../src/common/series/pie.ts | 16 +++++-- 4 files changed, 51 insertions(+), 13 deletions(-) diff --git a/packages/vchart-aurora-theme/demo/src/chartSpec.ts b/packages/vchart-aurora-theme/demo/src/chartSpec.ts index c3928a5..e50a0cb 100644 --- a/packages/vchart-aurora-theme/demo/src/chartSpec.ts +++ b/packages/vchart-aurora-theme/demo/src/chartSpec.ts @@ -517,7 +517,7 @@ export const pieSpec = { } }, legends: { - visible: true + visible: false }, label: { visible: true @@ -569,31 +569,45 @@ export const nestPieSpec = { values: subDatum } ], + title: { + visible: true, + text: '数据分布', + subtext: '可视化图表副标题一到两行文字' + }, series: [ { type: 'pie', dataIndex: 0, - outerRadius: 0.75, + outerRadius: 0.7, innerRadius: 0, valueField: 'value', categoryField: 'type', label: { + interactive: false, position: 'inside', formatMethod: (label, data) => { return data?.type; }, + + smartInvert: false, visible: true, - rotate: false + rotate: false, + style: { + fill: '#585858' + } }, color: nestColorList.map(item => item[item.length - 1]), pie: { state: { hover: { - outerRadius: 0.75 + outerRadius: 0.7 }, selected: { - outerRadius: 0.75 + outerRadius: 0.7 + }, + hover_reverse: { + opacity: 0.5 } }, style: { @@ -606,14 +620,22 @@ export const nestPieSpec = { { type: 'pie', dataIndex: 1, - outerRadius: 0.85, - innerRadius: 0.75, + outerRadius: 0.8, + innerRadius: 0.7, valueField: 'value', categoryField: 'type', label: { visible: true }, pie: { + state: { + hover: { + outerRadius: 0.85 + }, + selected: { + outerRadius: 0.85 + } + }, style: { fill: datum => { return datum.color; @@ -641,8 +663,8 @@ export const metricPieSpec = { ] } ], - outerRadius: 0.85, - innerRadius: 0.75, + outerRadius: 0.8, + innerRadius: 0.7, valueField: 'value', categoryField: 'type', title: { @@ -659,7 +681,7 @@ export const metricPieSpec = { autoFit: false, style: { fontWeight: '500', - fontFamily: 'Douyin Number ABC', + fontFamily: 'douyinNumber', fill: '#111', fontSize: 32, lineHeight: 46, diff --git a/packages/vchart-aurora-theme/src/common/component/tooltip.ts b/packages/vchart-aurora-theme/src/common/component/tooltip.ts index cdde208..4d43ac4 100644 --- a/packages/vchart-aurora-theme/src/common/component/tooltip.ts +++ b/packages/vchart-aurora-theme/src/common/component/tooltip.ts @@ -1,6 +1,11 @@ import type { ITooltipTheme } from '@visactor/vchart'; export const tooltip: ITooltipTheme = { + panel: { + border: { + radius: 8 + } + }, shape: { shapeType: 'circle', size: 8 diff --git a/packages/vchart-aurora-theme/src/common/series/area.ts b/packages/vchart-aurora-theme/src/common/series/area.ts index a4da8e7..9dc0fd8 100644 --- a/packages/vchart-aurora-theme/src/common/series/area.ts +++ b/packages/vchart-aurora-theme/src/common/series/area.ts @@ -5,6 +5,7 @@ export const area: Pick< SeriesTypeEnum.area | SeriesTypeForThemeEnum.area_vertical | SeriesTypeForThemeEnum.area_horizontal > = { area: { + seriesMark: 'line', point: { style: { visible: false, diff --git a/packages/vchart-aurora-theme/src/common/series/pie.ts b/packages/vchart-aurora-theme/src/common/series/pie.ts index be08a5a..1615fa3 100644 --- a/packages/vchart-aurora-theme/src/common/series/pie.ts +++ b/packages/vchart-aurora-theme/src/common/series/pie.ts @@ -9,7 +9,9 @@ export const pie: ISeriesTheme['pie'] = { stroke: '#fff', lineWidth: 2, lineJoin: 'round', - cornerRadius: 2 + cornerRadius: 2, + // @ts-ignore + visible: datum => datum.value > 0 // 数据为0时隐藏柱子 }, state: { hover: { @@ -22,10 +24,13 @@ export const pie: ISeriesTheme['pie'] = { } } }, + minAngle: 3, label: { visible: true, position: 'outside', formatMethod: (label, data) => { + const midAngle = data.__VCHART_ARC_MIDDLE_ANGLE; + const cos = Math.cos(midAngle); return { type: 'rich', text: [ @@ -35,14 +40,16 @@ export const pie: ISeriesTheme['pie'] = { fontSize: 16, fontWeight: 500, fontFamily: 'douyinNumber', - stroke: false + stroke: false, + textAlign: cos < 0 ? 'right' : 'left' }, { text: data?.type, fill: '#606165', fontSize: 12, fontWeight: 400, - stroke: false + stroke: false, + textAlign: cos < 0 ? 'right' : 'left' } ] }; @@ -52,6 +59,9 @@ export const pie: ISeriesTheme['pie'] = { lineWidth: 2 } }, + layout: { + align: 'labelLine' + }, style: { type: 'rich', boundsPadding: [6, 0, 6, 0]