feat!: remove vue 2

README.md

@@ -96,100 +96,6 @@ const option = ref({
 
 </details>
 
-<details>
-<summary>Vue 2 <a href="https://stackblitz.com/edit/vue-echarts-vue-2?file=src%2FApp.vue">Demo →</a></summary>
-
-```vue
-<template>
-  <v-chart class="chart" :option="option" />
-</template>
-
-<script>
-import { use } from "echarts/core";
-import { CanvasRenderer } from "echarts/renderers";
-import { PieChart } from "echarts/charts";
-import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent
-} from "echarts/components";
-import VChart, { THEME_KEY } from "vue-echarts";
-
-use([
-  CanvasRenderer,
-  PieChart,
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent
-]);
-
-export default {
-  name: "HelloWorld",
-  components: {
-    VChart
-  },
-  provide: {
-    [THEME_KEY]: "dark"
-  },
-  data() {
-    return {
-      option: {
-        title: {
-          text: "Traffic Sources",
-          left: "center"
-        },
-        tooltip: {
-          trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)"
-        },
-        legend: {
-          orient: "vertical",
-          left: "left",
-          data: [
-            "Direct",
-            "Email",
-            "Ad Networks",
-            "Video Ads",
-            "Search Engines"
-          ]
-        },
-        series: [
-          {
-            name: "Traffic Sources",
-            type: "pie",
-            radius: "55%",
-            center: ["50%", "60%"],
-            data: [
-              { value: 335, name: "Direct" },
-              { value: 310, name: "Email" },
-              { value: 234, name: "Ad Networks" },
-              { value: 135, name: "Video Ads" },
-              { value: 1548, name: "Search Engines" }
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
-            }
-          }
-        ]
-      }
-    };
-  }
-};
-</script>
-
-<style scoped>
-.chart {
-  height: 400px;
-}
-</style>
-```
-
-</details>
-
 > [!IMPORTANT]
 > We encourage manually importing components and charts from ECharts for smaller bundle size. We've built an [import code generator](https://vue-echarts.dev/#codegen) to help you with that. You can just paste in your `option` code and we'll generate the precise import code for you.
 >
@@ -212,7 +118,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.4.33"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.5.13"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 ```
@@ -227,24 +133,6 @@ app.component('v-chart', VueECharts)
 
 </details>
 
-<details>
-<summary>Vue 2 <a href="https://stackblitz.com/edit/vue-echarts-vue-2-global?file=index.html">Demo →</a></summary>
-
-<!-- vue2Scripts:start -->
-```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-```
-<!-- vue2Scripts:end -->
-
-```js
-// register globally (or you can do it locally)
-Vue.component("v-chart", VueECharts);
-```
-
-</details>
-
 See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/src/demo).
 
 ### Props
@@ -359,7 +247,7 @@ See supported events [here →](https://echarts.apache.org/en/api.html#events)
 
 #### Native DOM Events
 
-As Vue-ECharts binds events to the ECharts instance by default, there is some caveat when using native DOM events. You need to prefix the event name with `native:` to bind native DOM events (or you can use the `.native` modifier in Vue 2, which is dropped in Vue 3).
+As Vue-ECharts binds events to the ECharts instance by default, there is some caveat when using native DOM events. You need to prefix the event name with `native:` to bind native DOM events.
 
 ```vue
 <template>
@@ -369,61 +257,56 @@ As Vue-ECharts binds events to the ECharts instance by default, there is some ca
 
 ### Provide / Inject
 
-Vue-ECharts provides provide/inject API for `theme`, `init-options`, `update-options` and `loading-options` to help configuring contextual options. eg. for `init-options` you can use the provide API like this:
+Vue-ECharts provides provide/inject API for `theme`, `init-options`, `update-options` and `loading-options` to help configuring contextual options. eg. for `theme` you can use the provide API like this:
 
 <details>
-<summary>Vue 3</summary>
+<summary>Composition API</summary>
 
 ```js
 import { THEME_KEY } from 'vue-echarts'
 import { provide } from 'vue'
 
-// composition API
 provide(THEME_KEY, 'dark')
 
-// options API
-{
-  provide: {
-    [THEME_KEY]: 'dark'
-  }
-}
+// or provide a ref
+const theme = ref('dark')
+provide(THEME_KEY, theme)
+
+// getter is also supported
+provide(THEME_KEY, () => theme.value)
 ```
 
 </details>
 
 <details>
-<summary>Vue 2</summary>
+<summary>Options API</summary>
 
 ```js
 import { THEME_KEY } from 'vue-echarts'
+import { computed } from 'vue'
 
-// in component options
-{
-  provide: {
-    [THEME_KEY]: 'dark'
+export default {
+  {
+    provide: {
+      [THEME_KEY]: 'dark'
+    }
   }
 }
-```
 
-> **Note**
->
-> You need to provide an object for Vue 2 if you want to change it dynamically.
->
-> ```js
-> // in component options
-> {
->   data () {
->     return {
->       theme: { value: 'dark' }
->     }
->   },
->   provide () {
->     return {
->       [THEME_KEY]: this.theme
->     }
->   }
-> }
-> ```
+// Or make injections reactive
+export default {
+  data() {
+    return {
+      theme: 'dark'
+    }
+  },
+  provide() {
+    return {
+      [THEME_KEY]: computed(() => this.theme)
+    }
+  }
+}
+```
 
 </details>