vue中 使用echarts自定义图标点击事件需用箭头函数

最新推荐文章于 2024-04-18 16:42:03 发布
最新推荐文章于 2024-04-18 16:42:03 发布
阅读量245 收藏
点赞数
分类专栏： js 前端 vue 文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43503450/article/details/129444204
版权
前端 同时被 3 个专栏收录
23 篇文章 0 订阅
订阅专栏
vue
23 篇文章 0 订阅
订阅专栏
js
16 篇文章 0 订阅
订阅专栏
文章讲述了在Vue应用中使用Echarts时，如何自定义图表工具箱中的图标并设置点击事件。特别是使用箭头函数来确保`this`的正确指向，以便切换图表显示类型（如按月或按季度）并调用`getChartone()`方法更新图表。
摘要由CSDN通过智能技术生成 
        toolbox: {
          feature: {
            myTool2: {
              show: true,
              title: "按月",
              icon: `image://${month}`,
              onclick: () => {
                // 季度
                this.showType = "月";
                this.getChartone();
              },
            },
            myTool3: {
              show: true,
              title: "按季度",
              icon: `image://${day}`,
              onclick: () => {
                // 季度
                this.showType = "季";
                this.getChartone();
              },
            },

            saveAsImage: { show: true },
          },
        },

vue中 使用echarts自定义图标点击事件需用箭头函数，否则this指向有问题

