vue-echarts 8.0.1 → 8.1.0-beta.2

package/README.md

@@ -6,7 +6,7 @@
 
 > Still using Vue 2? Read v7 docs [here →](https://github.com/ecomfe/vue-echarts/tree/7.x)
 
-## Installation & Usage
+## Installation & usage
 
 ### npm
 
@@ -16,7 +16,7 @@ npm install echarts vue-echarts
 
 #### Example
 
-<details>
+<details open>
 <summary><a href="https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue">Demo →</a></summary>
 
 ```vue
@@ -28,21 +28,11 @@ npm install echarts vue-echarts
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { PieChart } from "echarts/charts";
-import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-} from "echarts/components";
+import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
 import VChart, { THEME_KEY } from "vue-echarts";
 import { ref, provide } from "vue";
 
-use([
-  CanvasRenderer,
-  PieChart,
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-]);
+use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);
 
 provide(THEME_KEY, "dark");
 
@@ -94,12 +84,17 @@ const option = ref({
 
 </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.
->
-> ![](https://github.com/ecomfe/vue-echarts/assets/1726061/f9c38a06-3422-4f0e-ab8c-f242d9aea9aa)
->
-> [Try it →](https://vue-echarts.dev/#codegen)
+#### On-demand importing&nbsp;<sup><a href="#on-demand-importing"><img src="https://img.shields.io/badge/recommended-10B981" alt="recommended" align="middle" height="16"></a></sup>
+
+To keep your bundle size small, we recommend manually importing the components and charts you need from ECharts. To make this easier, we’ve created an [import code generator](https://vue-echarts.dev/#codegen). Simply paste your `option` code into the tool, and it will generate the exact import statements for you.
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="assets/codegen-dark.webp">
+  <source media="(prefers-color-scheme: light)" srcset="assets/codegen-light.webp">
+  <img alt="A modal for generating ECharts import code. The left panel shows a chart configuration in JSON, while the right panel displays TypeScript import statements for ECharts charts and components." src="assets/codegen-light.webp">
+</picture>
+
+[Try it →](https://vue-echarts.dev/#codegen)
 
 But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
 
@@ -118,8 +113,8 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue@3.5.21"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.0.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.5.27"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.1.0-beta.2"></script>
 ```
 
 <!-- scripts:end -->
@@ -153,7 +148,7 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/demo).
 
   ECharts' universal interface. Modifying this prop triggers Vue ECharts to compute an update plan and call `setOption`. Read more [here →](https://echarts.apache.org/en/option.html)
 
-  #### Smart Update
+  #### Smart update
   - If you supply `update-options` (via prop or injection), Vue ECharts forwards it directly to `setOption` and skips the planner.
   - Manual `setOption` calls (only available when `manual-update` is `true`) behave like native ECharts, honouring only the per-call override you pass in and are not carried across re-initializations.
   - Otherwise, Vue ECharts analyses the change: removed objects become `null`, removed arrays become `[]` with `replaceMerge`, ID/anonymous deletions trigger `replaceMerge`, and risky changes fall back to `notMerge: true`.
