mirror of
https://github.com/ecomfe/vue-echarts.git
synced 2025-08-14 11:00:16 +08:00
fix: fix event support for Vue 2, fix #510
This commit is contained in:
@ -1,3 +1,7 @@
|
||||
## 6.0.0-alpha.5
|
||||
|
||||
* Fix event support for Vue 2.
|
||||
|
||||
## 6.0.0-alpha.4
|
||||
|
||||
* Add missing injection key exports.
|
||||
|
@ -100,7 +100,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.5"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.0"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.4"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
|
||||
```
|
||||
|
||||
<!-- vue3Scripts:end -->
|
||||
@ -125,7 +125,7 @@ app.component('v-chart', VueECharts)
|
||||
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-rc.2"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.0"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.4"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
|
||||
```
|
||||
|
||||
<!-- vue2Scripts:end -->
|
||||
|
@ -98,7 +98,7 @@ import "echarts";
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.5"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.0"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.4"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
|
||||
```
|
||||
|
||||
<!-- vue3Scripts:end -->
|
||||
@ -123,7 +123,7 @@ app.component('v-chart', VueECharts)
|
||||
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-rc.2"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.6.0"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.4"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-alpha.5"></script>
|
||||
```
|
||||
|
||||
<!-- vue2Scripts:end -->
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-echarts",
|
||||
"version": "6.0.0-alpha.4",
|
||||
"version": "6.0.0-alpha.5",
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build:demo": "vue-cli-service build",
|
||||
|
@ -58,6 +58,7 @@ const options = [
|
||||
file: "dist/index.umd.js",
|
||||
format: "umd",
|
||||
name: "VueECharts",
|
||||
exports: "named",
|
||||
sourcemap: true,
|
||||
globals: {
|
||||
"vue-demi": "VueDemi",
|
||||
@ -69,6 +70,7 @@ const options = [
|
||||
file: "dist/index.umd.min.js",
|
||||
format: "umd",
|
||||
name: "VueECharts",
|
||||
exports: "named",
|
||||
sourcemap: true,
|
||||
globals: {
|
||||
"vue-demi": "VueDemi",
|
||||
|
@ -54,7 +54,9 @@ export default defineComponent({
|
||||
...autoresizeProps,
|
||||
...loadingProps
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
// @ts-expect-error
|
||||
setup(props, { attrs, listeners }) {
|
||||
const root = ref<HTMLElement>();
|
||||
const chart = shallowRef<EChartsType>();
|
||||
const manualOption = shallowRef<Option>();
|
||||
@ -98,21 +100,33 @@ export default defineComponent({
|
||||
instance.group = props.group;
|
||||
}
|
||||
|
||||
Object.keys(attrs)
|
||||
.filter(key => key.indexOf("on") === 0)
|
||||
.forEach(key => {
|
||||
const handler = attrs[key] as any;
|
||||
let realListeners = listeners;
|
||||
if (!realListeners) {
|
||||
realListeners = {};
|
||||
|
||||
if (!handler) {
|
||||
return;
|
||||
}
|
||||
Object.keys(attrs)
|
||||
.filter(key => key.indexOf("on") === 0 && key.length > 2)
|
||||
.forEach(key => {
|
||||
// onClick -> c + lick
|
||||
// onZr:click -> z + r:click
|
||||
const event = key.charAt(2).toLowerCase() + key.slice(3);
|
||||
realListeners[event] = attrs[key];
|
||||
});
|
||||
}
|
||||
|
||||
if (key.indexOf("onZr:") === 0) {
|
||||
instance.getZr().on(key.slice(5).toLowerCase(), handler);
|
||||
} else {
|
||||
instance.on(key.slice(2).toLowerCase(), handler);
|
||||
}
|
||||
});
|
||||
Object.keys(realListeners).forEach(key => {
|
||||
const handler = realListeners[key] as any;
|
||||
|
||||
if (!handler) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (key.indexOf("zr:") === 0) {
|
||||
instance.getZr().on(key.slice(3).toLowerCase(), handler);
|
||||
} else {
|
||||
instance.on(key.toLowerCase(), handler);
|
||||
}
|
||||
});
|
||||
|
||||
instance.setOption(option || realOption.value, realUpdateOptions.value);
|
||||
}
|
||||
|
@ -272,7 +272,7 @@
|
||||
<script>
|
||||
/* eslint-disable no-console */
|
||||
import qs from "qs";
|
||||
import VChart from "../../dist/index.esm";
|
||||
import VChart from "../ECharts";
|
||||
|
||||
import * as echarts from "echarts/core";
|
||||
import {
|
||||
@ -397,11 +397,11 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log("click from echarts");
|
||||
handleClick(...args) {
|
||||
console.log("click from echarts", ...args);
|
||||
},
|
||||
handleZrClick() {
|
||||
console.log("click from zrender");
|
||||
handleZrClick(...args) {
|
||||
console.log("click from zrender", ...args);
|
||||
},
|
||||
refresh() {
|
||||
// simulating async data from server
|
||||
|
@ -1,3 +1,4 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { init } from "echarts/core";
|
||||
import { Ref } from "vue";
|
||||
|
||||
@ -21,4 +22,7 @@ export interface UpdateOptions {
|
||||
replaceMerge?: any;
|
||||
transition?: any;
|
||||
}
|
||||
export type UpdateOptionsInjection = UpdateOptions | null | Ref<UpdateOptions | null>;
|
||||
export type UpdateOptionsInjection =
|
||||
| UpdateOptions
|
||||
| null
|
||||
| Ref<UpdateOptions | null>;
|
||||
|
Reference in New Issue
Block a user