mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-11-05 20:36:09 +08:00
Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 58e7b13652 | |||
| 0a4601bc1a | |||
| 3b2f2b547b | |||
| 977db3d415 | |||
| 0bb1839392 |
16
CHANGELOG.md
16
CHANGELOG.md
@ -1,3 +1,19 @@
|
||||
## 6.4.1
|
||||
|
||||
* Improve typings for mouse event params.
|
||||
|
||||
## 6.4.0
|
||||
|
||||
* Delay the disposal of the ECharts instance to the moment the element is disconnected from the DOM if possible (#433).
|
||||
|
||||
## 6.3.3
|
||||
|
||||
* Make autoresize work for grid layout by default (#675).
|
||||
|
||||
## 6.3.2
|
||||
|
||||
* Added basic types for events (only event names).
|
||||
|
||||
## 6.3.1
|
||||
|
||||
* Revert the style change to prevent tooltips from being clipped.
|
||||
|
||||
198
README.md
198
README.md
@ -20,13 +20,13 @@ Not ready yet? Read documentation for older versions [here →](https://github.c
|
||||
$ npm install echarts vue-echarts
|
||||
```
|
||||
|
||||
To make `vue-echarts` work for *Vue 2* (<2.7.0), you need to have `@vue/composition-api` installed:
|
||||
To make `vue-echarts` work for _Vue 2_ (<2.7.0), you need to have `@vue/composition-api` installed:
|
||||
|
||||
```sh
|
||||
npm i -D @vue/composition-api
|
||||
```
|
||||
|
||||
If you are using *NuxtJS* on top of *Vue 2* (<2.7.0), you'll also need `@nuxtjs/composition-api`:
|
||||
If you are using _NuxtJS_ on top of _Vue 2_ (<2.7.0), you'll also need `@nuxtjs/composition-api`:
|
||||
|
||||
```sh
|
||||
npm i -D @nuxtjs/composition-api
|
||||
@ -34,87 +34,7 @@ npm i -D @nuxtjs/composition-api
|
||||
|
||||
And then add `'@nuxtjs/composition-api/module'` in the `buildModules` option in your `nuxt.config.js`.
|
||||
|
||||
<details>
|
||||
<summary>Vue 3</summary>
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue'
|
||||
import ECharts from 'vue-echarts'
|
||||
import { use } from "echarts/core"
|
||||
|
||||
// import ECharts modules manually to reduce bundle size
|
||||
import {
|
||||
CanvasRenderer
|
||||
} from 'echarts/renderers'
|
||||
import {
|
||||
BarChart
|
||||
} from 'echarts/charts'
|
||||
import {
|
||||
GridComponent,
|
||||
TooltipComponent
|
||||
} from 'echarts/components'
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
TooltipComponent
|
||||
])
|
||||
|
||||
const app = createApp(...)
|
||||
|
||||
// register globally (or you can do it locally)
|
||||
app.component('v-chart', ECharts)
|
||||
|
||||
app.mount(...)
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Vue 2</summary>
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import ECharts from 'vue-echarts'
|
||||
import { use } from 'echarts/core'
|
||||
|
||||
// import ECharts modules manually to reduce bundle size
|
||||
import {
|
||||
CanvasRenderer
|
||||
} from 'echarts/renderers'
|
||||
import {
|
||||
BarChart
|
||||
} from 'echarts/charts'
|
||||
import {
|
||||
GridComponent,
|
||||
TooltipComponent
|
||||
} from 'echarts/components'
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
TooltipComponent
|
||||
]);
|
||||
|
||||
// register globally (or you can do it locally)
|
||||
Vue.component('v-chart', ECharts)
|
||||
|
||||
new Vue(...)
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
We encourage manually importing components and charts from ECharts for smaller bundle size. See all supported renderers/charts/components [here →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
|
||||
|
||||
But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
|
||||
|
||||
```js
|
||||
import "echarts";
|
||||
```
|
||||
|
||||
#### SFC example
|
||||
#### Example
|
||||
|
||||
<details>
|
||||
<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue">Demo →</a></summary>
|
||||
@ -124,7 +44,7 @@ import "echarts";
|
||||
<v-chart class="chart" :option="option" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { use } from "echarts/core";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import { PieChart } from "echarts/charts";
|
||||
@ -134,7 +54,7 @@ import {
|
||||
LegendComponent
|
||||
} from "echarts/components";
|
||||
import VChart, { THEME_KEY } from "vue-echarts";
|
||||
import { ref, defineComponent } from "vue";
|
||||
import { ref, provide } from "vue";
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
@ -144,55 +64,44 @@ use([
|
||||
LegendComponent
|
||||
]);
|
||||
|
||||
export default defineComponent({
|
||||
name: "HelloWorld",
|
||||
components: {
|
||||
VChart
|
||||
},
|
||||
provide: {
|
||||
[THEME_KEY]: "dark"
|
||||
},
|
||||
setup () {
|
||||
const option = ref({
|
||||
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)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
provide(THEME_KEY, "dark");
|
||||
|
||||
return { option };
|
||||
}
|
||||
const option = ref({
|
||||
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>
|
||||
|
||||
@ -299,6 +208,14 @@ export default {
|
||||
|
||||
</details>
|
||||
|
||||
We encourage manually importing components and charts from ECharts for smaller bundle size. See all supported renderers/charts/components [here →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
|
||||
|
||||
But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
|
||||
|
||||
```js
|
||||
import "echarts";
|
||||
```
|
||||
|
||||
### CDN & Global variable
|
||||
|
||||
Drop `<script>` inside your HTML file and access the component via `window.VueECharts`.
|
||||
@ -308,9 +225,9 @@ 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.2.45"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
|
||||
```
|
||||
<!-- vue3Scripts:end -->
|
||||
|
||||
@ -328,9 +245,9 @@ app.component('v-chart', VueECharts)
|
||||
|
||||
<!-- vue2Scripts:start -->
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
|
||||
```
|
||||
<!-- vue2Scripts:end -->
|
||||
|
||||
@ -448,6 +365,7 @@ import { THEME_KEY } from 'vue-echarts'
|
||||
> }
|
||||
> }
|
||||
> ```
|
||||
|
||||
</details>
|
||||
|
||||
### Methods
|
||||
@ -479,7 +397,7 @@ You can bind events with Vue's `v-on` directive.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<v-chart :option="option" @highlight="handleHighlight"/>
|
||||
<v-chart :option="option" @highlight="handleHighlight" />
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
@ -18,13 +18,13 @@
|
||||
$ npm install echarts vue-echarts
|
||||
```
|
||||
|
||||
要在 *Vue 2*（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装：
|
||||
要在 _Vue 2_（<2.7.0）下使用 `vue-echarts`，需要确保 `@vue/composition-api` 已经安装：
|
||||
|
||||
```sh
|
||||
npm i -D @vue/composition-api
|
||||
```
|
||||
|
||||
如果你在使用基于 *Vue 2*（<2.7.0）的 *NuxtJS*，那么还需要安装 `@nuxtjs/composition-api`：
|
||||
如果你在使用基于 _Vue 2_（<2.7.0）的 _NuxtJS_，那么还需要安装 `@nuxtjs/composition-api`：
|
||||
|
||||
```sh
|
||||
npm i -D @nuxtjs/composition-api
|
||||
@ -32,87 +32,7 @@ npm i -D @nuxtjs/composition-api
|
||||
|
||||
然后在 `nuxt.config.js` 的 `buildModules` 选项中添加 `'@nuxtjs/composition-api/module'`。
|
||||
|
||||
<details>
|
||||
<summary>Vue 3</summary>
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue'
|
||||
import ECharts from 'vue-echarts'
|
||||
import { use } from "echarts/core";
|
||||
|
||||
// 手动引入 ECharts 各模块来减小打包体积
|
||||
import {
|
||||
CanvasRenderer
|
||||
} from 'echarts/renderers'
|
||||
import {
|
||||
BarChart
|
||||
} from 'echarts/charts'
|
||||
import {
|
||||
GridComponent,
|
||||
TooltipComponent
|
||||
} from 'echarts/components'
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
TooltipComponent
|
||||
]);
|
||||
|
||||
const app = createApp(...)
|
||||
|
||||
// 全局注册组件（也可以使用局部注册）
|
||||
app.component('v-chart', ECharts)
|
||||
|
||||
app.mount(...)
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Vue 2</summary>
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import ECharts from 'vue-echarts'
|
||||
import { use } from 'echarts/core'
|
||||
// 手动引入 ECharts 各模块来减小打包体积
|
||||
|
||||
import {
|
||||
CanvasRenderer
|
||||
} from 'echarts/renderers'
|
||||
import {
|
||||
BarChart
|
||||
} from 'echarts/charts'
|
||||
import {
|
||||
GridComponent,
|
||||
TooltipComponent
|
||||
} from 'echarts/components'
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
TooltipComponent
|
||||
]);
|
||||
|
||||
// 全局注册组件（也可以使用局部注册）
|
||||
Vue.component('v-chart', ECharts)
|
||||
|
||||
new Vue(...)
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
为了更小的打包体积，我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。[前往 →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
|
||||
|
||||
但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：
|
||||
|
||||
```js
|
||||
import "echarts";
|
||||
```
|
||||
|
||||
#### 单文件组件示例
|
||||
#### 示例
|
||||
|
||||
<details>
|
||||
<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue">Demo →</a></summary>
|
||||
@ -122,7 +42,7 @@ import "echarts";
|
||||
<v-chart class="chart" :option="option" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { use } from "echarts/core";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import { PieChart } from "echarts/charts";
|
||||
@ -132,7 +52,7 @@ import {
|
||||
LegendComponent
|
||||
} from "echarts/components";
|
||||
import VChart, { THEME_KEY } from "vue-echarts";
|
||||
import { ref, defineComponent } from "vue";
|
||||
import { ref, provide } from "vue";
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
@ -142,55 +62,44 @@ use([
|
||||
LegendComponent
|
||||
]);
|
||||
|
||||
export default defineComponent({
|
||||
name: "HelloWorld",
|
||||
components: {
|
||||
VChart
|
||||
},
|
||||
provide: {
|
||||
[THEME_KEY]: "dark"
|
||||
},
|
||||
setup: () => {
|
||||
const option = ref({
|
||||
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)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
provide(THEME_KEY, "dark");
|
||||
|
||||
return { option };
|
||||
}
|
||||
const option = ref({
|
||||
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>
|
||||
|
||||
@ -297,6 +206,14 @@ export default {
|
||||
|
||||
</details>
|
||||
|
||||
为了更小的打包体积，我们建议手动从 ECharts 引入单个图表和组件。请参考所有支持的渲染器/图表/组件。[前往 →](https://github.com/apache/echarts/blob/master/src/echarts.all.ts)
|
||||
|
||||
但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：
|
||||
|
||||
```js
|
||||
import "echarts";
|
||||
```
|
||||
|
||||
### CDN & 全局变量
|
||||
|
||||
用如下方式在 HTML 中插入 `<script>` 标签，并且通过 `window.VueECharts` 来访问组件接口：
|
||||
@ -304,12 +221,11 @@ export default {
|
||||
<details>
|
||||
<summary>Vue 3 <a href="https://stackblitz.com/edit/vue-echarts-vue-3-global?file=index.html">Demo →</a></summary>
|
||||
|
||||
|
||||
<!-- vue3Scripts:start -->
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
|
||||
```
|
||||
<!-- vue3Scripts:end -->
|
||||
|
||||
@ -327,9 +243,9 @@ app.component('v-chart', VueECharts)
|
||||
|
||||
<!-- vue2Scripts:start -->
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.3.1"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.0"></script>
|
||||
```
|
||||
<!-- vue2Scripts:end -->
|
||||
|
||||
@ -396,7 +312,7 @@ Vue.component("v-chart", VueECharts);
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<v-chart :option="option" @highlight="handleHighlight"/>
|
||||
<v-chart :option="option" @highlight="handleHighlight" />
|
||||
</template>
|
||||
```
|
||||
|
||||
@ -509,6 +425,7 @@ import { THEME_KEY } from 'vue-echarts'
|
||||
> }
|
||||
> }
|
||||
> ```
|
||||
|
||||
</details>
|
||||
|
||||
### 方法
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-echarts",
|
||||
"version": "6.3.1",
|
||||
"version": "6.4.1",
|
||||
"description": "Vue.js component for Apache ECharts.",
|
||||
"author": "GU Yiling <justice360@gmail.com>",
|
||||
"scripts": {
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
computed,
|
||||
inject,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
onBeforeUnmount,
|
||||
h,
|
||||
nextTick,
|
||||
watchEffect,
|
||||
@ -27,7 +27,8 @@ import type {
|
||||
InitOptions,
|
||||
InitOptionsInjection,
|
||||
UpdateOptions,
|
||||
UpdateOptionsInjection
|
||||
UpdateOptionsInjection,
|
||||
Emits
|
||||
} from "./types";
|
||||
import {
|
||||
usePublicAPI,
|
||||
@ -37,9 +38,10 @@ import {
|
||||
loadingProps
|
||||
} from "./composables";
|
||||
import { omitOn, unwrapInjected } from "./utils";
|
||||
import { register, TAG_NAME, type EChartsElement } from "./wc";
|
||||
import "./style.css";
|
||||
|
||||
const TAG_NAME = "x-vue-echarts";
|
||||
const wcRegistered = register();
|
||||
|
||||
if (Vue2) {
|
||||
Vue2.config.ignoredElements.push(TAG_NAME);
|
||||
@ -66,9 +68,10 @@ export default defineComponent({
|
||||
...autoresizeProps,
|
||||
...loadingProps
|
||||
},
|
||||
emits: [] as unknown as Emits,
|
||||
inheritAttrs: false,
|
||||
setup(props, { attrs }) {
|
||||
const root = shallowRef<HTMLElement>();
|
||||
const root = shallowRef<EChartsElement>();
|
||||
const chart = shallowRef<EChartsType>();
|
||||
const manualOption = shallowRef<Option>();
|
||||
const defaultTheme = inject(THEME_KEY, null);
|
||||
@ -271,7 +274,17 @@ export default defineComponent({
|
||||
init();
|
||||
});
|
||||
|
||||
onUnmounted(cleanup);
|
||||
onBeforeUnmount(() => {
|
||||
if (wcRegistered && root.value) {
|
||||
// For registered web component, we can leverage the
|
||||
// `disconnectedCallback` to dispose the chart instance
|
||||
// so that we can delay the cleanup after exsiting leaving
|
||||
// transition.
|
||||
root.value.__dispose = cleanup;
|
||||
} else {
|
||||
cleanup();
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
chart,
|
||||
|
||||
13
src/index.vue2.d.ts
vendored
13
src/index.vue2.d.ts
vendored
@ -1,6 +1,12 @@
|
||||
/* eslint-disable @typescript-eslint/ban-types */
|
||||
import type { Ref, DefineComponent } from "vue-demi";
|
||||
import type { Option, InitOptions, UpdateOptions, EChartsType } from "./types";
|
||||
import type {
|
||||
Option,
|
||||
InitOptions,
|
||||
UpdateOptions,
|
||||
EChartsType,
|
||||
Emits
|
||||
} from "./types";
|
||||
|
||||
declare const LOADING_OPTIONS_KEY = "ecLoadingOptions";
|
||||
declare const THEME_KEY = "ecTheme";
|
||||
@ -47,7 +53,10 @@ declare const Chart: DefineComponent<
|
||||
},
|
||||
{},
|
||||
{},
|
||||
ChartMethods
|
||||
ChartMethods,
|
||||
{},
|
||||
{},
|
||||
Emits
|
||||
>;
|
||||
|
||||
export default Chart;
|
||||
|
||||
@ -1 +1 @@
|
||||
x-vue-echarts{display:block;width:100%;height:100%}
|
||||
x-vue-echarts{display:block;width:100%;height:100%;min-width:0}
|
||||
|
||||
81
src/types.ts
81
src/types.ts
@ -19,3 +19,84 @@ type ZRenderType = ReturnType<EChartsType["getZr"]>;
|
||||
export type EventTarget = EChartsType | ZRenderType;
|
||||
type SetOptionType = EChartsType["setOption"];
|
||||
export type Option = Parameters<SetOptionType>[0];
|
||||
|
||||
type EChartsMouseEventName =
|
||||
| "click"
|
||||
| "dblclick"
|
||||
| "mousedown"
|
||||
| "mousemove"
|
||||
| "mouseup"
|
||||
| "mouseover"
|
||||
| "mouseout"
|
||||
| "globalout"
|
||||
| "contextmenu";
|
||||
type EChartsOtherEventName =
|
||||
| "highlight"
|
||||
| "downplay"
|
||||
| "selectchanged"
|
||||
| "legendselectchanged"
|
||||
| "legendselected"
|
||||
| "legendunselected"
|
||||
| "legendselectall"
|
||||
| "legendinverseselect"
|
||||
| "legendscroll"
|
||||
| "datazoom"
|
||||
| "datarangeselected"
|
||||
| "graphroam"
|
||||
| "georoam"
|
||||
| "treeroam"
|
||||
| "timelinechanged"
|
||||
| "timelineplaychanged"
|
||||
| "restore"
|
||||
| "dataviewchanged"
|
||||
| "magictypechanged"
|
||||
| "geoselectchanged"
|
||||
| "geoselected"
|
||||
| "geounselected"
|
||||
| "axisareaselected"
|
||||
| "brush"
|
||||
| "brushEnd"
|
||||
| "brushselected"
|
||||
| "globalcursortaken"
|
||||
| "rendered"
|
||||
| "finished";
|
||||
type ZRenderEventName =
|
||||
| "click"
|
||||
| "dblclick"
|
||||
| "mousewheel"
|
||||
| "mouseout"
|
||||
| "mouseover"
|
||||
| "mouseup"
|
||||
| "mousedown"
|
||||
| "mousemove"
|
||||
| "contextmenu"
|
||||
| "drag"
|
||||
| "dragstart"
|
||||
| "dragend"
|
||||
| "dragenter"
|
||||
| "dragleave"
|
||||
| "dragover"
|
||||
| "drop"
|
||||
| "globalout";
|
||||
type OtherEventName = EChartsOtherEventName | `zr:${ZRenderEventName}`;
|
||||
|
||||
// See https://echarts.apache.org/en/api.html#events.Mouse%20events
|
||||
interface MouseEventParams {
|
||||
componentType: string;
|
||||
seriesType: string;
|
||||
seriesIndex: number;
|
||||
seriesName: string;
|
||||
name: string;
|
||||
dataIndex: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
type MouseEmits = {
|
||||
[k in EChartsMouseEventName]: (params: MouseEventParams) => boolean;
|
||||
};
|
||||
|
||||
type OtherEmits = {
|
||||
[key in OtherEventName]: null;
|
||||
};
|
||||
|
||||
export type Emits = MouseEmits & OtherEmits;
|
||||
|
||||
51
src/wc.ts
Normal file
51
src/wc.ts
Normal file
@ -0,0 +1,51 @@
|
||||
let registered: boolean | null = null;
|
||||
|
||||
export const TAG_NAME = "x-vue-echarts";
|
||||
|
||||
export interface EChartsElement extends HTMLElement {
|
||||
__dispose: (() => void) | null;
|
||||
}
|
||||
|
||||
export function register(): boolean {
|
||||
if (registered != null) {
|
||||
return registered;
|
||||
}
|
||||
|
||||
if (
|
||||
typeof HTMLElement === "undefined" ||
|
||||
typeof customElements === "undefined"
|
||||
) {
|
||||
return (registered = false);
|
||||
}
|
||||
|
||||
try {
|
||||
// Class definitions cannot be transpiled to ES5
|
||||
// so we are doing a little trick here to ensure
|
||||
// we are using native classes. As we use this as
|
||||
// a progressive enhancement, it will be fine even
|
||||
// if the browser doesn't support native classes.
|
||||
const reg = new Function(
|
||||
"tag",
|
||||
`class EChartsElement extends HTMLElement {
|
||||
__dispose = null;
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this.__dispose) {
|
||||
this.__dispose();
|
||||
this.__dispose = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (customElements.get(tag) == null) {
|
||||
customElements.define(tag, EChartsElement);
|
||||
}
|
||||
`
|
||||
);
|
||||
reg(TAG_NAME);
|
||||
} catch (e) {
|
||||
return (registered = false);
|
||||
}
|
||||
|
||||
return (registered = true);
|
||||
}
|
||||
Reference in New Issue
Block a user