@@ -247,7 +242,7 @@ Vue ECharts support the following events:
 
 See supported events in the [ECharts API reference →](https://echarts.apache.org/en/api.html#events)
 
-#### Native DOM 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.
 
@@ -257,7 +252,9 @@ As Vue ECharts binds events to the ECharts instance by default, there is some ca
 </template>
 ```
 
-### Provide / Inject
+Event handlers passed via attrs are reactive by default. Updating `onClick`, `onZr:*`, or `onNative:*` handlers will rebind them automatically.
+
+### Provide / inject
 
 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:
 
@@ -337,9 +334,15 @@ export default {
 
 ### Slots
 
-Vue ECharts allows you to define ECharts option's [`tooltip.formatter`](https://echarts.apache.org/en/option.html#tooltip.formatter) and [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/en/option.html#toolbox.feature.dataView.optionToContent) callbacks via Vue slots instead of defining them in your `option` object. This simplifies custom HTMLElement rendering using familiar Vue templating.
+Vue ECharts supports three slot categories:
+
+- Callback slots for [`tooltip.formatter`](https://echarts.apache.org/en/option.html#tooltip.formatter).
+- Callback slots for [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/en/option.html#toolbox.feature.dataView.optionToContent).
+- Optional `#graphic` slot (enabled by importing `vue-echarts/graphic`) for building [`option.graphic`](https://echarts.apache.org/en/option.html#graphic) declaratively with `G*` components.
+
+#### Callback slot naming convention (`tooltip*` / `dataView*`)
 
-#### Slot Naming Convention
+These naming rules apply to callback slots only. The graphic slot name is always `#graphic`.
 
 - Slot names begin with `tooltip`/`dataView`, followed by hyphen-separated path segments to the target.
 - Each segment corresponds to an `option` property name or an array index (for arrays, use the numeric index).
@@ -405,7 +408,78 @@ The slot props correspond to the first parameter of the callback function.
 > [!NOTE]
 > Slots take precedence over the corresponding callback defined in `props.option`.
 
-### Static Methods
+#### Graphic slot&nbsp;<sup><a href="#slots"><img src="https://img.shields.io/badge/new-A855F7" alt="new" align="middle" height="16"></a></sup>
+
+```ts
+import { GGroup, GRect, GText } from "vue-echarts/graphic";
+```
+
+Available components:
+
+- `GGroup`
+- `GRect`
+- `GCircle`
+- `GText`
+- `GLine`
+- `GPolyline`
+- `GPolygon`
+- `GImage`
+- `GSector`
+- `GRing`
+- `GArc`
+- `GBezierCurve`
+- `GCompoundPath`
+
+Read more at [ECharts `option.graphic` →](https://echarts.apache.org/en/option.html#graphic)
+
+> [!NOTE]
+>
+> - Graphic element events additionally support `dblclick` and `contextmenu`.
+> - Event listeners support the `.once` modifier.
+> - `#graphic` overrides `option.graphic`. In `manual-update` mode, call `chartRef.setOption(...)` to apply changes.
+
+<details>
+<summary>Usage</summary>
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import type { ElementEvent } from "echarts/core";
+
+const option = {
+  xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
+  yAxis: { type: "value" },
+  series: [{ type: "line", data: [120, 200, 150] }],
+};
+
+const overlay = ref({ x: 84, y: 22 });
+
+function onDrag(event: ElementEvent) {
+  overlay.value.x = event.offsetX - 44;
+  overlay.value.y = event.offsetY - 14;
+}
+</script>
+
+<template>
+  <VChart :option="option">
+    <template #graphic>
+      <GGroup id="drag-handle" :x="overlay.x" :y="overlay.y">
+        <GRect :width="88" :height="28" :r="6" fill="#5470c6" draggable @drag="onDrag" />
+        <GText
+          :x="10"
+          :y="8"
+          :text="`x: ${Math.round(overlay.x)} y: ${Math.round(overlay.y)}`"
+          text-fill="#fff"
+        />
+      </GGroup>
+    </template>
+  </VChart>
+</template>
+```
+
+</details>
+
+### Static methods
 
 Static methods can be accessed from [`echarts` itself](https://echarts.apache.org/en/api.html#echarts).
 

package/README.zh-Hans.md

@@ -16,7 +16,7 @@ npm install echarts vue-echarts
 
 #### 示例
 
-<details>
+<details open>
 <summary><a href="https://stackblitz.com/edit/vue-echarts-8?file=src%2FApp.vue">Demo →</a></summary>
 
 ```vue
@@ -28,21 +28,11 @@ npm install echarts vue-echarts
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { PieChart } from "echarts/charts";
-import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-} from "echarts/components";
+import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
 import VChart, { THEME_KEY } from "vue-echarts";
 import { ref, provide } from "vue";
 
-use([
-  CanvasRenderer,
-  PieChart,
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-]);
+use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);
 
 provide(THEME_KEY, "dark");
 
