docs: remove english in Chinese README

* docs: remove showLoading and hideLoading

* docs: add note for `showLoading` and `hideLoading` method

CHANGELOG.md

@@ -1,3 +1,22 @@
+## 7.0.3
+
+* Fixed type for `autoresize` (again).
+
+## 7.0.2
+
+* Fixed style injection regression (#805).
+
+## 7.0.1
+
+* Fixed type for `autoresize`.
+
+## 7.0.0
+
+> Other prerelease changes:
+> * [7.0.0-beta.0](#700-beta0)
+
+* Fixed types for events.
+
 ## 7.0.0-beta.0
 
 * Upgraded to ESM.
@@ -6,6 +25,7 @@
 
 ### Breaking changes
 
+* Peer deps for `echarts` is upgraded to `^5.5.1`.
 * Dropped support for browsers without `ResizeObserver`. Can work with [resize-observer-polyfill](https://www.npmjs.com/package/resize-observer-polyfill).
 * Dropped support for Vue < 2.7.
 * Dropped CJS outputs.

README.md

@@ -1,21 +1,12 @@
 <h1 align="center">Vue-ECharts</h1>
 
-<p align="center">Vue.js <sup>(v2/v3)</sup> component for Apache ECharts™ <sup>(v5)</sup>.</p>
+<p align="center">Vue.js component for Apache ECharts™.</p>
-<p align="center"><a href="https://vue-echarts.dev/">View Demo →</a></p>
+<p align="center"><a href="https://npmjs.com/package/vue-echarts"><img alt="npm version" src="https://img.shields.io/npm/v/vue-echarts"></a> <a href="https://vue-echarts.dev/"><img src="https://img.shields.io/badge/Demo%20%C2%BB-20c3aa" alt="View demo"></a> <a href="./README.zh-Hans.md"><img src="https://img.shields.io/badge/%E4%B8%AD%E6%96%87%E7%89%88%20%C2%BB-000" alt="前往中文版"></a></p>
-<p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a> <a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"><img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
+<p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"></a> <a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"><img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"></a></p>
-
-> [!IMPORTANT]
-> We have released an [import code generator](https://vue-echarts.dev/#codegen) that can generate precise import code by pasting the `option` code.
->
-> ![](https://github.com/ecomfe/vue-echarts/assets/1726061/f9c38a06-3422-4f0e-ab8c-f242d9aea9aa)
->
-> [Try it →](https://vue-echarts.dev/#codegen)
 
 ---
 
-<h2>💡 Heads up 💡 <a href="./README.zh-Hans.md"><img src="https://img.shields.io/badge/%E4%B8%AD%E6%96%87%E7%89%88-20c3aa" alt="前往中文版" align="right" height="24"/></a></h2>
+> Still using v6? Read v6 docs [here →](https://github.com/ecomfe/vue-echarts/tree/6.x)
-
-Still using v6? Read v6 docs [here →](https://github.com/ecomfe/vue-echarts/tree/6.x)
 
 ## Installation & Usage
 
@@ -202,6 +193,8 @@ export default {
 > [!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)
 
 But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
@@ -221,7 +214,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.4.33"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -241,7 +234,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -446,13 +439,14 @@ import { THEME_KEY } from 'vue-echarts'
 - `convertToPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.convertToPixel)
 - `convertFromPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel)
 - `containPixel` [→](https://echarts.apache.org/en/api.html#echartsInstance.containPixel)
-- `showLoading` [→](https://echarts.apache.org/en/api.html#echartsInstance.showLoading)
-- `hideLoading` [→](https://echarts.apache.org/en/api.html#echartsInstance.hideLoading)
 - `getDataURL` [→](https://echarts.apache.org/en/api.html#echartsInstance.getDataURL)
 - `getConnectedDataURL` [→](https://echarts.apache.org/en/api.html#echartsInstance.getConnectedDataURL)
 - `clear` [→](https://echarts.apache.org/en/api.html#echartsInstance.clear)
 - `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.
+
 ### Static Methods
 
 Static methods can be accessed from [`echarts` itself](https://echarts.apache.org/en/api.html#echarts).
@@ -461,36 +455,9 @@ Static methods can be accessed from [`echarts` itself](https://echarts.apache.or
 
 If you are applying a CSP to prevent inline `<style>` injection, you need to use `vue-echarts/csp` instead of `vue-echarts` and include `vue-echarts/csp/style.css` manually.
 
-## Migration to v6
+## Migration to v7
 
-> 💡 Please make sure to read the [migration guide](https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide) for ECharts 5 as well.
+Read the breaking changes document in the [release log](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0) and the migration shoud be straightforward.
-
-The following breaking changes are introduced in `vue-echarts@6`:
-
-### Vue 2 support
-
-- If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use Vue-ECharts with Vue 2 (and also `@vue/runtime-core` for TypeScript support).
-
-### Props
-
-- `options` is renamed to **`option`** to align with ECharts itself.
-- Updating `option` will respect **`update-options`** configs instead of checking reference change.
-- `watch-shallow` is removed. Use **`manual-update`** for performance critical scenarios.
-
-### Methods
-
-- `mergeOptions` is renamed to **`setOption`** to align with ECharts itself.
-- `showLoading` and `hideLoading` is removed. Use the **`loading` and `loading-options`** props instead.
-- `appendData` is removed. (Due to ECharts 5's breaking change.)
-- All static methods are removed from `vue-echarts`. Use those methods from `echarts` directly.
-
-### Computed getters
-
-- Computed getters (`width`, `height`, `isDisposed` and `computedOptions`) are removed. Use the **`getWidth`, `getHeight`, `isDisposed` and `getOption`** methods instead.
-
-### Styles
-
-- Now the root element of the component have **`100%×100%`** size by default, instead of `600×400`.
 
 ## Local development
 

README.zh-Hans.md

@@ -1,21 +1,12 @@
 <h1 align="center">Vue-ECharts</h1>
 
-<p align="center">Apache ECharts™ <sup>(v5)</sup> 的 Vue.js <sup>(v2/v3)</sup> 组件。</p>
+<p align="center">Apache ECharts™ 的 Vue.js 组件。</p>
-<p align="center"><a href="https://vue-echarts.dev/">查看 Demo →</a></p>
+<p align="center"><a href="https://npmjs.com/package/vue-echarts"><img alt="npm 版本" src="https://img.shields.io/npm/v/vue-echarts"></a> <a href="https://vue-echarts.dev/"><img src="https://img.shields.io/badge/%E6%BC%94%E7%A4%BA%20%C2%BB-20c3aa" alt="查看演示"></a> <a href="./README.zh-Hans.md"></p>
-<p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"/></a> <a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"><img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"/></a></p>
+<p align="center"><a href="https:///pr.new/ecomfe/vue-echarts"><img alt="Open in Codeflow" src="https://developer.stackblitz.com/img/open_in_codeflow.svg" height="28"></a> <a href="https://codesandbox.io/p/github/ecomfe/vue-echarts"><img alt="Edit in CodeSandbox" src="https://assets.codesandbox.io/github/button-edit-lime.svg" height="28"></a></p>
-
-> [!IMPORTANT]
-> 我们新发布了一个[导入代码生成器](https://vue-echarts.dev/#codegen)，只需要把`option` 代码粘贴进去，就可以得到精确的导入代码。
->
-> ![](https://github.com/ecomfe/vue-echarts/assets/1726061/f9c38a06-3422-4f0e-ab8c-f242d9aea9aa)
->
-> [试一试 →](https://vue-echarts.dev/#codegen)
 
 ---
 
-## 💡 注意 💡
+> 还在使用 v6？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/6.x/README.zh-Hans.md)
-
-还在使用 v6？可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/6.x/README.zh_CN.md)
 
 ## 安装 & 使用
 
@@ -202,6 +193,8 @@ export default {
 > [!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)
 
 但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：
@@ -221,7 +214,7 @@ import "echarts";
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.4.33"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -241,7 +234,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.0-beta.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@7.0.3"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -366,7 +359,7 @@ Vue-ECharts 支持如下事件：
 
 #### 原生 DOM 事件
 
-由于 Vue-ECharts 默认将事件绑定到 ECharts 实例，因此在使用原生 DOM 事件时需要做一些特殊处理。你需要在事件名称前加上 `native:` 前缀来绑定原生 DOM 事件（可以在 Vue 2 中也可以使用 `.native` 修饰符，但这在 Vue 3 中已被废弃）。
+由于 Vue-ECharts 默认将事件绑定到 ECharts 实例，因此在使用原生 DOM 事件时需要做一些特殊处理。你需要在事件名称前加上 `native:` 前缀来绑定原生 DOM 事件（在 Vue 2 中也可以使用 `.native` 修饰符，但这在 Vue 3 中已被废弃）。
 
 ```vue
 <template>
@@ -446,13 +439,14 @@ import { THEME_KEY } from 'vue-echarts'
 - `convertToPixel` [→](https://echarts.apache.org/zh/api.html#echartsInstance.convertToPixel)
 - `convertFromPixel` [→](https://echarts.apache.org/zh/api.html#echartsInstance.convertFromPixel)
 - `containPixel` [→](https://echarts.apache.org/zh/api.html#echartsInstance.containPixel)
-- `showLoading` [→](https://echarts.apache.org/zh/api.html#echartsInstance.showLoading)
-- `hideLoading` [→](https://echarts.apache.org/zh/api.html#echartsInstance.hideLoading)
 - `getDataURL` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getDataURL)
 - `getConnectedDataURL` [→](https://echarts.apache.org/zh/api.html#echartsInstance.getConnectedDataURL)
 - `clear` [→](https://echarts.apache.org/zh/api.html#echartsInstance.clear)
 - `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` 本身](https://echarts.apache.org/zh/api.html#echarts)进行调用。
@@ -463,36 +457,9 @@ import { THEME_KEY } from 'vue-echarts'
 
 如果你正在应用 CSP 来防止内联 `<style>` 注入，则需要使用 `vue-echarts/csp` 代替 `vue-echarts`，并手动引入 `vue-echarts/csp/style.css`。
 
-## 迁移到 v6
+## 迁移到 v7
 
-> 💡 请确保同时查阅 ECharts 5 的[升级指南](https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97)。
+请阅读[发布日志](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0)中的变更记录，之后迁移过程应该会相对简单。
-
-`vue-echarts@6` 引入了如下破坏性变更：
-
-### Vue 2 支持
-
-- 要在 `vue@2.7.0` 之前的版本中使用 Vue-ECharts，必须安装 `@vue/composition-api`（还需要安装 `@vue/runtime-core` 来支持 TypeScript）。
-
-### Prop
-
-- `options` 重命名为 **`option`**，以和 ECharts 本身保持一致。
-- 更新 `option` 将采用 **`update-options`** 中的配置，不再检查是否发生引用变化。
-- `watch-shallow` 被移除。在性能关键场景请使用 **`manual-update`**。
-
-### 方法
-
-- `mergeOptions` 重命名为 **`setOption`**，以和 ECharts 本身保持一致。
-- `showLoading` 与 `hideLoading` 被移除。请使用 **`loading` 与 `loading-options`** prop。
-- `appendData` 被移除。（由于 ECharts 5 引入的破坏性变更。）
-- 所有静态方法被从 `vue-echarts` 移除。可以直接使用 `echarts` 本身的这些方法。
-
-### 计算 Getter
-
-- 计算 getter（`width`、`height`、`isDisposed` 和 `computedOptions`）被移除。请分别使用 **`getWidth`、`getHeight`、`isDisposed` 和 `getOption`** 方法代替。
-
-### 样式
-
-- 现在组件根元素尺寸默认为 **`100%×100%`**，而非原来的 `600×400`。
 
 ## 本地开发
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "7.0.0-beta.0",
+  "version": "7.0.3",
   "description": "Vue.js component for Apache ECharts™.",
   "license": "MIT",
   "repository": "https://github.com/ecomfe/vue-echarts.git",
@@ -80,7 +80,7 @@
     "rollup": "^4.19.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-esbuild": "^6.1.1",
-    "rollup-plugin-import-css": "^3.5.0",
+    "rollup-plugin-import-css": "^3.5.1",
     "tslib": "^2.6.3",
     "typescript": "5.5.4",
     "vue": "^3.4.33",

pnpm-lock.yaml

@@ -127,8 +127,8 @@ importers:
         specifier: ^6.1.1
         version: 6.1.1(esbuild@0.23.0)(rollup@4.19.0)
       rollup-plugin-import-css:
-        specifier: ^3.5.0
+        specifier: ^3.5.1
-        version: 3.5.0(rollup@4.19.0)
+        version: 3.5.1(rollup@4.19.0)
       tslib:
         specifier: ^2.6.3
         version: 2.6.3
@@ -4070,8 +4070,8 @@ packages:
       esbuild: '>=0.18.0'
       rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
 
-  rollup-plugin-import-css@3.5.0:
+  rollup-plugin-import-css@3.5.1:
-    resolution: {integrity: sha512-JOVow6n00qt2C/NnsqPmIjFOfxIAudwWqC5SaC84CodMGiMFaP1gPAdgnJ8g8hcG+P85TCYp2kI98grYCEt5pg==}
+    resolution: {integrity: sha512-cXgMPCUoDu64A2OFme4Is3eHmLiA54qTzxfvCbsORzro3C1adSe1fMMKUqfOUKTXROAPpW9PNDjpaGgPloGJOQ==}
     engines: {node: '>=16'}
     peerDependencies:
       rollup: ^2.x.x || ^3.x.x || ^4.x.x
@@ -8983,7 +8983,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  rollup-plugin-import-css@3.5.0(rollup@4.19.0):
+  rollup-plugin-import-css@3.5.1(rollup@4.19.0):
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.19.0)
       rollup: 4.19.0

src/composables/autoresize.ts

@@ -2,18 +2,11 @@ import { watch } from "vue-demi";
 import { throttle } from "echarts/core";
 
 import type { Ref, PropType } from "vue-demi";
-import type { EChartsType } from "../types";
+import type { EChartsType, AutoResize } from "../types";
-
-type AutoresizeProp =
-  | boolean
-  | {
-      throttle?: number;
-      onResize?: () => void;
-    };
 
 export function useAutoresize(
   chart: Ref<EChartsType | undefined>,
-  autoresize: Ref<AutoresizeProp | undefined>,
+  autoresize: Ref<AutoResize | undefined>,
   root: Ref<HTMLElement | undefined>
 ): void {
   watch(
@@ -47,6 +40,12 @@ export function useAutoresize(
               return;
             }
           }
+
+          // Skip if container has zero size
+          if (root.offsetWidth === 0 || root.offsetHeight === 0) {
+            return;
+          }
+
           resizeCallback();
         });
         ro.observe(root);
@@ -63,5 +62,5 @@ export function useAutoresize(
 }
 
 export const autoresizeProps = {
-  autoresize: [Boolean, Object] as PropType<AutoresizeProp>
+  autoresize: [Boolean, Object] as PropType<AutoResize>
 };

src/index.d.ts

@@ -6,6 +6,7 @@ import type {
   InitOptions,
   UpdateOptions,
   LoadingOptions,
+  AutoResize,
   EChartsType,
   Emits,
   ThemeInjection,
@@ -25,7 +26,7 @@ declare type ChartProps = {
   updateOptions?: UpdateOptions;
   loadingOptions?: LoadingOptions;
   option?: Option;
-  autoresize?: boolean;
+  autoresize?: AutoResize;
   loading?: boolean;
   group?: string;
   manualUpdate?: boolean;

src/types.ts

@@ -23,6 +23,13 @@ export type EventTarget = EChartsType | ZRenderType;
 type SetOptionType = EChartsType["setOption"];
 export type Option = Parameters<SetOptionType>[0];
 
+export type AutoResize =
+  | boolean
+  | {
+      throttle?: number;
+      onResize?: () => void;
+    };
+
 export type LoadingOptions = {
   text?: string;
   textColor?: string;
@@ -93,19 +100,19 @@ type OtherEventName =
   | "globalcursortaken";
 
 type MouseEmits = {
-  [key in MouseEventName]: (params: ECElementEvent) => boolean;
+  [key in MouseEventName]: (params: ECElementEvent) => void;
 };
 
 type ZRenderEmits = {
-  [key in ZRenderEventName]: (params: ElementEvent) => boolean;
+  [key in ZRenderEventName]: (params: ElementEvent) => void;
 };
 
 type OtherEmits = {
-  [key in OtherEventName]: null;
+  [key in OtherEventName]: (params: any) => void;
 };
 
 export type Emits = MouseEmits &
   OtherEmits & {
-    rendered: (params: { elapsedTime: number }) => boolean;
+    rendered: (params: { elapsedTime: number }) => void;
-    finished: () => boolean;
+    finished: () => void;
   } & ZRenderEmits;