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

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

  • 加计扣除填不了
  • 企业纳税人是什么
  • 小规模企业所得税会计分录怎么做
  • 职工的困难补助计入什么科目
  • 企业贷款合同签订后多久放款
  • 金税盘纳税申报流程
  • 已经勾选确认的发票可以取消认证吗
  • 红冲发票跨年怎么操作
  • 关联方交易容易产生哪些弊端
  • 购房补贴退契税3个月没到账
  • 将外购商品作为非货币性
  • 政府发的补助金用不用交税
  • 员工因为过错给公司造成损失
  • 投资款多投了怎么办
  • 建筑行业劳务费开发票可以开工程款吗?
  • 未达起征点企业怎么处理
  • 即用于一般计税又用于简易计税的固定资产抵扣
  • 发票领出来之后税盘要怎么处理
  • 一般纳税人购进原材料支付的增值税
  • 企业没有进项票只有成本票
  • 面对通过网络涌入的大量信息,我们应该学会
  • 怎么做汇算清缴报表
  • 固定资产进项税额怎么做账
  • 暂估入库怎么处理
  • 企业银行存款如何管理
  • 印花税的计税依据是含税还是不含税
  • php网页爬虫
  • 其他应付款与应付款的区别
  • 股权和债权转让的关系
  • ios 的 safari 浏览器
  • 矿产资源补偿费是什么
  • 固定资产入账流程图
  • 代销商品受托方怎么做账
  • javascript移动鼠标
  • 企业收到赠送商品怎么办
  • php str_split
  • php加密zend
  • 图像可以分成哪些类别?
  • 深度学习部署(十九): CUDA RunTime API YOLOV5后处理cpu解码以及gpu解码
  • javascript学什么内容
  • apache php mysql开发环境安装教程
  • 资本化利息支出现金流量表计入哪里
  • 存货非正常损失可以所得税前扣除吗
  • 购货方享受现金流量吗
  • 税控设备抵减增值税必须当月抵减吗
  • 加工企业的税怎么算
  • 影响公司股利分成的因素
  • 在excel中怎么制作
  • 长期股权投资的账面价值怎么计算
  • 装修工程一般质保几年
  • sql server 2008使用说明
  • 车辆保险发票一般在哪开
  • 商业承兑汇票的风险
  • 税务局返还的个税手续费是否纳税
  • 收到投资款现金流量放到哪里
  • 房产税开征利好那些概念股 新闻
  • 以前年度多计提成本怎么处理
  • 以前年度损益调整账务处理分录
  • 一般纳税人的服务费税率是多少
  • 如果是车间不生气怎么办
  • 认证系统维护费可以全额抵扣吗
  • 本年利润为什么是负数
  • 盘盈的固定资产怎么处理
  • Winserver2012下mysql 5.7解压版(zip)配置安装教程详解
  • 优化什么建立生育支持政策体系
  • watchs2最新版本
  • windows7与xp共享文件夹
  • 在windows xp的应用程序中,经常有一些
  • centos做bond4
  • win7鼠标突然不能用了
  • windows8怎么设置开机启动项
  • WIN10安装教程
  • linux定时任务详解
  • itertools.permutations
  • jquery easy ui
  • js每天的定时任务
  • jquery插件使用
  • python多线程怎么用
  • 开票软件重置密码去哪里
  • 国税总局北京税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设