JMS_兔子
关注
专栏目录
vue中组件的自定义事件（详）
蜗牛~~
11-01 1万+
今天这篇文章，让你彻底学会组件自定义事件…… 我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。 问题一：什么是组件自定义事件呢？ 自定义事件，顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。而内置事件是给html元素用的，比如span、div等标签，不是组件。 也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。 问题二：如何实现子组件给父组件传值？ （1）复习一下props父
html引入echart地图点击,基于echarts实现3D地图的定时高亮和点击事件
weixin_42345187的博客
06-15 1026
技术选型文章所选技术栈：vue、echarts、echarts-gl安装Vue和echarts1、安装echarts和echarts-alnpm i echarts --save npm i echarts-gl --save2、引用echarts和echarts-glimport echarts from 'echarts';import 'echarts-gl'Vue.prototype.$e...
vue 项目引入echarts 添加点击事件操作
10-14
主要介绍了vue 项目引入echarts 添加点击事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3引入echarts的使用（图表点击事件）
weixin_75014991的博客
11-09 1165
【代码】vue3引入echarts的使用。
vue中使用echarts实现柱状图点击事件
风如也的博客
11-13 6537
drawBar(){ // 告警次数TOPN 柱状图 // 基于准备好的dom，初始化echarts实例 let ref = this.$refs.bar if (ref && ref !== undefined) { let myChart = this.$echarts.init(ref) // 绘制图表 myChart.setOption({ color: ['#f16e6b'], tooltip: { tr
Vue 3 使用 vue-echarts 的柱状图 barItem 和 x, y 轴点击事件实现
weixin_68465735的博客
08-03 4290
作为 CV 程序员，第一时间搜索网上的解决方案，但是基本都是 Vue 3 搭配 ECharts 实现的，作为菜鸟且项目已经使用 vue-echarts 实现了图标的需求，所以那就只能借鉴ECharts 的实现方案，然后看有没有对应的方法。我们可以看到我们点击的位置不同，params 中的 componentType 的值是不一样的，所以我们可以通过点击事件回调给我们的 params 中的 componentType 参数来区分点击的是哪里，然后做出相应的事件处理；
Vue3 echarts tooltip添加点击事件（最简版）
最新发布
D_S_S_的博客
04-18 1481
Vue3 echarts tooltip添加点击事件
Vue使用echarts自定义工具栏图标路径错误
qq_39271815的博客
07-02 743
Vue使用echarts自定义工具栏图标路径错误 在使用vue集成echarts过程中想要自定义工具栏图标，在使用过程中参考官方文档，图片始终显示不出来。在参考了一些博客，最终把问题解决了。在此总结一下。 在Vue项目中，除了static文件夹，图片放在其他文件夹都会被webpack构建，如改成base64的格式。因此js就会找不到图片路径。 如果想要正确引入图片可以使用以下几种方式： 1、使用 require 例: icon: 'image://' + require('../../assets/im
vue-echarts, 在 Vue.js(v2.x.x) 应用程序中，使用Echarts的自定义指令.zip
09-17
vue-echarts, 在 Vue.js(v2.x.x) 应用程序中，使用Echarts的自定义指令 echarts在 Vue.js 应用程序中使用 Echarts的自定义指令。 演示点击这里。用法下载这里 repo 并将文件 ./directives/echarts.js 复制到你的项目...
vue结合Echarts实现点击高亮效果的示例
08-27
在上面的示例代码中，我们首先在mounted生命周期钩子函数中初始化了Echarts实例，然后绑定了点击事件和右键点击事件。当用户点击图表中的某个元素时，会触发点击事件，并将高亮显示该元素。 3. 点击事件的处理 ...
vue.js使用vue-echarts给柱形图绑定点击事件
热门推荐
DannyIsCoder的博客
05-23 1万+
<template> <div class="echarts"> <IEcharts :option="bar" :loading="loading" @ready="onReady" @click="onClick"></IEcharts> <button @cl
vue3 + ts + echarts图例点击事件（legendselectchanged事件）
m0_67624022的博客
01-11 1802
在 ECharts 中，可以通过监听图例的点击事件来实现相应的交互。当图例被点击时，可以捕获这个事件并执行相应的操作。 在 legendselectchanged 事件上添加了一个监听器，当图例被点击时，会触发这个事件，可以获取到点击的图例信息，然后执行相应的操作。
vue3+ts+echarts饼图不同数据添加点击事件
新人一枚，互相学习哦！
06-25 2241
是 ECharts 的 Vue.js 组件，用于在 Vue.js 应用中方便地使用 ECharts 图表库。1)、安装vue-echarts组件，然后.vue组件中引入使用。vue + ts中这样使用，用来双向数据绑定。2)、template中使用标签。：饼图数据暂未假数据。3)、图表数据展示【
vue+echarts点击事件防抖、节流
Igiveufireworks的博客
09-19 1153
vue+echarts点击事件防抖、节流
vue echarts 地图 点击事件
weixin_46463643的博客
11-24 3252
<template> <div class="accountOwn"> <div class="echartsMap" ref="myEchart" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="#284.
vue在echarts地图里添加对应板块的点击事件
weixin_53281434的博客
09-06 827
直接通过formatter返回methods自定义方法，如果不生效可以在前面定义一下var _this = this，params为点击模块的对应信息，具体设置formatter回调函数的方式可根据自己的情况定义 this.option.tooltip.formatter = (params) => { return this.toDetail(params) } ...
vue中echarts书写拓扑图
技术改变生活
01-26 8992
最近在做拓扑图找了下前端常用的组件：jTopo（感觉有点老）、Vis.js（文档是英文的，不太容易读）、D3（功能强大需要自己实现）、ECharts（同样需要自己实现） 由于图形上的交互并没有需要特别多所以用了echart - graph，文档地址：https://echarts.apache.org/zh/option.html#series-graph 这是展示样子 dom节点 <div :style="{ height: cellHeight, width: '100%' }.
echarts关系图--vue3-点击按钮添加节点
Yyh18055242681的博客
12-18 246
【代码】echarts关系图--vue3-点击按钮添加节点。
如何在echarts的图形中添加点击事件！！
qq_27098879的博客
05-03 1万+
    最近在做echarts的点击事件中获得体会，如何在echarts中添加点击事件，比如一个弹出框，查询官方api可得知，其回调函数中的params参数包括以上的这些属性，可以获得我们想要的信息，通过信息完成事件的发生。这是js中的调用方式comChars.on('click',function(params){ var name = params.name; var seriesType...
Vue中使用Echarts结合watch实现动态数据渲染
本文主要讲解如何在Vue.js项目中结合ECharts实现动态数据渲染，通过使用Vue的`watch`属性来监听数据变化并更新图表。 在Vue中集成ECharts，首先需要安装ECharts库，这可以通过npm进行安装： ```bash npm install ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值