From cbdc6bc1e3a297c31ac42799a2c6bc7ae217ff1c Mon Sep 17 00:00:00 2001 From: Yue JIN Date: Tue, 1 Jul 2025 16:42:06 +0800 Subject: [PATCH 1/5] feat: dynamically update the theme --- README.md | 3 ++- README.zh-Hans.md | 3 ++- package.json | 6 +++--- pnpm-lock.yaml | 31 +++++++++++++++++++------------ scripts/docs.mjs | 2 +- src/ECharts.ts | 12 +++++++++++- src/composables/api.ts | 1 + 7 files changed, 39 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 9ad752b..2ef6691 100644 --- a/README.md +++ b/README.md @@ -120,7 +120,7 @@ Drop ` - + ``` @@ -315,6 +315,7 @@ export default { ### Methods - `setOption` [→](https://echarts.apache.org/en/api.html#echartsInstance.setOption) +- `setTheme` (introduced in ECharts v6) - `getWidth` [→](https://echarts.apache.org/en/api.html#echartsInstance.getWidth) - `getHeight` [→](https://echarts.apache.org/en/api.html#echartsInstance.getHeight) - `getDom` [→](https://echarts.apache.org/en/api.html#echartsInstance.getDom) diff --git a/README.zh-Hans.md b/README.zh-Hans.md index 7bb8289..d80436a 100644 --- a/README.zh-Hans.md +++ b/README.zh-Hans.md @@ -120,7 +120,7 @@ import "echarts"; ```html - + ``` @@ -315,6 +315,7 @@ export default { ### 方法 - `setOption` [→](https://echarts.apache.org/zh/api.html#echartsInstance.setOption) +- `setTheme` (ECharts v6 新功能) - `getWidth` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getWidth) - `getHeight` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getHeight) - `getDom` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getDom) diff --git a/package.json b/package.json index e11bc79..163c7b9 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "docs": "node ./scripts/docs.mjs", "prepublishOnly": "pnpm run typecheck && pnpm run dev:typecheck && pnpm run build && publint" }, - "packageManager": "pnpm@10.11.0", + "packageManager": "pnpm@10.12.4", "type": "module", "main": "dist/index.js", "unpkg": "dist/index.min.js", @@ -36,7 +36,7 @@ "dist" ], "peerDependencies": { - "echarts": "^5.5.1", + "echarts": "^6.0.0-beta.1", "vue": "^3.1.1" }, "devDependencies": { @@ -50,7 +50,7 @@ "@vue/tsconfig": "^0.7.0", "@vueuse/core": "^13.1.0", "comment-mark": "^2.0.1", - "echarts": "^5.5.1", + "echarts": "^6.0.0-beta.1", "echarts-gl": "^2.0.9", "echarts-liquidfill": "^3.1.0", "esbuild-wasm": "^0.23.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 192fa13..5cd968d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,14 +39,14 @@ importers: specifier: ^2.0.1 version: 2.0.1 echarts: - specifier: ^5.5.1 - version: 5.5.1 + specifier: ^6.0.0-beta.1 + version: 6.0.0-beta.1 echarts-gl: specifier: ^2.0.9 - version: 2.0.9(echarts@5.5.1) + version: 2.0.9(echarts@6.0.0-beta.1) echarts-liquidfill: specifier: ^3.1.0 - version: 3.1.0(echarts@5.5.1) + version: 3.1.0(echarts@6.0.0-beta.1) esbuild-wasm: specifier: ^0.23.0 version: 0.23.0 @@ -820,8 +820,8 @@ packages: peerDependencies: echarts: ^5.0.1 - echarts@5.5.1: - resolution: {integrity: sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==} + echarts@6.0.0-beta.1: + resolution: {integrity: sha512-hEtCVOohAWr8fCMNXwg0cRZjkWO+LwbhO30cX/fzwb2LF4sHt06YHVWlAQclayhwHlxCyYtMG9FkFnNUAHK72Q==} emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} @@ -1511,6 +1511,9 @@ packages: zrender@5.6.0: resolution: {integrity: sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==} + zrender@6.0.0-rc.1: + resolution: {integrity: sha512-DWYxDvSHb69PlZ9bs2C4NHt0xHMojHztGForDFAiNSzw9XDwycwXAhJydFrNyq/vy0I8usTZ+KbtZyrX+6ePJQ==} + snapshots: '@aashutoshrathi/word-wrap@1.2.6': {} @@ -2134,20 +2137,20 @@ snapshots: eastasianwidth@0.2.0: {} - echarts-gl@2.0.9(echarts@5.5.1): + echarts-gl@2.0.9(echarts@6.0.0-beta.1): dependencies: claygl: 1.3.0 - echarts: 5.5.1 + echarts: 6.0.0-beta.1 zrender: 5.6.0 - echarts-liquidfill@3.1.0(echarts@5.5.1): + echarts-liquidfill@3.1.0(echarts@6.0.0-beta.1): dependencies: - echarts: 5.5.1 + echarts: 6.0.0-beta.1 - echarts@5.5.1: + echarts@6.0.0-beta.1: dependencies: tslib: 2.3.0 - zrender: 5.6.0 + zrender: 6.0.0-rc.1 emoji-regex@8.0.0: {} @@ -2819,3 +2822,7 @@ snapshots: zrender@5.6.0: dependencies: tslib: 2.3.0 + + zrender@6.0.0-rc.1: + dependencies: + tslib: 2.3.0 diff --git a/scripts/docs.mjs b/scripts/docs.mjs index dc9c42c..b8e1abc 100644 --- a/scripts/docs.mjs +++ b/scripts/docs.mjs @@ -8,7 +8,7 @@ const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/"; const DEP_VERSIONS = { vue: "3.5.13", - echarts: "5.5.1", + echarts: "6.0.0-beta.1", [name]: version, }; diff --git a/src/ECharts.ts b/src/ECharts.ts index 66e2646..a6b0d88 100644 --- a/src/ECharts.ts +++ b/src/ECharts.ts @@ -252,7 +252,7 @@ export default defineComponent({ ); watch( - [realTheme, realInitOptions], + realInitOptions, () => { cleanup(); init(); @@ -262,6 +262,16 @@ export default defineComponent({ }, ); + watch( + realTheme, + (theme) => { + chart.value?.setTheme(theme); + }, + { + deep: true, + }, + ); + watchEffect(() => { if (props.group && chart.value) { chart.value.group = props.group; diff --git a/src/composables/api.ts b/src/composables/api.ts index 0351713..3377056 100644 --- a/src/composables/api.ts +++ b/src/composables/api.ts @@ -6,6 +6,7 @@ const METHOD_NAMES = [ "getHeight", "getDom", "getOption", + "setTheme", "resize", "dispatchAction", "convertToPixel", From 5482f4c4ec7733ba4625eac360201fb49f393f57 Mon Sep 17 00:00:00 2001 From: Yue JIN Date: Tue, 1 Jul 2025 17:34:12 +0800 Subject: [PATCH 2/5] not expose setTheme --- README.md | 1 - README.zh-Hans.md | 1 - src/composables/api.ts | 1 - 3 files changed, 3 deletions(-) diff --git a/README.md b/README.md index 2ef6691..cf6c545 100644 --- a/README.md +++ b/README.md @@ -315,7 +315,6 @@ export default { ### Methods - `setOption` [→](https://echarts.apache.org/en/api.html#echartsInstance.setOption) -- `setTheme` (introduced in ECharts v6) - `getWidth` [→](https://echarts.apache.org/en/api.html#echartsInstance.getWidth) - `getHeight` [→](https://echarts.apache.org/en/api.html#echartsInstance.getHeight) - `getDom` [→](https://echarts.apache.org/en/api.html#echartsInstance.getDom) diff --git a/README.zh-Hans.md b/README.zh-Hans.md index d80436a..2380339 100644 --- a/README.zh-Hans.md +++ b/README.zh-Hans.md @@ -315,7 +315,6 @@ export default { ### 方法 - `setOption` [→](https://echarts.apache.org/zh/api.html#echartsInstance.setOption) -- `setTheme` (ECharts v6 新功能) - `getWidth` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getWidth) - `getHeight` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getHeight) - `getDom` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getDom) diff --git a/src/composables/api.ts b/src/composables/api.ts index 3377056..0351713 100644 --- a/src/composables/api.ts +++ b/src/composables/api.ts @@ -6,7 +6,6 @@ const METHOD_NAMES = [ "getHeight", "getDom", "getOption", - "setTheme", "resize", "dispatchAction", "convertToPixel", From d12e163cc24c5971eded2aff9063d7f857e67842 Mon Sep 17 00:00:00 2001 From: Yue JIN Date: Tue, 1 Jul 2025 18:06:19 +0800 Subject: [PATCH 3/5] docs: add note for `showLoading` and `hideLoading` method --- README.md | 3 +++ README.zh-Hans.md | 3 +++ 2 files changed, 6 insertions(+) diff --git a/README.md b/README.md index cf6c545..8a137f9 100644 --- a/README.md +++ b/README.md @@ -331,6 +331,9 @@ export default { - `clear` [→](https://echarts.apache.org/en/api.html#echartsInstance.clear) - `dispose` [→](https://echarts.apache.org/en/api.html#echartsInstance.dispose) +> [!NOTE] +> [`showLoading`](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) and [`hideLoading`](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading) are not exposed. Use the **`loading`** and **`loading-options`** props. + ### Static Methods Static methods can be accessed from [`echarts` itself](https://echarts.apache.org/en/api.html#echarts). diff --git a/README.zh-Hans.md b/README.zh-Hans.md index 2380339..ba9c38f 100644 --- a/README.zh-Hans.md +++ b/README.zh-Hans.md @@ -331,6 +331,9 @@ export default { - `clear` [→](https://echarts.apache.org/zh/api.html#echartsInstance.clear) - `dispose` [→](https://echarts.apache.org/zh/api.html#echartsInstance.dispose) +> [!NOTE] +> [`showLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading) 和 [`hideLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.hideLoading) 未被暴露，请使用 **`loading`** 和 **`loading-options`** prop。 + ### 静态方法 静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。 From d7d26c4c42e431b5e6e84a6fb3388d9606851f76 Mon Sep 17 00:00:00 2001 From: Yue JIN Date: Wed, 2 Jul 2025 18:19:56 +0800 Subject: [PATCH 4/5] update docs --- README.md | 5 ++++- README.zh-Hans.md | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8a137f9..4f86d2e 100644 --- a/README.md +++ b/README.md @@ -332,7 +332,10 @@ export default { - `dispose` [→](https://echarts.apache.org/en/api.html#echartsInstance.dispose) > [!NOTE] -> [`showLoading`](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) and [`hideLoading`](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading) are not exposed. Use the **`loading`** and **`loading-options`** props. +> Certain ECharts instance methods aren’t exposed because their functionality is already provided by component [props](#props): +> +> - Instead of [`showLoading`](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading), set the `loading` and `loading-options` props; +> - Instead of `setTheme`, set the `theme` prop. ### Static Methods diff --git a/README.zh-Hans.md b/README.zh-Hans.md index ba9c38f..c9dd040 100644 --- a/README.zh-Hans.md +++ b/README.zh-Hans.md @@ -332,7 +332,10 @@ export default { - `dispose` [→](https://echarts.apache.org/zh/api.html#echartsInstance.dispose) > [!NOTE] -> [`showLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading) 和 [`hideLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.hideLoading) 未被暴露，请使用 **`loading`** 和 **`loading-options`** prop。 +> 某些 ECharts 实例方法没有被暴露，因为它们的功能已经通过组件 [props](#props) 提供了： +> +> - 不要使用 [`showLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.hideLoading)，请设置 `loading` 和 `loading-options` props； +> - 不要使用 `setTheme`，请设置 `theme` prop。 ### 静态方法 From a88b5cbb4857f401f09c6782d09bc09ccc709c83 Mon Sep 17 00:00:00 2001 From: GU Yiling Date: Wed, 2 Jul 2025 18:30:22 +0800 Subject: [PATCH 5/5] Apply suggestions from code review --- README.md | 6 +++--- README.zh-Hans.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 4f86d2e..d461cf8 100644 --- a/README.md +++ b/README.md @@ -332,10 +332,10 @@ export default { - `dispose` [→](https://echarts.apache.org/en/api.html#echartsInstance.dispose) > [!NOTE] -> Certain ECharts instance methods aren’t exposed because their functionality is already provided by component [props](#props): +> The following ECharts instance methods aren't exposed because their functionality is already provided by component [props](#props): > -> - Instead of [`showLoading`](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading), set the `loading` and `loading-options` props; -> - Instead of `setTheme`, set the `theme` prop. +> - [`showLoading`](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading): use the `loading` and `loading-options` props instead. +> - `setTheme`: use the `theme` prop instead. ### Static Methods diff --git a/README.zh-Hans.md b/README.zh-Hans.md index c9dd040..6fefa2a 100644 --- a/README.zh-Hans.md +++ b/README.zh-Hans.md @@ -332,10 +332,10 @@ export default { - `dispose` [→](https://echarts.apache.org/zh/api.html#echartsInstance.dispose) > [!NOTE] -> 某些 ECharts 实例方法没有被暴露，因为它们的功能已经通过组件 [props](#props) 提供了： +> 如下 ECharts 实例方法没有被暴露，因为它们的功能已经通过组件 [props](#props) 提供了： > -> - 不要使用 [`showLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.hideLoading)，请设置 `loading` 和 `loading-options` props； -> - 不要使用 `setTheme`，请设置 `theme` prop。 +> - [`showLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading) / [`hideLoading`](https://echarts.apache.org/zh/api.html#echartsInstance.hideLoading)：请使用 `loading` 和 `loading-options` prop。 +> - `setTheme`：请使用 `theme` prop。 ### 静态方法