[add] Vue 3 quick start of Read Me document

[fix] Children Event & Preview Page failed

ReadMe.md

@@ -20,45 +20,68 @@ A real [JSX][1] wrapper for [ECharts][2] based on [TypeScript][3] & [Web compone
 | `>=1`  |  `main`  | ✅developing | Web components |
 |  `<1`  | `master` | ❌deprecated |     React      |
 
-## Quick start
+## Installation
 
-### Installation
-
-#### Core package
+### Core package
 
 ```shell
 npm i echarts-jsx
 ```
 
-#### View renderer
+### View renderer
 
 Any kinds of Render engines that you like can be used to render ECharts JSX tags.
 
-##### React 19+
+#### React 19+
 
 Old versions have a property bug of Custom elements: https://github.com/facebook/react/issues/11347
 
 ```shell
 npm i react@^19 react-dom@^19
 ```
 
-##### Preact
+#### Preact
 
 ```shell
 npm i preact
 ```
 
 then configure your tool-chain: https://preactjs.com/guide/v10/getting-started#integrating-into-an-existing-pipeline
 
-##### DOM Renderer v2 & WebCell v3
+#### DOM Renderer v2 & WebCell v3
 
 ```shell
 npm i dom-renderer@^2
 ```
 
 then configure your project as [the demo code](preview/).
 
-### Simple example
+#### Vue 3
+
+```shell
+npm create vite vue-echarts-app -- --template vue-ts
+```
+
+then configure your Vite as following code:
+
+```js
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    plugins: [
+        vue({
+            template: {
+                compilerOptions: {
+                    isCustomElement: tag => tag.startsWith('ec-')
+                }
+            }
+        })
+    ]
+});
+```
+
+## Simple example
 
 Origin: [ECharts official example][9]
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "echarts-jsx",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "A real JSX wrapper for ECharts based on TypeScript & Web components",
@@ -46,7 +46,7 @@
         "parcel": "~2.12.0",
         "prettier": "^3.2.5",
         "rimraf": "^5.0.5",
-        "typedoc": "^0.25.12",
+        "typedoc": "^0.25.13",
         "typedoc-plugin-mdn-links": "^3.1.19",
         "typescript": "~5.4.4"
     },

preview/index.tsx

@@ -6,7 +6,7 @@ import '../source/components/y-axis';
 import '../source/charts/line';
 
 new DOMRenderer().render(
-    <ec-svg-chart style={{ height: '75vh' }}>
+    <ec-svg-renderer style={{ height: '75vh' }}>
         <ec-title text="ECharts Getting Started Example" />
 
         <ec-x-axis
@@ -19,6 +19,6 @@ new DOMRenderer().render(
             data={[150, 230, 224, 218, 135, 147, 260]}
             onClick={console.log}
         />
-    </ec-svg-chart>,
+    </ec-svg-renderer>,
     document.querySelector('main')
 );

source/Option.ts

@@ -26,11 +26,24 @@ export abstract class ECOptionElement
     }
 
     get eventSelector() {
-        return [this.chartName || this.chartTagName, this['type']]
+        return [
+            this.isSeries && 'series',
+            this.chartName || this.chartTagName,
+            this['type']
+        ]
             .filter(Boolean)
             .join('.');
     }
 
+    get renderer() {
+        for (
+            let parent = this.parentElement;
+            parent;
+            parent = parent.parentElement
+        )
+            if (parent instanceof EChartsElement) return parent;
+    }
+
     connectedCallback() {
         for (const [key, value] of Object.entries(this.toJSON()))
             if (EventKeyPattern.test(key) && typeof value === 'function')
@@ -61,21 +74,11 @@ export abstract class ECOptionElement
     }
 
     listen(event: ZRElementEventName, handler: ZRElementEventHandler) {
-        if (this.isConnected)
-            this.closest<EChartsElement>('ec-chart')?.onChild(
-                event,
-                this.eventSelector,
-                handler
-            );
+        this.renderer?.onChild(event, this.eventSelector, handler);
     }
 
     forget(event: ZRElementEventName, handler: ZRElementEventHandler) {
-        if (this.isConnected)
-            this.closest<EChartsElement>('ec-chart')?.offChild(
-                event,
-                this.eventSelector,
-                handler
-            );
+        this.renderer?.offChild(event, this.eventSelector, handler);
     }
 
     setAttribute(name: string, value: string) {