ecomfe/vue-echarts

Native listener on VueEcharts Component does not work in Vue 3

kingyue737 opened this issue · 4 comments

kingyue737 commented

Confirmation

  • I can confirm this problem is not reproducible with ECharts itself.

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

+-- @vitejs/plugin-vue@5.0.4
| `-- vue@3.4.19 deduped
+-- echarts@5.5.0
+-- vue-echarts@6.6.9
| +-- echarts@5.5.0 deduped
| +-- vue-demi@0.13.11
| | `-- vue@3.4.19 deduped
| `-- vue@3.4.19 deduped
`-- vue@3.4.19
  `-- @vue/server-renderer@3.4.19
    `-- vue@3.4.19 deduped

Details

In Vue 3, native event listener like on:mouseenter does not work on v-chart. When mouse enters the chart, nothing happens.

<v-chart @mouseenter="testFn" />

No such issue in Vue 2. The following works in Vue v2.7:

<v-chart @mouseenter.native="testFn" />

Reproduction

https://stackblitz.com/edit/vitejs-vite-kxigen

kingyue737 commented

@Justineo Not an expected behavior. In Vue 3, we do not need .native modifier and the listener will automatically become a native event listener if this event is not defined in component

Here in Vue-Echarts, the listener just does not work, instead of falling back to an effective native event listener

kingyue737 commented

Ah I see, inheritAttrs: false is set in Vue ECharts. Why turn this off?
https://github.com/ecomfe/vue-echarts/blob/311d588850b83debbea7f1e501f8ceddf7abec5f/src/ECharts.ts#L73C17-L73C22

How can I use native event listener on VChart in Vue 3 🤔， without wrapping an element around every v-chart?

Justineo commented

Vue-Echarts is delegating all events to ECharts itself and that's why it doesn't work (so that you can bind ECharts events directily like <v-chart @datazoom="..." />). You cannot do that with Vue 2 without a .native modifier either. Currently you need to an HTML element as a wrapper to bind events like mouseenter.