@@ -94,12 +84,17 @@ const option = ref({
 
 </details>
 
-> [!IMPORTANT]
-> 我们鼓励手动从 ECharts 中引入组件和图表，以减小打包体积。我们已经为此构建了一个[导入代码生成器](https://vue-echarts.dev/#codegen)。你只需要把`option` 代码粘贴进去，就可以得到精确的导入代码。
->
-> ![](https://github.com/ecomfe/vue-echarts/assets/1726061/f9c38a06-3422-4f0e-ab8c-f242d9aea9aa)
->
-> [试一试 →](https://vue-echarts.dev/#codegen)
+#### 按需导入&nbsp;<sup><a href="#按需导入"><img src="https://img.shields.io/badge/%E6%8E%A8%E8%8D%90-10B981" alt="推荐" align="middle" height="16"></a></sup>
+
+为了减小打包体积，我们建议手动从 ECharts 中导入所需的组件和图表。我们提供了一个[导入代码生成器](https://vue-echarts.dev/#codegen)，可以帮你自动生成导入语句。只需将你的 `option` 代码粘贴进去，工具就会为你生成精确的导入代码。
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="assets/codegen-dark.webp">
+  <source media="(prefers-color-scheme: light)" srcset="assets/codegen-light.webp">
+  <img alt="一个用于生成 ECharts 导入代码的弹窗。左侧面板展示图表的 JSON 配置，右侧面板展示对应的 TypeScript 导入语句。" src="assets/codegen-light.webp">
+</picture>
+
+[试一试 →](https://vue-echarts.dev/#codegen)
 
 但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：
 
@@ -118,8 +113,8 @@ import "echarts";
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue@3.5.21"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.0.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.5.27"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.1.0-beta.2"></script>
 ```
 
 <!-- scripts:end -->
@@ -257,6 +252,8 @@ Vue ECharts 支持如下事件：
 </template>
 ```
 
+通过 attrs 传入的事件处理器默认是响应式的。更新 `onClick`、`onZr:*` 或 `onNative:*` 后会自动重新绑定。
+
 ### Provide / Inject
 
 Vue ECharts 为 `theme`、`init-options`、`update-options` 和 `loading-options` 提供了 provide/inject API，以通过上下文配置选项。例如：可以通过如下方式来使用 provide API 为 `theme` 提供上下文配置：
@@ -335,11 +332,17 @@ export default {
 > - [`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`](https://echarts.apache.org/zh/api.html#echartsInstance.setTheme)：请使用 `theme` prop。
 
-### 插槽（Slots）
+### 插槽
+
+Vue ECharts 当前支持三类插槽：
+
+- 回调类插槽：用于 [`tooltip.formatter`](https://echarts.apache.org/zh/option.html#tooltip.formatter)。
+- 回调类插槽：用于 [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/zh/option.html#toolbox.feature.dataView.optionToContent)。
+- 可选 `#graphic` 插槽（需引入 `vue-echarts/graphic`）：通过 `G*` 组件声明式构建 [`option.graphic`](https://echarts.apache.org/zh/option.html#graphic)。
 
-Vue ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.formatter`](https://echarts.apache.org/zh/option.html#tooltip.formatter) 和 [`toolbox.feature.dataView.optionToContent`](https://echarts.apache.org/zh/option.html#toolbox.feature.dataView.optionToContent) 回调，而无需在 `option` 对象中定义它们。你可以使用熟悉的 Vue 模板语法来编写自定义提示框或数据视图中的内容。
+#### 回调插槽命名约定（`tooltip*` / `dataView*`）
 
-#### 插槽命名约定
+下面的命名规则只适用于回调类插槽，`graphic` 插槽固定使用 `#graphic`。
 
 - 插槽名称以 `tooltip`/`dataView` 开头，后面跟随用连字符分隔的路径片段，用于定位目标。
 - 每个路径片段对应 `option` 对象的属性名或数组索引（数组索引使用数字形式）。
@@ -405,6 +408,77 @@ Vue ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.f
 > [!NOTE]
 > 插槽会优先于 `props.option` 中对应的回调函数。
 
+#### Graphic 插槽&nbsp;<sup><a href="#插槽"><img src="https://img.shields.io/badge/%E6%96%B0%E5%8A%9F%E8%83%BD-A855F7" alt="新功能" align="middle" height="16"></a></sup>
+
+```ts
+import { GGroup, GRect, GText } from "vue-echarts/graphic";
+```
+
+可用组件：
+
+- `GGroup`
+- `GRect`
+- `GCircle`
+- `GText`
+- `GLine`
+- `GPolyline`
+- `GPolygon`
+- `GImage`
+- `GSector`
+- `GRing`
+- `GArc`
+- `GBezierCurve`
+- `GCompoundPath`
+
+更多细节可参考 [ECharts `option.graphic` →](https://echarts.apache.org/zh/option.html#graphic)
+
+> [!NOTE]
+>
+> - graphic 元素事件额外支持 `dblclick`、`contextmenu`。
+> - 事件支持 `.once` 修饰符。
+> - `#graphic` 会覆盖 `option.graphic`。`manual-update` 模式下需调用 `chartRef.setOption(...)` 提交变更。
+
+<details>
+<summary>用法示例</summary>
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import type { ElementEvent } from "echarts/core";
+
+const option = {
+  xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
+  yAxis: { type: "value" },
+  series: [{ type: "line", data: [120, 200, 150] }],
+};
+
+const overlay = ref({ x: 84, y: 22 });
+
+function onDrag(event: ElementEvent) {
+  overlay.value.x = event.offsetX - 44;
+  overlay.value.y = event.offsetY - 14;
+}
+</script>
+
+<template>
+  <VChart :option="option">
+    <template #graphic>
+      <GGroup id="drag-handle" :x="overlay.x" :y="overlay.y">
+        <GRect :width="88" :height="28" :r="6" fill="#5470c6" draggable @drag="onDrag" />
+        <GText
+          :x="10"
+          :y="8"
+          :text="`x: ${Math.round(overlay.x)} y: ${Math.round(overlay.y)}`"
+          text-fill="#fff"
+        />
+      </GGroup>
+    </template>
+  </VChart>
+</template>
+```
+
+</details>
+
 ### 静态方法
 
 静态方法请直接通过 [`echarts` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。

package/dist/ECharts-DCe3N-Zd.d.ts

@@ -0,0 +1,219 @@
+import { VChartSlotsExtension } from "./index.js";
+import * as vue from "vue";
+import { InjectionKey, MaybeRefOrGetter, PropType, SlotsType } from "vue";
+import * as echarts_core0 from "echarts/core";
+import { ElementEvent, SetOptionOpts, init } from "echarts/core";
+import { TooltipComponentFormatterCallbackParams } from "echarts";
+
+//#region src/types.d.ts
+type Injection<T> = MaybeRefOrGetter<T | null>;
+type InitType = typeof init;
+type InitParameters = Parameters<InitType>;
+type Theme = NonNullable<InitParameters[1]>;
+type ThemeInjection = Injection<Theme>;
+type InitOptions = NonNullable<InitParameters[2]>;
+type InitOptionsInjection = Injection<InitOptions>;
+type UpdateOptions = SetOptionOpts;
+type UpdateOptionsInjection = Injection<UpdateOptions>;
+type EChartsType = ReturnType<InitType>;
+type SetOptionType = EChartsType["setOption"];
+type Option = Parameters<SetOptionType>[0];
+type AutoResize = boolean | {
+  throttle?: number;
+  onResize?: () => void;
+};
+type LoadingOptions = {
+  text?: string;
+  textColor?: string;
+  fontSize?: number | string;
+  fontWeight?: number | string;
+  fontStyle?: string;
+  fontFamily?: string;
+  maskColor?: string;
+  showSpinner?: boolean;
+  color?: string;
+  spinnerRadius?: number;
+  lineWidth?: number;
+  zlevel?: number;
+};
+type LoadingOptionsInjection = Injection<LoadingOptions>;
+type MouseEventName = "click" | "dblclick" | "mouseout" | "mouseover" | "mouseup" | "mousedown" | "mousemove" | "contextmenu" | "globalout";
+type ElementEventName = MouseEventName | "mousewheel" | "drag" | "dragstart" | "dragend" | "dragenter" | "dragleave" | "dragover" | "drop";
+//#endregion
+//#region src/composables/api.d.ts
+declare const METHOD_NAMES: readonly ["getWidth", "getHeight", "getDom", "getOption", "resize", "dispatchAction", "convertToPixel", "convertFromPixel", "containPixel", "getDataURL", "getConnectedDataURL", "appendData", "clear", "isDisposed", "dispose"];
+type MethodName = (typeof METHOD_NAMES)[number];
+type PublicMethods = Pick<EChartsType, MethodName>;
+//#endregion
+//#region src/composables/loading.d.ts
+declare const LOADING_OPTIONS_KEY: InjectionKey<LoadingOptionsInjection>;
+//#endregion
+//#region src/composables/slot.d.ts
+type SlotsTypes = SlotsType<Record<"tooltip" | `tooltip-${string}`, TooltipComponentFormatterCallbackParams> & Record<"dataView" | `dataView-${string}`, Option> & VChartSlotsExtension>;
+//#endregion
+//#region src/wc.d.ts
+interface EChartsElement extends HTMLElement {
+  __dispose: (() => void) | null;
+}
+//#endregion
+//#region src/ECharts.d.ts
+declare const THEME_KEY: InjectionKey<ThemeInjection>;
+declare const INIT_OPTIONS_KEY: InjectionKey<InitOptionsInjection>;
+declare const UPDATE_OPTIONS_KEY: InjectionKey<UpdateOptionsInjection>;
+declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
+  loading: BooleanConstructor;
+  loadingOptions: PropType<LoadingOptions>;
+  autoresize: PropType<AutoResize>;
+  option: PropType<Option>;
+  theme: {
+    type: PropType<Theme>;
+  };
+  initOptions: PropType<InitOptions>;
+  updateOptions: PropType<UpdateOptions>;
+  group: StringConstructor;
+  manualUpdate: BooleanConstructor;
+}>, {
+  setOption: {
+    <Opt extends echarts_core0.EChartsCoreOption>(option: Opt, notMerge?: boolean, lazyUpdate?: boolean): void;
+    <Opt extends echarts_core0.EChartsCoreOption>(option: Opt, opts?: echarts_core0.SetOptionOpts): void;
+  };
+  root: vue.ShallowRef<EChartsElement | undefined, EChartsElement | undefined>;
+  chart: vue.ShallowRef<echarts_core0.ECharts | undefined, echarts_core0.ECharts | undefined>;
+} & PublicMethods, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+  click: (params: echarts_core0.ECElementEvent) => void;
+  dblclick: (params: echarts_core0.ECElementEvent) => void;
+  mouseout: (params: echarts_core0.ECElementEvent) => void;
+  mouseover: (params: echarts_core0.ECElementEvent) => void;
+  mouseup: (params: echarts_core0.ECElementEvent) => void;
+  mousedown: (params: echarts_core0.ECElementEvent) => void;
+  mousemove: (params: echarts_core0.ECElementEvent) => void;
+  contextmenu: (params: echarts_core0.ECElementEvent) => void;
+  globalout: (params: echarts_core0.ECElementEvent) => void;
+} & {
+  highlight: (params: unknown) => void;
+  downplay: (params: unknown) => void;
+  selectchanged: (params: unknown) => void;
+  legendselectchanged: (params: unknown) => void;
+  legendselected: (params: unknown) => void;
+  legendunselected: (params: unknown) => void;
+  legendselectall: (params: unknown) => void;
+  legendinverseselect: (params: unknown) => void;
+  legendscroll: (params: unknown) => void;
+  datazoom: (params: unknown) => void;
+  datarangeselected: (params: unknown) => void;
+  graphroam: (params: unknown) => void;
+  georoam: (params: unknown) => void;
+  treeroam: (params: unknown) => void;
+  timelinechanged: (params: unknown) => void;
+  timelineplaychanged: (params: unknown) => void;
+  restore: (params: unknown) => void;
+  dataviewchanged: (params: unknown) => void;
+  magictypechanged: (params: unknown) => void;
+  geoselectchanged: (params: unknown) => void;
+  geoselected: (params: unknown) => void;
+  geounselected: (params: unknown) => void;
+  axisareaselected: (params: unknown) => void;
+  brush: (params: unknown) => void;
+  brushEnd: (params: unknown) => void;
+  brushselected: (params: unknown) => void;
+  globalcursortaken: (params: unknown) => void;
+} & {
+  rendered: (params: {
+    elapsedTime: number;
+  }) => void;
+  finished: () => void;
+} & {
+  "zr:mousewheel": (params: echarts_core0.ElementEvent) => void;
+  "zr:drag": (params: echarts_core0.ElementEvent) => void;
+  "zr:dragstart": (params: echarts_core0.ElementEvent) => void;
+  "zr:dragend": (params: echarts_core0.ElementEvent) => void;
+  "zr:dragenter": (params: echarts_core0.ElementEvent) => void;
+  "zr:dragleave": (params: echarts_core0.ElementEvent) => void;
+  "zr:dragover": (params: echarts_core0.ElementEvent) => void;
+  "zr:drop": (params: echarts_core0.ElementEvent) => void;
+  "zr:click": (params: echarts_core0.ElementEvent) => void;
+  "zr:dblclick": (params: echarts_core0.ElementEvent) => void;
+  "zr:mouseout": (params: echarts_core0.ElementEvent) => void;
+  "zr:mouseover": (params: echarts_core0.ElementEvent) => void;
+  "zr:mouseup": (params: echarts_core0.ElementEvent) => void;
+  "zr:mousedown": (params: echarts_core0.ElementEvent) => void;
+  "zr:mousemove": (params: echarts_core0.ElementEvent) => void;
+  "zr:contextmenu": (params: echarts_core0.ElementEvent) => void;
+  "zr:globalout": (params: echarts_core0.ElementEvent) => void;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+  loading: BooleanConstructor;
+  loadingOptions: PropType<LoadingOptions>;
+  autoresize: PropType<AutoResize>;
+  option: PropType<Option>;
+  theme: {
+    type: PropType<Theme>;
+  };
+  initOptions: PropType<InitOptions>;
+  updateOptions: PropType<UpdateOptions>;
+  group: StringConstructor;
+  manualUpdate: BooleanConstructor;
+}>> & Readonly<{
+  onClick?: ((params: echarts_core0.ECElementEvent) => any) | undefined;
+  onDblclick?: ((params: echarts_core0.ECElementEvent) => any) | undefined;
+  onMouseout?: ((params: echarts_core0.ECElementEvent) => any) | undefined;
+  onMouseover?: ((params: echarts_core0.ECElementEvent) => any) | undefined;
+  onMouseup?: ((params: echarts_core0.ECElementEvent) => any) | undefined;
+  onMousedown?: ((params: echarts_core0.ECElementEvent) => any) | undefined;
+  onMousemove?: ((params: echarts_core0.ECElementEvent) => any) | undefined;
+  onContextmenu?: ((params: echarts_core0.ECElementEvent) => any) | undefined;
+  onGlobalout?: ((params: echarts_core0.ECElementEvent) => any) | undefined;
+  onHighlight?: ((params: unknown) => any) | undefined;
+  onDownplay?: ((params: unknown) => any) | undefined;
+  onSelectchanged?: ((params: unknown) => any) | undefined;
+  onLegendselectchanged?: ((params: unknown) => any) | undefined;
+  onLegendselected?: ((params: unknown) => any) | undefined;
+  onLegendunselected?: ((params: unknown) => any) | undefined;
+  onLegendselectall?: ((params: unknown) => any) | undefined;
+  onLegendinverseselect?: ((params: unknown) => any) | undefined;
+  onLegendscroll?: ((params: unknown) => any) | undefined;
+  onDatazoom?: ((params: unknown) => any) | undefined;
+  onDatarangeselected?: ((params: unknown) => any) | undefined;
+  onGraphroam?: ((params: unknown) => any) | undefined;
+  onGeoroam?: ((params: unknown) => any) | undefined;
+  onTreeroam?: ((params: unknown) => any) | undefined;
+  onTimelinechanged?: ((params: unknown) => any) | undefined;
+  onTimelineplaychanged?: ((params: unknown) => any) | undefined;
+  onRestore?: ((params: unknown) => any) | undefined;
+  onDataviewchanged?: ((params: unknown) => any) | undefined;
+  onMagictypechanged?: ((params: unknown) => any) | undefined;
+  onGeoselectchanged?: ((params: unknown) => any) | undefined;
+  onGeoselected?: ((params: unknown) => any) | undefined;
+  onGeounselected?: ((params: unknown) => any) | undefined;
+  onAxisareaselected?: ((params: unknown) => any) | undefined;
+  onBrush?: ((params: unknown) => any) | undefined;
+  onBrushEnd?: ((params: unknown) => any) | undefined;
+  onBrushselected?: ((params: unknown) => any) | undefined;
+  onGlobalcursortaken?: ((params: unknown) => any) | undefined;
+  "onZr:mousewheel"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:drag"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:dragstart"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:dragend"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:dragenter"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:dragleave"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:dragover"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:drop"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:click"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:dblclick"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:mouseout"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:mouseover"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:mouseup"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:mousedown"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:mousemove"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:contextmenu"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  "onZr:globalout"?: ((params: echarts_core0.ElementEvent) => any) | undefined;
+  onRendered?: ((params: {
+    elapsedTime: number;
+  }) => any) | undefined;
+  onFinished?: (() => any) | undefined;
+}>, {
+  manualUpdate: boolean;
+  loading: boolean;
+}, SlotsTypes, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { LOADING_OPTIONS_KEY as a, _default as i, THEME_KEY as n, ElementEventName as o, UPDATE_OPTIONS_KEY as r, INIT_OPTIONS_KEY as t };
+//# sourceMappingURL=ECharts-DCe3N-Zd.d.ts.map