javascript/vueecharts
1
0
Fork 0
mirror of https://github.com/ecomfe/vue-echarts.git synced 2025-08-14 19:23:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: dynamically update the theme (#841)

Browse Source 
Co-authored-by: GU Yiling <justice360@gmail.com>
This commit is contained in:
Yue JIN
2025-07-02 18:32:50 +08:00
committed by Justineo
parent 6155bbb409
commit 30e7934aab
6 changed files with 44 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -120,7 +120,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
```html
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.13"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0-beta.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
```
@ -330,7 +330,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.
> The following ECharts instance methods aren't exposed because their functionality is already provided by component [props](#props):
>
> - [`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

7
README.zh-Hans.md
View File

@ -120,7 +120,7 @@ import "echarts";
```html
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.13"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0-beta.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
```
@ -330,7 +330,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` prop。
> - `setTheme`：请使用 `theme` prop。
### 静态方法

6
package.json
View File

@ -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",

31
pnpm-lock.yaml generated
View File

@ -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

2
scripts/docs.mjs
View File

@ -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,
};

12
src/ECharts.ts
View File

@ -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;