vue-echarts的ZRender事件

首先贴出 vue-echarts 的官网连接：https://www.npmjs.com/package/vue-echarts1、vue-echarts 具体在vue中的使用方法，本文中就暂时不多介绍了；2、如何在vue中使用vue-echarts的鼠标事件：具体使用方式跟vue中使用echarts一样，都是通过 @事件名来实现的：<v-chart class="chart" ref="

David_jiahuan

3906人浏览 · 2021-07-19 15:31:30

David_jiahuan · 2021-07-19 15:31:30 发布

首先贴出 vue-echarts 的官网连接：https://www.npmjs.com/package/vue-echarts

1、vue-echarts 具体在vue中的使用方法，本文中就暂时不多介绍了；

2、如何在vue中使用vue-echarts的鼠标事件：

具体使用方式跟vue中使用echarts一样，都是通过 @事件名 来实现的：

<v-chart class="chart" ref="mychart" :option="defaultOption" autoresize
         @click="onClick"/>

这里的 @click 就是指鼠标点击事件；

3、本文主要还是想介绍一下如何在vue中的vue-echarts 组件上使用 ZRender 事件：

其实ZRender事件跟鼠标事件是一样的，只是前面多了个 zr: 前缀而已：

<v-chart class="chart" ref="mychart" :option="defaultOption" autoresize
         @click="onClick" @zr:click="zrClick"/>

这里的 @zr:click 就是指ZRender点击事件；

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^