Compare commits

...

3 Commits

Author SHA1 Message Date
4f3a6ac0a3 fix: fix event types and bump to 7.0.0 2024-08-03 16:17:46 +08:00
e967bfc1fe docs: update migration part in readme 2024-07-25 23:54:58 +08:00
a9c54e1dc5 docs: update readme 2024-07-25 23:21:49 +08:00
5 changed files with 35 additions and 93 deletions

View File

@ -1,3 +1,10 @@
## 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.

View File

@ -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"><a href="https://vue-echarts.dev/">View Demo →</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)
<p align="center">Vue.js component for Apache ECharts™.</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>
---
<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.0"></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.0"></script>
```
<!-- vue2Scripts:end -->
@ -461,36 +454,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.
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`.
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.
## Local development

View File

@ -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"><a href="https://vue-echarts.dev/">查看 Demo →</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)
<p align="center">Apache ECharts™ 的 Vue.js 组件。</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>
---
## 💡 注意 💡
还在使用 v6可以继续阅读老版本的文档。[前往 →](https://github.com/ecomfe/vue-echarts/blob/6.x/README.zh_CN.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.0"></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.0"></script>
```
<!-- vue2Scripts:end -->
@ -463,36 +456,12 @@ 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)。
Translate:
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.
`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`
请阅读[发布日志](https://github.com/ecomfe/vue-echarts/releases/tag/v7.0.0-beta.0)中的变更记录,之后迁移过程应该会相对简单。
## 本地开发

View File

@ -1,6 +1,6 @@
{
"name": "vue-echarts",
"version": "7.0.0-beta.0",
"version": "7.0.0",
"description": "Vue.js component for Apache ECharts™.",
"license": "MIT",
"repository": "https://github.com/ecomfe/vue-echarts.git",

View File

@ -93,19 +93,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;
finished: () => boolean;
rendered: (params: { elapsedTime: number }) => void;
finished: () => void;
} & ZRenderEmits;