位置: IT常识 - 正文

vue-echarts饼图/柱状图点击事件(vue引入echarts柱状图)

编辑:rootadmin
vue-echarts饼图/柱状图点击事件

推荐整理分享vue-echarts饼图/柱状图点击事件(vue引入echarts柱状图),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue echarts 饼状图,vue echart图表,vue echarts 饼状图,vue echarts 饼图,vue echarts 饼状图,vue echart图表,vue echart图表,vue 饼图,内容如对您有帮助,希望把文章链接给更多的朋友!

在实际的项目开发中,我们通常会用到Echarts来对数据进行展示,有时候需要用到Echarts的点击事件,增加系统的交互性,一般是点击Echarts图像的具体项来跳转路由并携带参数,当然也可以根据具体需求来做其他的业务逻辑。下面就Echarts图表的点击事件进行实现,文章省略了Echarts图的html代码,构建过程,option,适用的表格有饼图、柱状图、折线图。如果在实现过程中,遇到困难或者有更好的建议,欢迎留言。

饼图点击事件mounted() { //饼状图点击事件 myChart.on('click', (param) =>{ //这里使用箭头函数代替function,this指向VueComponent let index; //当前扇区的dataIndex index = param.dataIndex; //自己的操作,这里是点击跳转路由,并携带参数 if (index !== undefined) { //myChartYData为饼图数据 if (this.myChartYData[index].value!=0){ /*跳转路由*/ this.$router.push({ path: '/project/list', query: { status: index+1, } }) } } });}柱状图点击事件(折线图也可使用)

我们可以通过 myChart.getZr().on('click', ...) 来检测整个图表的点击事件,并且通过回调函数的参数来判断点击的区域,

参数params如下:

​ 通过参数对象中的target属性和topTarget属性进行定位位置​ 当点击某个图形元素:target对象中有dataIndex,seriesIndex属性,即可知道点击那个图形元素。​ 当点击grid内的空白位置:target对象为undefined,topTarget不为undefined。​ 当点击坐标轴标签:topTarget对象的anid值为"label_xx", xx为坐标值。​ 当点击坐标轴外的空白位置:target对象和topTarget多为undefined。 //柱状图点击事件myChart.getZr().on('click', (params) => { //echartsData为柱状图数据 if (this.echartsData.deviceCode.length > 0) { const pointInPixel = [params.offsetX, params.offsetY]; //点击第几个柱子 let index; if (myChart.containPixel('grid', pointInPixel)) { index = myChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0]; } if (index !== undefined) { /*事件处理代码书写位置*/ var deviceMac = this.echartsData.deviceMac[index]; /*跳转路由*/ this.$router.push({ name: 'Statistics', params: { mac: deviceMac, } }) } } });vue-echarts饼图/柱状图点击事件(vue引入echarts柱状图)

1、使用getZr添加图表的整个canvas区域的点击事件,并获取params携带的信息:

        myChart.getZr().on('click', (params) => {}

2、获取到鼠标点击位置:

const pointInPixel = [params.offsetX, params.offsetY];

3、使用containPixel API判断点击位置是否在显示图形区域,下面的例子过滤了绘制图形的网格外的点击事件,比如X、Y轴lable、空白位置等的点击事件。

if (myChart.containPixel('grid', pointInPixel)) {}

4、使用API convertFromPixel获取点击位置对应的x轴数据的索引值index,我的实现是借助于索引值获取数据,当然可以获取到其它的信息,详细请查看文档。

let index = myChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];

其实在上一步骤中可以获取到丰富的诸如轴线、索引、ID等信息,可以在自己的事件处理代码中方便的使用。

本文链接地址:https://www.jiuchutong.com/zhishi/283897.html 转载请保留说明!

上一篇:Lxbkbmon.exe是什么进程 有什么作用 Lxbkbmon进程查询(xwizard.exe是什么)

下一篇:若依框架文档开发手册----开发中常用功能模块(若依框架搭建)

  • 一个山姆账号可几台手机登录(一个山姆账号可以登录)

    一个山姆账号可几台手机登录(一个山姆账号可以登录)

  • 三星手机通话录音在哪里能找到(三星手机通话录音怎么找到)

    三星手机通话录音在哪里能找到(三星手机通话录音怎么找到)

  • 荣耀root权限怎么开启(荣耀的root权限)

    荣耀root权限怎么开启(荣耀的root权限)

  • 微信运动好友步数看不到的解决办法(微信运动好友步数)

    微信运动好友步数看不到的解决办法(微信运动好友步数)

  • 美团举报商家会被商家知道自己的信息吗(美团举报商家会被商家多久会知道)

    美团举报商家会被商家知道自己的信息吗(美团举报商家会被商家多久会知道)

  • 手机突然异常发热(手机突然异常发热什么原因?)

    手机突然异常发热(手机突然异常发热什么原因?)

  • 淘宝8天退货是什么意思(淘宝8天退货和7天无理由退货一样吗)

    淘宝8天退货是什么意思(淘宝8天退货和7天无理由退货一样吗)

  • 光盘在电脑上为什么放不出来(光盘在电脑上为什么放不出来怎么办)

    光盘在电脑上为什么放不出来(光盘在电脑上为什么放不出来怎么办)

  • ipad支持鼠标吗(ipad可以用鼠标吗?)

    ipad支持鼠标吗(ipad可以用鼠标吗?)

  • c语句的结束符是什么(c语言语句的结束符是)

    c语句的结束符是什么(c语言语句的结束符是)

  • 删好友情侣空间会自动解除吗(删好友情侣空间怎么恢复)

    删好友情侣空间会自动解除吗(删好友情侣空间怎么恢复)

  • 为什么抖音没有美颜功能(为什么抖音没有点赞作品推荐给朋友)

    为什么抖音没有美颜功能(为什么抖音没有点赞作品推荐给朋友)

  • 喷墨打印机中最关键的技术和部件是什么(喷墨打印机中最重要的部分是)

    喷墨打印机中最关键的技术和部件是什么(喷墨打印机中最重要的部分是)

  • 苹果手机live怎么拍摄(苹果手机live怎么拍摄时间长)

    苹果手机live怎么拍摄(苹果手机live怎么拍摄时间长)

  • ps怎么移动图片位置(ps怎么移动图片到另一张图片)

    ps怎么移动图片位置(ps怎么移动图片到另一张图片)

  • 手机qq如何切换账号(手机qq如何切换隐身状态)

    手机qq如何切换账号(手机qq如何切换隐身状态)

  • iphone11什么时候在中国上市(iphone11什么时候下架的)

    iphone11什么时候在中国上市(iphone11什么时候下架的)

  • QQ如何把地址定位分享给好友(qq如何把地址定位改了)

    QQ如何把地址定位分享给好友(qq如何把地址定位改了)

  • 苹果6nfc功能怎么开启(苹果6nfc功能怎么开启在哪里开启图文)

    苹果6nfc功能怎么开启(苹果6nfc功能怎么开启在哪里开启图文)

  • vivox27是闪充吗(vivo x27是闪充吗)

    vivox27是闪充吗(vivo x27是闪充吗)

  • 闲鱼如何重新发布卖出的宝贝(闲鱼如何重新发链接)

    闲鱼如何重新发布卖出的宝贝(闲鱼如何重新发链接)

  • 快手发作品怎么定位别的地方(快手发作品怎么关闭位置)

    快手发作品怎么定位别的地方(快手发作品怎么关闭位置)

  • win10怎么显示文件后缀名(Win10怎么显示文件类型)

    win10怎么显示文件后缀名(Win10怎么显示文件类型)

  • 安装多版本node(安装多版本chrome)

    安装多版本node(安装多版本chrome)

  • 使用Pytorch实现深度学习的主要流程(pytorch技巧)

    使用Pytorch实现深度学习的主要流程(pytorch技巧)

  • date命令  显示或设置系统日期与时间(date=date)

    date命令 显示或设置系统日期与时间(date=date)

  • 2020年小微企业所得税税率
  • 融资利息进项税如何抵扣
  • 固定成本和变动成本之和称作
  • 返利应计入什么科目
  • 个税申报填写的工资是应发还是实发
  • 赠品不开票如何做账
  • 企业出资怎么填写
  • 未达起征点销售额怎么填申报表
  • 税控盘备案在电子税务局操作流程
  • 境外中资企业转让股权的涉税处理
  • 含运费的原材料会计分录
  • 专用发票红冲后可以退税吗?
  • 小规模纳税人附加税减免政策2023
  • 电子发票是专用发票吗
  • 出口收入转内销后汇率
  • 哪些人可以享受4050社保补贴
  • 店铺拆除费用
  • 出差餐费报销怎么报销
  • 制造费用明细科目大全
  • 不同的折旧方法对经济评价有什么影响
  • 审图费发票需要备注吗
  • 协会收取会员单位的会务费怎么做账
  • 收到融资租赁发票怎么做账
  • 投资者减除费用30000
  • 企业如何选择会计准则
  • 代扣代缴的城建税和教育费附加按委托方所在地的税率
  • 增值税专用发票丢了怎么补救
  • linux如何安装
  • php解析xml文件
  • php更新数据库
  • php面向对象是什么意思
  • ph是什么文件
  • 现金解款单的使用范围
  • service.exe是什么进程
  • 以前年度损益调整借贷方向
  • nginx反向代理未知域名
  • yii2框架中文手册
  • ConvNeXt V2学习笔记
  • 怎样申请土地增值税补贴
  • 临时工工资会计科目怎么录
  • 实例理解SQL中truncate和delete的区别
  • protobuf 文档
  • 利息支出是利息费用减利息收入吗
  • 预缴税款可以抵扣简易计税
  • 个人捐赠支出税前扣除条件
  • sql解析执行顺序
  • 承包经营所得适用比例税率
  • 捐赠的增值税可以抵扣吗
  • 所得税申报的资产总额是哪里的数据
  • 金蝶利息收入的正确分录
  • 固定资产赠送后怎么做凭证
  • 退税政策调整
  • 国内旅客运输票据可以抵扣进项税吗
  • 发票作废了还能恢复吗?
  • mysql unique作用
  • win8语言栏不见了 怎么调出来
  • win7users移动其它盘
  • win10系统任务栏卡顿
  • 如何设置桌面背景颜色
  • mac如何开启屏幕录制权限
  • 获取linuxip
  • xp清理系统的命令
  • mac文本软件
  • vivo渠道服容易被找回吗
  • linux中统计字符命令
  • 简单射击原理
  • opengl context for format
  • python必学的os模块详解
  • html收藏夹导入
  • 变量代码是什么
  • jquery 表格 排序
  • nodejs来一打c++扩展
  • python向oracle写入
  • python3 bytes类型
  • python 网络爬虫库
  • 商铺土地增值税预缴税率是多少
  • 什么叫售后回租赁合同
  • 签订设计合同
  • 四川残疾人社保补贴
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设