feat: dynamically update the theme (#841)

Co-authored-by: GU Yiling <justice360@gmail.com>

README.md

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

README.zh-Hans.md

@@ -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。
 
 ### 静态方法
 

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

pnpm-lock.yaml

@@ -39,14 +39,14 @@ importers:
         specifier: ^2.0.1
         version: 2.0.1
       echarts:
-        specifier: ^5.5.1
+        specifier: ^6.0.0-beta.1
-        version: 5.5.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:
+  echarts@6.0.0-beta.1:
-    resolution: {integrity: sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==}
+    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

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

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;