位置: 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是什么)

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

  • 爱奇艺电脑版怎么开弹幕(爱奇艺电脑版怎么退出登录)

    爱奇艺电脑版怎么开弹幕(爱奇艺电脑版怎么退出登录)

  • 红米10x有红外线功能吗(荣耀x50i有没有红外线)

    红米10x有红外线功能吗(荣耀x50i有没有红外线)

  • qq注销后会带来什么后果(qq注销后会带来什么影响)

    qq注销后会带来什么后果(qq注销后会带来什么影响)

  • 微信群违规还能恢复吗(微信群违规还能解封吗)

    微信群违规还能恢复吗(微信群违规还能解封吗)

  • 华为bkkal10是什么(华为bkkal10是什么型号手机)

    华为bkkal10是什么(华为bkkal10是什么型号手机)

  • 限制加好友处理多久才能恢复(限制加好友能解除吗)

    限制加好友处理多久才能恢复(限制加好友能解除吗)

  • 手机内存大小影响手机速度吗(手机内存大小影响手机流畅度吗)

    手机内存大小影响手机速度吗(手机内存大小影响手机流畅度吗)

  • iphone11横屏设置在哪里(iphone11 横屏设置)

    iphone11横屏设置在哪里(iphone11 横屏设置)

  • 以太网和宽带的区别(以太网和宽带的网线区别在哪)

    以太网和宽带的区别(以太网和宽带的网线区别在哪)

  • icloud合并还是不合并(icloud合并与不合并区别)

    icloud合并还是不合并(icloud合并与不合并区别)

  • 微视频发微信朋友圈为什么别人看不见(微视频能发到微信朋友圈)

    微视频发微信朋友圈为什么别人看不见(微视频能发到微信朋友圈)

  • 小米8se开机一直显示mi(小米8se开机一直显示mi 无法开机)

    小米8se开机一直显示mi(小米8se开机一直显示mi 无法开机)

  • 华为手机怎么输入特殊符号(华为手机怎么输入手写法)

    华为手机怎么输入特殊符号(华为手机怎么输入手写法)

  • 微信怎么登录电脑网页版(微信怎么登录电脑打印文件)

    微信怎么登录电脑网页版(微信怎么登录电脑打印文件)

  • 3kw一小时几度电(3kw一小时几度电多少钱)

    3kw一小时几度电(3kw一小时几度电多少钱)

  • b站账号封禁中会是什么情况(b站账号封禁中怎么看封禁时间)

    b站账号封禁中会是什么情况(b站账号封禁中怎么看封禁时间)

  • 微信朋友圈不能评论是怎么回事(微信朋友圈不能发纯文字)

    微信朋友圈不能评论是怎么回事(微信朋友圈不能发纯文字)

  • qq音乐怎么改登录密码(qq音乐怎么更换登录)

    qq音乐怎么改登录密码(qq音乐怎么更换登录)

  • 华为p306G和8G区别(华为p306g与8g哪个好)

    华为p306G和8G区别(华为p306g与8g哪个好)

  • 什么叫元屏(什么叫元屏,什么叫组装屏)

    什么叫元屏(什么叫元屏,什么叫组装屏)

  • 小米商城怎么取消退货(小米商城怎么取消售后服务)

    小米商城怎么取消退货(小米商城怎么取消售后服务)

  • 设置不拉黑拒绝收信息(不拉黑对方怎么可以拒接电话)

    设置不拉黑拒绝收信息(不拉黑对方怎么可以拒接电话)

  • 如何用微信查手机话费和流量(如何用微信查手机位置)

    如何用微信查手机话费和流量(如何用微信查手机位置)

  • 华为手环3pro怎么开机(华为手环3pro怎么连接手机)

    华为手环3pro怎么开机(华为手环3pro怎么连接手机)

  • cad2016怎么切换到经典模式(cad2016怎么切换模型和图纸)

    cad2016怎么切换到经典模式(cad2016怎么切换模型和图纸)

  • 未取得房屋产权证租赁
  • 统一社会信用代码查询企业名称
  • 加计扣除产生的滞纳金
  • 新公司成立第一次会议
  • 月初认证的增值税发票可以吗
  • 企业城建税教育费附加和地教费的税率是多少
  • 劳动保护费现金流量表项目
  • 退休工资缴纳个人所得税税率表
  • 企业税金包括
  • 进料加工企业的增值税如何处理
  • 个体工商户怎么注销
  • 购税控盘账务处理
  • 银行支付结算工作内容
  • 代收收入会计分录
  • 当月预交增值税时所属期选了上期怎么办
  • 废品材料回收价格
  • 印花税已经缴纳了但是还未申报
  • 企业员工报销法律规定
  • 地方水利建设基金的会计分录
  • 红包营销活动方案
  • 是否只有首次购买税控盘可以全额抵减增值税
  • 技术服务税票
  • 中小企业货币资金内部控制案例
  • 公积金贷款利息现在是多少
  • 我的初级奋斗经历作文
  • 空调安装费开票属于什么类
  • 纳税人不得汇总开具发票
  • 未开票的货款记什么科目
  • 经营租入的土地使用权 待摊
  • 无法查明原因现金盘盈计入什么科目
  • 在edge浏览器中打开农行K宝
  • office自定义功能区
  • 华为如何定时关机
  • 在路由器设置中怎么设置
  • 自由职业者如何交五险一金
  • linux解压安装
  • 蕾德纳斯
  • 存货核算有哪些内容
  • thinkphp5.0框架
  • 小规模纳税人报税期是哪几个月
  • 报废机器设备会计分录
  • 农业企业所得税是免税的吗
  • 将织梦dedecms转换到wordpress
  • 个体工商户可以开增值税专用发票
  • sql server怎么用sql语句创建数据库
  • 含税含运费价格,运费谁出
  • 未开票收入缴纳增值税怎么冲减补开发票
  • 增值税留底注销时怎么办
  • 新领的发票怎么导入uk开票系统
  • 如何区分交通运输的方向
  • 残疾人残保金如何计算
  • 少计提的税费如何补提
  • 报表与账不符情况说明
  • 研发费用加计扣除的条件
  • 合同取得成本如何收回
  • 小规模纳税人季度不超30万怎么做账
  • 地方教育费附加从哪年开始征收的
  • mysql删除方法
  • Windows环境下,在给文件命名时( )
  • mysql的基本操作语句
  • 局域网 下载
  • linux中字符设备有哪些
  • mac怎么打出@符号
  • windows无法访问指定设备路径权限
  • centos7.6安装kvm
  • win7磁盘管理怎么显示隐藏分区
  • 比较好的jquery教程
  • excel实现多选
  • Extjs4 GridPanel 的几种样式使用介绍
  • html中渐变
  • jquery监听页面刷新
  • angular const
  • jquery中如何获取元素?
  • JavaScript中的this指向
  • js 回调函数写法
  • 用js做表单验证
  • 商业发票发票号怎么填写
  • 一般纳税人开票的税率是多少
  • 大连市国家税务局官网登录
  • 浙江省增值税专用发票票样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设