vue-echarts 6.0.3 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +20 -26
  2. package/README.zh-Hans.md +70 -68
  3. package/dist/index.cjs.js +252 -235
  4. package/dist/index.cjs.js.map +1 -1
  5. package/dist/index.cjs.min.js +1 -1
  6. package/dist/index.cjs.min.js.map +1 -1
  7. package/dist/index.d.ts +125 -129
  8. package/dist/index.esm.js +253 -237
  9. package/dist/index.esm.js.map +1 -1
  10. package/dist/index.esm.min.js +1 -1
  11. package/dist/index.esm.min.js.map +1 -1
  12. package/dist/index.umd.js +262 -244
  13. package/dist/index.umd.js.map +1 -1
  14. package/dist/index.umd.min.js +1 -1
  15. package/dist/index.umd.min.js.map +1 -1
  16. package/dist/index.vue2.d.ts +11 -11
  17. package/package.json +31 -23
package/README.md CHANGED
@@ -117,7 +117,7 @@ import "echarts";
117
117
  #### SFC example
118
118
 
119
119
  <details>
120
- <summary>Vue 3</summary>
120
+ <summary>Vue 3 [Demo →](https://codesandbox.io/s/charming-night-2y6m6?file=/src/App.vue)</summary>
121
121
 
122
122
  ```vue
123
123
  <template>
@@ -203,12 +203,10 @@ export default defineComponent({
203
203
  </style>
204
204
  ```
205
205
 
206
- [Demo →](https://codesandbox.io/s/charming-night-2y6m6?file=/src/App.vue)
207
-
208
206
  </details>
209
207
 
210
208
  <details>
211
- <summary>Vue 2</summary>
209
+ <summary>Vue 2 [Demo →](https://codesandbox.io/s/suspicious-glitter-mk66j?file=/src/App.vue)</summary>
212
210
 
213
211
  ```vue
214
212
  <template>
@@ -299,8 +297,6 @@ export default {
299
297
  </style>
300
298
  ```
301
299
 
302
- [Demo →](https://codesandbox.io/s/suspicious-glitter-mk66j?file=/src/App.vue)
303
-
304
300
  </details>
305
301
 
306
302
  ### CDN & Global variable
@@ -308,13 +304,13 @@ export default {
308
304
  Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.
309
305
 
310
306
  <details>
311
- <summary>Vue 3</summary>
307
+ <summary>Vue 3 <!-- vue3Demo:start -->[Demo →](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAZhwAJhwHgHYc_3HJjrGJqYVWbzDKLZardabHZ7GAHBJHE5nC5XGDFMoEOB3ACsbzeXwCAL-vh-gJmcwWBCWKzWGy2u32h2Op3Ol2utwKqJK5UxADYcABGHBOfEkokyUUEBQANVuOAmKloAEFjAAKMyoCzoZQEZQqgCUpnMFmE9QIVVKGvVxuNfS6qHsVutxtoWAIAGVtLAHUancawNQCAAxZREaBaewAcgAkjQYKUADTCDIACVhCVOEHIymEADkYLcMonFZNlFBE3BlKg4AU4HGIGAIz6nV5403rZ0CF7DRrfc7sAR7BluKVlGBIORhG7KObyPBC22nbAwAOkyBZ7HShkFxYW9vhLVKFBOoZvT3e_vJtZrHHByAILQiPOz73_aUiNraKVb8BlF5hIwIlKIZgAiP8HXIP81XQLwAFI9S3Z9rV3RDjVga8MFPc8LDqCA6BXDJ03KTNSyfLDhCXfCQAo0isK1HV7AAbT3a0MlYCB6nIAgaLIjJBHfaBuKwjJFXQXNTgAdzqABrOBBPPDIpRSGBKGEETZJAVsUN9DI3RUOY8GEQRUGsNA5xAZjhAAXT3ZDz1rSZ4EYizHTI1AQxgW9h1HcdJ2nOYzM0siLG0QwPNXQxcLk3sR3iKoVlXLEsRgqLfXXT8nJALEnGSjTVx5bKMkswKgro5QnK03tgGEBJS1uewHgeLFEzcogwtY9jUS4kBhFsoKLCqmqoDq4QHn5Jxmvc28-OUATut6vqBtqsLngeBwJta28RLEghJNKGSMh64qFuqpb7H5Rr1rakBFMwFS1IO-agsWoawv5LEHAADku29dLKYpDOM0z1J6iyLCK0HhBgIhDBKOAIHilygvvKGPSCTC-uNOASnQShxIAISGr9hDGo6Max1RcfYMdawIAANexxoh61yZx8TOEPOpb1KawIl1cbhH5wWcCxeDzIq30fHF41JbImXe2slC5Z3Twe0lrx4J7OVKGh6g8JVAiii5LrExlGBBE4I24A1iwcCIacaH1kADGMDI9RV75CUlXw_CiGIQjkcQQC8YOgA)<!-- vue3Demo:end --></summary>
312
308
 
313
309
  <!-- vue3Scripts:start -->
314
310
  ```html
315
- <script src="https://cdn.jsdelivr.net/npm/vue@3.2.33"></script>
316
- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2"></script>
317
- <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.3"></script>
311
+ <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
312
+ <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
313
+ <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.1.0"></script>
318
314
  ```
319
315
  <!-- vue3Scripts:end -->
320
316
 
@@ -325,23 +321,17 @@ const app = Vue.createApp(...)
325
321
  app.component('v-chart', VueECharts)
326
322
  ```
327
323
 
328
- <!-- vue3Demo:start -->
329
-
330
- [Demo →](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAZhwAJhwHh5z_ccmOsYmpiqzeYZRbLVbrTY7PYwA4JI4nM4XK4wYplAhwO4AVjeL0-AX-v183wBMzmCwISxWaw2W12-0Ox1O50u11uBRRJXKGIAbDgnG88cTCTIhQQFAA1W44CYqWgAQWMAAozKgLOhlARlIqAJSmcwWYT1AhVUqqlUGg19Lqoezmi0G2hYAgAZW0sFt-vtBrA1AIADFlERoFp7AByACSNBgpQANMIMgAJGEJU4QcjKYQAORgtwycblk2UUDjcGUqDgBTg0YgYFDnvtXhj9YtnQI7r1qq9DuwBHsGW4pWUYEg5GEzsoJvI8DzzftsDAvfjICnUdKGVnFkbG-EtUoUE6hg9na7O8m1ms0b7IAgtCIM-PXZ9pSIGtopSvwGUXmEjAipSGwARN-trkN-yroF4ACk2rrg-FpbnBBqwBeGBHieFh1BAdCLhkKblGmRb3uhwjzjhICkUR6Hqpq9gANrbhaGSsBA9TkAQlHERkggvtAHHoRkcroFmpwAO51AA1nAfEnhk4opDAlDCIJUkgE2iFehkzoqHMeDCIIqDWGg04gAxwgALrbghJ5VpM8B0aZdrEaggYwFeA5DiOY4TnMxlqcRFjaIYrlLoYWHSV2g7xFUKxLpimKQeFXorm-9kgJiTgJapS7chlGRmX5_nUco9nqV2wDCAkRa3PY7yYnGzlEMFTEsSi7EgMIVn-RY5WVVA1XCA8ACMTj1S5V7ccovHtZ1XU9VVwXPA8DijY1V6CcJBBiaUkkZB1BWzRV832INDx1cIDVNSAcmYIpym7TN_lzX1wWDZiDgABwrZdWllMUekGUZKkdaZFj5SDwgwEQhglHAEAxY5_k3pDrpBGhXUGnAJToJQIkAEJ9e-wjDft6OY6oOPsMOVYEAAGvYI3gxaZPYyJnB7nUV6lNYERaiNwh8wLOCYjBJmlV6PhiwaEvEdLXYWYhsubp4nYS14MGdtKlBQ9Q2GKrhRScm1caSjAgicIbcDqxYOBEBONB6yABjGBk2rK18BJir4fhRDEIRyOIIBeEHQA)
331
-
332
- <!-- vue3Demo:end -->
333
-
334
324
  </details>
335
325
 
336
326
  <details>
337
- <summary>Vue 2</summary>
327
+ <summary>Vue 2 <!-- vue2Demo:start -->[Demo →](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAJhwANhwARgcc_3HJjrGJqYVWbzDKLZardabHZ7GAHBJHE5nC5XO43GDrShEQyUOAQfqoApGCB3N4vHAPL4BAF_Xw_QEzOYLAhLFZrDZbXb7Q7HU7nS5-GDFMoEOB3ACsOAAzFLKXSaTI5UDGaDmeC2VDObDuYi-Vc0QVBSVyqLXqSnLLqQR_r8rdIAGq3HBULHUOgEAAUGUKQvKGQANMIHTBBJwjSKAJSeVDSE4Ad0Dt3dZlQFlh9gyBmM_vMwnQygIynd4dMOYs9QIVVKKeTFlrwj6XVQ9hrddrtCwBAAytpYM3S62LGBqAQAGLKIjQLT2ADkAEkaDBSgGMgAJWEJU4QcjKYQAORgt39wgAgpNlFAA3BlKg4AU4IuIGBp_2614_S-23jeyWUwO29gCHTEBuFKZQwEgchhE7ShK3IeBs1_P9hFgMBAOEDI4IXUoMg_Cw31w4RakoKBOkMPtEL_AhJmsaxFyAvEYCIBCkMHOoiHzWhSiA4BlC8YRGAiUohmACI-Obcg-KTdAvAAUnDHCKNfd9FNrWBaIwciWPrSY3SAjdyi3c9mJYlC0IyUzjKQvMC3sABtAi6wyVgIHqcgCEsliMkEdjoA8pCMmPdA91OWM6gAazgPy_wyO0UhgSgT3QSKQGUrSLAyTsVDmPBhEEVBrDQeCQAc4QAF0CPwlSLHvHSVmEeyqtrFstNQccYCAkCwIgqCYLmIrUrS7RDHa9CQEMCAYCigdQPiKo6oyMUxRkqbW0wzi7IWpxlpS0bni2jJSoGrTrOUDbGoHYBhASc9bnsSVJTFANWqIEanJcwV3JAYRKrSpqrpukbJTeJwnraoDvOUXyvp-37TH-qBbuEB5JQcUGXqAwLgoIULSgijJvqOtLLuuhGRreB60dekBYswBLAuSgmSrrYmAfsN4xQcAAOSmgMyspily_LCoZnxztrQ6meERjDBKXE6uatKGKIbsgk02HqpKdBKFjAAhBGuOEYHCd-uBNe19hwPvAgAA17BByW61N1Rtc4Yi6iA0prAiQsQeEX3_ZwMV5OKsXX0l0WtIjv9ypUqO8KjPDvEjXwqRtEIohiEI5HEEAvDzoA)<!-- vue2Demo:end --></summary>
338
328
 
339
329
  <!-- vue2Scripts:start -->
340
330
  ```html
341
331
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
342
- <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.6.1"></script>
343
- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2"></script>
344
- <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.3"></script>
332
+ <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.6.2"></script>
333
+ <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
334
+ <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.1.0"></script>
345
335
  ```
346
336
  <!-- vue2Scripts:end -->
347
337
 
@@ -350,12 +340,6 @@ app.component('v-chart', VueECharts)
350
340
  Vue.component("v-chart", VueECharts);
351
341
  ```
352
342
 
353
- <!-- vue2Demo:start -->
354
-
355
- [Demo →](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAJhwANhwARgcc_3HJjrGJqYVWbzDKLZardabHZ7GAHBJHE5nC5XO43GDrShEQyUOAQfqoApGCB3N4vd5fAIAv6-H6AmZzBYEJYrNYbLa7faHY6nc6XPwwYplAhwO4AVhwAGYcA8KbTqTI5UCGaCmeDWVCObCuYjeVc0QUBSVyiLXk5JbKqQR_r8rdIAGq3HBULHUOgEAAUGUKgvKGQANMIHTBBJwjcKAJSeVDSE4Ad0Dt3dZlQFlh9gyBmM_vMwnQygIynd4dMOYs9QIVVKKeTFlrwj6XVQ9hrddrtCwBAAytpYM3S62LGBqAQAGLKIjQLT2ADkAEkaDBSgGMgAJWEJU4QcjKYQAORgt39wgAgpNlFAA3BlKg4AU4IuIGBp_2614_S-23jeyWUwO29gCHTEBuFKZQwEgchhE7ShK3IeBs1_P9hFgMBAOEDI4IXUoMg_Cw31w4RakoKBOkMPtEL_AhJmsaxFyAvEYCIBCkMHOoiHzWhSiA4BlC8YRGAiUohmACI-Obcg-KTdAvAAUnDHCKNfd9FNrWBaIwciWPrSY3SAjdyi3c9mJYlC0IyUzjKQvMC3sABtAi6wyVgIHqcgCEsliMkEdjoA8pCMmPdA91OWM6gAazgPy_wyO0UhgSgT3QSKQGUrSLAyTsVDmPBhEEVBrDQeCQAc4QAF0CPwlSLHvHSVmEeyqtrFstNQccYCAkCwIgqCYLmIrUrS7RDHa9CQEMCAYCigdQPiKo6oyUVRRkqbW0wzi7IWpxlpS0bni2jJSoGrTrOUDbGoHYBhASc9bnsCUJVFANWqIEanJcgV3JAYRKrSpqrpukaJTeJwnraoDvOUXyvp-37TH-qBbuEB4JQcUGXqAwLgoIULSgijJvqOtLLuuhGRreB60dekBYswBLAuSgmSrrYmAfsN5RQcAAOSmgMyspily_LCoZnxztrQ6meERjDBKXE6uatKGKIbsgk02HqpKdBKFjAAhBGuOEYHCd-uBNe19hwPvAgAA17BByW61N1Rtc4Yi6iA0prAiQsQeEX3_ZwUV5OKsXX0l0WtIjv9ypUqO8KjPDvEjXxKRtEIohiEI5HEEAvDzoA)
356
-
357
- <!-- vue2Demo:end -->
358
-
359
343
  </details>
360
344
 
361
345
  See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/src/demo).
@@ -473,6 +457,16 @@ Static methods can be accessed from [`echarts` itself](https://echarts.apache.or
473
457
 
474
458
  ### Events
475
459
 
460
+ You can bind events with Vue's `v-on` directive.
461
+
462
+ ```vue
463
+ <template>
464
+ <v-chart :option="option" @highlight="handleHighlight"/>
465
+ </template>
466
+ ```
467
+
468
+ > Only the `.once` event modifier is supported as other modifiers are tightly coupled with the DOM event system.
469
+
476
470
  Vue-ECharts support the following events:
477
471
 
478
472
  - `highlight` [→](https://echarts.apache.org/en/api.html#events.highlight)
package/README.zh-Hans.md CHANGED
@@ -115,7 +115,7 @@ import "echarts";
115
115
  #### 单文件组件示例
116
116
 
117
117
  <details>
118
- <summary>Vue 3</summary>
118
+ <summary>Vue 3 [Demo →](https://codesandbox.io/s/charming-night-2y6m6?file=/src/App.vue)</summary>
119
119
 
120
120
  ```vue
121
121
  <template>
@@ -204,7 +204,7 @@ export default defineComponent({
204
204
  </details>
205
205
 
206
206
  <details>
207
- <summary>Vue 2</summary>
207
+ <summary>Vue 2 [Demo →](https://codesandbox.io/s/suspicious-glitter-mk66j?file=/src/App.vue)</summary>
208
208
 
209
209
  ```vue
210
210
  <template>
@@ -302,13 +302,13 @@ export default {
302
302
  用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口：
303
303
 
304
304
  <details>
305
- <summary>Vue 3</summary>
305
+ <summary>Vue 3 <!-- vue3Demo:start -->[Demo →](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAZhwAJhwHgHYc_3HJjrGJqYVWbzDKLZardabHZ7GAHBJHE5nC5XGDFMoEOB3ACsbzeXwCAL-vh-gJmcwWBCWKzWGy2u32h2Op3Ol2utwKqJK5UxADYcABGHBOfEkokyUUEBQANVuOAmKloAEFjAAKMyoCzoZQEZQqgCUpnMFmE9QIVVKGvVxuNfS6qHsVutxtoWAIAGVtLAHUancawNQCAAxZREaBaewAcgAkjQYKUADTCDIACVhCVOEHIymEADkYLcMonFZNlFBE3BlKg4AU4HGIGAIz6nV5403rZ0CF7DRrfc7sAR7BluKVlGBIORhG7KObyPBC22nbAwAOkyBZ7HShkFxYW9vhLVKFBOoZvT3e_vJtZrHHByAILQiPOz73_aUiNraKVb8BlF5hIwIlKIZgAiP8HXIP81XQLwAFI9S3Z9rV3RDjVga8MFPc8LDqCA6BXDJ03KTNSyfLDhCXfCQAo0isK1HV7AAbT3a0MlYCB6nIAgaLIjJBHfaBuKwjJFXQXNTgAdzqABrOBBPPDIpRSGBKGEETZJAVsUN9DI3RUOY8GEQRUGsNA5xAZjhAAXT3ZDz1rSZ4EYizHTI1AQxgW9h1HcdJ2nOYzM0siLG0QwPNXQxcLk3sR3iKoVlXLEsRgqLfXXT8nJALEnGSjTVx5bKMkswKgro5QnK03tgGEBJS1uewHgeLFEzcogwtY9jUS4kBhFsoKLCqmqoDq4QHn5Jxmvc28-OUATut6vqBtqsLngeBwJta28RLEghJNKGSMh64qFuqpb7H5Rr1rakBFMwFS1IO-agsWoawv5LEHAADku29dLKYpDOM0z1J6iyLCK0HhBgIhDBKOAIHilygvvKGPSCTC-uNOASnQShxIAISGr9hDGo6Max1RcfYMdawIAANexxoh61yZx8TOEPOpb1KawIl1cbhH5wWcCxeDzIq30fHF41JbImXe2slC5Z3Twe0lrx4J7OVKGh6g8JVAiii5LrExlGBBE4I24A1iwcCIacaH1kADGMDI9RV75CUlXw_CiGIQjkcQQC8YOgA)<!-- vue3Demo:end --></summary>
306
306
 
307
307
  <!-- vue3Scripts:start -->
308
308
  ```html
309
- <script src="https://cdn.jsdelivr.net/npm/vue@3.2.33"></script>
310
- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2"></script>
311
- <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.3"></script>
309
+ <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
310
+ <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
311
+ <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.1.0"></script>
312
312
  ```
313
313
  <!-- vue3Scripts:end -->
314
314
 
@@ -319,23 +319,17 @@ const app = Vue.createApp(...)
319
319
  app.component('v-chart', VueECharts)
320
320
  ```
321
321
 
322
- <!-- vue3Demo:start -->
323
-
324
- [Demo →](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAZhwAJhwHh5z_ccmOsYmpiqzeYZRbLVbrTY7PYwA4JI4nM4XK4wYplAhwO4AVjeL0-AX-v183wBMzmCwISxWaw2W12-0Ox1O50u11uBRRJXKGIAbDgnG88cTCTIhQQFAA1W44CYqWgAQWMAAozKgLOhlARlIqAJSmcwWYT1AhVUqqlUGg19Lqoezmi0G2hYAgAZW0sFt-vtBrA1AIADFlERoFp7AByACSNBgpQANMIMgAJGEJU4QcjKYQAORgtwycblk2UUDjcGUqDgBTg0YgYFDnvtXhj9YtnQI7r1qq9DuwBHsGW4pWUYEg5GEzsoJvI8DzzftsDAvfjICnUdKGVnFkbG-EtUoUE6hg9na7O8m1ms0b7IAgtCIM-PXZ9pSIGtopSvwGUXmEjAipSGwARN-trkN-yroF4ACk2rrg-FpbnBBqwBeGBHieFh1BAdCLhkKblGmRb3uhwjzjhICkUR6Hqpq9gANrbhaGSsBA9TkAQlHERkggvtAHHoRkcroFmpwAO51AA1nAfEnhk4opDAlDCIJUkgE2iFehkzoqHMeDCIIqDWGg04gAxwgALrbghJ5VpM8B0aZdrEaggYwFeA5DiOY4TnMxlqcRFjaIYrlLoYWHSV2g7xFUKxLpimKQeFXorm-9kgJiTgJapS7chlGRmX5_nUco9nqV2wDCAkRa3PY7yYnGzlEMFTEsSi7EgMIVn-RY5WVVA1XCA8ACMTj1S5V7ccovHtZ1XU9VVwXPA8DijY1V6CcJBBiaUkkZB1BWzRV832INDx1cIDVNSAcmYIpym7TN_lzX1wWDZiDgABwrZdWllMUekGUZKkdaZFj5SDwgwEQhglHAEAxY5_k3pDrpBGhXUGnAJToJQIkAEJ9e-wjDft6OY6oOPsMOVYEAAGvYI3gxaZPYyJnB7nUV6lNYERaiNwh8wLOCYjBJmlV6PhiwaEvEdLXYWYhsubp4nYS14MGdtKlBQ9Q2GKrhRScm1caSjAgicIbcDqxYOBEBONB6yABjGBk2rK18BJir4fhRDEIRyOIIBeEHQA)
325
-
326
- <!-- vue3Demo:end -->
327
-
328
322
  </details>
329
323
 
330
324
  <details>
331
- <summary>Vue 2</summary>
325
+ <summary>Vue 2 <!-- vue2Demo:start -->[Demo →](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgBYAuAtlEqAMYD2qBMNSIAPAIQAiA8gMIAqAmgAoBRAASESAPgA6qRmKhSZeGAEN0CxnAIBPWAoDEygA6HhwacNEwIAc0KJhAFgAMTw1gDc0gL7TGAek0dGHU_JVV1ACNKdC11dAgAN2EIdABeSRAjQwyFC0YEgFpyPGUAJwJhZQBXAkpS-AgALxhhREpDAghqdJB2zuoMvxD4hPU4clKIDuE4UvIewgJDOEQ_P3J0VBwAKzhMKETSnFQYAj9UQyI_BKqYAAEAJhwANhwARgcc_3HJjrGJqYVWbzDKLZardabHZ7GAHBJHE5nC5XO43GDrShEQyUOAQfqoApGCB3N4vHAPL4BAF_Xw_QEzOYLAhLFZrDZbXb7Q7HU7nS5-GDFMoEOB3ACsOAAzFLKXSaTI5UDGaDmeC2VDObDuYi-Vc0QVBSVyqLXqSnLLqQR_r8rdIAGq3HBULHUOgEAAUGUKQvKGQANMIHTBBJwjSKAJSeVDSE4Ad0Dt3dZlQFlh9gyBmM_vMwnQygIynd4dMOYs9QIVVKKeTFlrwj6XVQ9hrddrtCwBAAytpYM3S62LGBqAQAGLKIjQLT2ADkAEkaDBSgGMgAJWEJU4QcjKYQAORgt39wgAgpNlFAA3BlKg4AU4IuIGBp_2614_S-23jeyWUwO29gCHTEBuFKZQwEgchhE7ShK3IeBs1_P9hFgMBAOEDI4IXUoMg_Cw31w4RakoKBOkMPtEL_AhJmsaxFyAvEYCIBCkMHOoiHzWhSiA4BlC8YRGAiUohmACI-Obcg-KTdAvAAUnDHCKNfd9FNrWBaIwciWPrSY3SAjdyi3c9mJYlC0IyUzjKQvMC3sABtAi6wyVgIHqcgCEsliMkEdjoA8pCMmPdA91OWM6gAazgPy_wyO0UhgSgT3QSKQGUrSLAyTsVDmPBhEEVBrDQeCQAc4QAF0CPwlSLHvHSVmEeyqtrFstNQccYCAkCwIgqCYLmIrUrS7RDHa9CQEMCAYCigdQPiKo6oyMUxRkqbW0wzi7IWpxlpS0bni2jJSoGrTrOUDbGoHYBhASc9bnsSVJTFANWqIEanJcwV3JAYRKrSpqrpukbJTeJwnraoDvOUXyvp-37TH-qBbuEB5JQcUGXqAwLgoIULSgijJvqOtLLuuhGRreB60dekBYswBLAuSgmSrrYmAfsN4xQcAAOSmgMyspily_LCoZnxztrQ6meERjDBKXE6uatKGKIbsgk02HqpKdBKFjAAhBGuOEYHCd-uBNe19hwPvAgAA17BByW61N1Rtc4Yi6iA0prAiQsQeEX3_ZwMV5OKsXX0l0WtIjv9ypUqO8KjPDvEjXwqRtEIohiEI5HEEAvDzoA)<!-- vue2Demo:end --></summary>
332
326
 
333
327
  <!-- vue2Scripts:start -->
334
328
  ```html
335
329
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
336
- <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.6.1"></script>
337
- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2"></script>
338
- <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.3"></script>
330
+ <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.6.2"></script>
331
+ <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
332
+ <script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.1.0"></script>
339
333
  ```
340
334
  <!-- vue2Scripts:end -->
341
335
 
@@ -344,8 +338,6 @@ app.component('v-chart', VueECharts)
344
338
  Vue.component("v-chart", VueECharts);
345
339
  ```
346
340
 
347
- [Demo →](https://codepen.io/Justineo/pen/gOLGxJR)
348
-
349
341
  </details>
350
342
 
351
343
  可以在[这里](https://github.com/ecomfe/vue-echarts/tree/main/src/demo)查看更多例子。
@@ -398,6 +390,66 @@ Vue.component("v-chart", VueECharts);
398
390
 
399
391
  在性能敏感（数据量很大）的场景下，我们最好对于 `option` prop 绕过 Vue 的响应式系统。当将 `manual-update` prop 指定为 `true` 且不传入 `option` prop 时，数据将不会被监听。然后，需要用 `ref` 获取组件实例以后手动调用 `setOption` 方法来更新图表。
400
392
 
393
+ ### 事件
394
+
395
+ 可以使用 Vue 的 `v-on` 指令绑定事件。
396
+
397
+ ```vue
398
+ <template>
399
+ <v-chart :option="option" @highlight="handleHighlight"/>
400
+ </template>
401
+ ```
402
+
403
+ > 仅支持 `.once` 修饰符，因为其它修饰符都与 DOM 事件机制强耦合。
404
+
405
+ Vue-ECharts 支持如下事件：
406
+
407
+ - `highlight` [→](https://echarts.apache.org/zh/api.html#events.highlight)
408
+ - `downplay` [→](https://echarts.apache.org/zh/api.html#events.downplay)
409
+ - `selectchanged` [→](https://echarts.apache.org/zh/api.html#events.selectchanged)
410
+ - `legendselectchanged` [→](https://echarts.apache.org/zh/api.html#events.legendselectchanged)
411
+ - `legendselected` [→](https://echarts.apache.org/zh/api.html#events.legendselected)
412
+ - `legendunselected` [→](https://echarts.apache.org/zh/api.html#events.legendunselected)
413
+ - `legendselectall` [→](https://echarts.apache.org/zh/api.html#events.legendselectall)
414
+ - `legendinverseselect` [→](https://echarts.apache.org/zh/api.html#events.legendinverseselect)
415
+ - `legendscroll` [→](https://echarts.apache.org/zh/api.html#events.legendscroll)
416
+ - `datazoom` [→](https://echarts.apache.org/zh/api.html#events.datazoom)
417
+ - `datarangeselected` [→](https://echarts.apache.org/zh/api.html#events.datarangeselected)
418
+ - `timelinechanged` [→](https://echarts.apache.org/zh/api.html#events.timelinechanged)
419
+ - `timelineplaychanged` [→](https://echarts.apache.org/zh/api.html#events.timelineplaychanged)
420
+ - `restore` [→](https://echarts.apache.org/zh/api.html#events.restore)
421
+ - `dataviewchanged` [→](https://echarts.apache.org/zh/api.html#events.dataviewchanged)
422
+ - `magictypechanged` [→](https://echarts.apache.org/zh/api.html#events.magictypechanged)
423
+ - `geoselectchanged` [→](https://echarts.apache.org/zh/api.html#events.geoselectchanged)
424
+ - `geoselected` [→](https://echarts.apache.org/zh/api.html#events.geoselected)
425
+ - `geounselected` [→](https://echarts.apache.org/zh/api.html#events.geounselected)
426
+ - `axisareaselected` [→](https://echarts.apache.org/zh/api.html#events.axisareaselected)
427
+ - `brush` [→](https://echarts.apache.org/zh/api.html#events.brush)
428
+ - `brushEnd` [→](https://echarts.apache.org/zh/api.html#events.brushEnd)
429
+ - `brushselected` [→](https://echarts.apache.org/zh/api.html#events.brushselected)
430
+ - `globalcursortaken` [→](https://echarts.apache.org/zh/api.html#events.globalcursortaken)
431
+ - `rendered` [→](https://echarts.apache.org/zh/api.html#events.rendered)
432
+ - `finished` [→](https://echarts.apache.org/zh/api.html#events.finished)
433
+ - 鼠标事件
434
+ - `click` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.click)
435
+ - `dblclick` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.dblclick)
436
+ - `mouseover` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mouseover)
437
+ - `mouseout` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mouseout)
438
+ - `mousemove` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mousemove)
439
+ - `mousedown` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mousedown)
440
+ - `mouseup` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mouseup)
441
+ - `globalout` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.globalout)
442
+ - `contextmenu` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.contextmenu)
443
+ - ZRender 事件
444
+ - `zr:click`
445
+ - `zr:mousedown`
446
+ - `zr:mouseup`
447
+ - `zr:mousewheel`
448
+ - `zr:dblclick`
449
+ - `zr:contextmenu`
450
+
451
+ 请参考支持的事件列表。[前往 →](https://echarts.apache.org/zh/api.html#events)
452
+
401
453
  ### Provide / Inject
402
454
 
403
455
  Vue-ECharts 为 `theme`、`init-options`、`update-options` 和 `loading-options` 提供了 provide/inject API，以通过上下文配置选项。例如：可以通过如下方式来使用 provide API 为 `init-options` 提供上下文配置：
@@ -461,56 +513,6 @@ import { INIT_OPTIONS_KEY } from 'vue-echarts'
461
513
 
462
514
  静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。
463
515
 
464
- ### 事件
465
-
466
- Vue-ECharts 支持如下事件：
467
-
468
- - `highlight` [→](https://echarts.apache.org/zh/api.html#events.highlight)
469
- - `downplay` [→](https://echarts.apache.org/zh/api.html#events.downplay)
470
- - `selectchanged` [→](https://echarts.apache.org/zh/api.html#events.selectchanged)
471
- - `legendselectchanged` [→](https://echarts.apache.org/zh/api.html#events.legendselectchanged)
472
- - `legendselected` [→](https://echarts.apache.org/zh/api.html#events.legendselected)
473
- - `legendunselected` [→](https://echarts.apache.org/zh/api.html#events.legendunselected)
474
- - `legendselectall` [→](https://echarts.apache.org/zh/api.html#events.legendselectall)
475
- - `legendinverseselect` [→](https://echarts.apache.org/zh/api.html#events.legendinverseselect)
476
- - `legendscroll` [→](https://echarts.apache.org/zh/api.html#events.legendscroll)
477
- - `datazoom` [→](https://echarts.apache.org/zh/api.html#events.datazoom)
478
- - `datarangeselected` [→](https://echarts.apache.org/zh/api.html#events.datarangeselected)
479
- - `timelinechanged` [→](https://echarts.apache.org/zh/api.html#events.timelinechanged)
480
- - `timelineplaychanged` [→](https://echarts.apache.org/zh/api.html#events.timelineplaychanged)
481
- - `restore` [→](https://echarts.apache.org/zh/api.html#events.restore)
482
- - `dataviewchanged` [→](https://echarts.apache.org/zh/api.html#events.dataviewchanged)
483
- - `magictypechanged` [→](https://echarts.apache.org/zh/api.html#events.magictypechanged)
484
- - `geoselectchanged` [→](https://echarts.apache.org/zh/api.html#events.geoselectchanged)
485
- - `geoselected` [→](https://echarts.apache.org/zh/api.html#events.geoselected)
486
- - `geounselected` [→](https://echarts.apache.org/zh/api.html#events.geounselected)
487
- - `axisareaselected` [→](https://echarts.apache.org/zh/api.html#events.axisareaselected)
488
- - `brush` [→](https://echarts.apache.org/zh/api.html#events.brush)
489
- - `brushEnd` [→](https://echarts.apache.org/zh/api.html#events.brushEnd)
490
- - `brushselected` [→](https://echarts.apache.org/zh/api.html#events.brushselected)
491
- - `globalcursortaken` [→](https://echarts.apache.org/zh/api.html#events.globalcursortaken)
492
- - `rendered` [→](https://echarts.apache.org/zh/api.html#events.rendered)
493
- - `finished` [→](https://echarts.apache.org/zh/api.html#events.finished)
494
- - 鼠标事件
495
- - `click` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.click)
496
- - `dblclick` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.dblclick)
497
- - `mouseover` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mouseover)
498
- - `mouseout` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mouseout)
499
- - `mousemove` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mousemove)
500
- - `mousedown` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mousedown)
501
- - `mouseup` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.mouseup)
502
- - `globalout` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.globalout)
503
- - `contextmenu` [→](https://echarts.apache.org/zh/api.html#events.Mouse%20events.contextmenu)
504
- - ZRender 事件
505
- - `zr:click`
506
- - `zr:mousedown`
507
- - `zr:mouseup`
508
- - `zr:mousewheel`
509
- - `zr:dblclick`
510
- - `zr:contextmenu`
511
-
512
- 请参考支持的事件列表。[前往 →](https://echarts.apache.org/zh/api.html#events)
513
-
514
516
  ## 迁移到 v6
515
517
 
516
518
  > 💡 请确保同时查阅 ECharts 5 的[升级指南](https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97)。