echarts柱形图给X轴坐标类目添加点击事件
在项目中遇到这么个需求要在柱形图上的x轴添加点击事件,当点击对应x轴文字的时候要弹出模态框展示子图表
- 根据echarts的Api给图表实例绑定点击事件
myChartInstance?.on('click', 'xAxis.category', (params) => {
if (params.value === '其他变动成本') {
setIsShowOther(true); // 当点击的x轴上【其他变动成本】文字时弹出的模态框
setIsShowFixed(false); // 仅为避免不可预期的错误,并无实际作用
} else if (params.value === '固定费用') {
setIsShowFixed(true); // 当点击的x轴上固【定费用文字时弹】出的模态框
setIsShowOther(false);
}
});
- 添加了点击事件后点击x轴文字,其实没有任何反应,因为并没有给实例绑定上这个点击事件,因此还需要在options中做配置
option = {
...其他配置,
xAxis: [
...其他配置
{
...其他配置
triggerEvent: true, // 只有加上这个,才能绑定上
},
]
}
成功弹出
echarts柱形图给X轴坐标类目添加点击事件的更多相关文章
- echarts对每个data[i]的图片添加点击事件
1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...
- ECharts问题--散点图中对散点添加点击事件
1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...
- angular11给Echarts添加点击事件,无脑抄代码的时候到了~~ 超好用
关于引入Echarts的方法在此 直通车在此 接下来就是添加点击事件,获取X轴的数据 <div echarts #charts [options]="chartOption" ...
- ECharts柱状图添加点击事件
参考: https://zhuanlan.zhihu.com/p/33050579 https://blog.csdn.net/sophia_xiaoma/article/details/780559 ...
- android之View坐标系(view获取自身坐标的方法和点击事件中坐标的获取)
在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄很清楚. 现在把整个总结一下. 其实只要把下面这张图看明白就没问题了. 涉及到的方法一共有下面几个: view获取自身 ...
- Echarts 关系图 添加点击事件
/*实现的效果是:在关系图上加点击事件,点击某个点,得到改点代表的内容,并且实现一个跳转效果. 关键代码已用红色标出*/ <!DOCTYPE html> <html lang=&qu ...
- vue echarts 给双饼图添加点击事件
在用 echarts 画旭双饼图( https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest )的时候,经常会伴随着点击事件 如果想要在 ...
- echarts添加点击事件
由于工作需要,需要用echarts 进行展示图表,却又个新的需求,要点击展示的地方,同时下面出现table展示内容 如图所示: 一开始找了好多博客,发现都不好用,大部分都是用到了 var ecConf ...
- echarts饼图扇区添加点击事件
在echarts最后面添加上这段代码就可以了 function eConsole(param) { //alert(option.series[0].data.length); //alert(opt ...
- 百度echarts插件x轴坐标显示不全决解方法
X轴显示不全: xAxis.axisLabel.interval number, Function [ default: 'auto' ] 坐标轴刻度标签的显示间隔,在类目轴中有效. 默认会采用标签不 ...
随机推荐
- Docker学习笔记(一) - Docker安装
1.安装yum-utils yum install yum-utils device-mapper-persistent-data lvm2 复制 安装yum-utils是为方便添加yum源使用的,d ...
- 【转载】 利用p6spy拦截并查看数据库执行操作
https://blog.csdn.net/fanxiaobin577328725/article/details/71601760 一.简介 项目首 页:http://p6spy.github.io ...
- Qt开源作品26-通用按钮地图效果
一.前言 在很多项目应用中,需要根据数据动态生成对象显示在地图上,比如地图标注,同时还需要可拖动对象到指定位置显示,能有多种状态指示,安防领域一般用来表示防区或者设备,可以直接显示防区号,有多种状态颜 ...
- WPF 记录鼠标、触摸多设备混合输入场景问题
本文记录在WPF应用中鼠标.触摸混合输入,鼠标事件抬起时不会有MouseUp事件触发的问题. 事件输入我们都知道有3类:鼠标.触摸.触笔,鼠标是windows系统出来就有的事件,后面加了触笔.触摸. ...
- 【狂神说Java】Java零基础学习笔记-Java流程控制
[狂神说Java]Java零基础学习笔记-Java流程控制 Scanner对象 之前我们学的基本语法中我们并没有实现程序和人的交互,但是Java给我们提供了这样一个工具类,我们可以获取用户的输入.ja ...
- (七).NET6.0部署RabbitMQ
1.下载erlang语言包OTP.官网地址: https://www.erlang.org/downloads 2.Rabbitmq官网下载地址: https://www.rabbitmq.com/d ...
- w3cschool-微信小程序开发文档-工具
微信小程序工具 概览 2020-07-22 15:24 更新 为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能. 扫码登录 启动工具时,开 ...
- 重拾 SSH:从基础到安全加固
安全外壳协议(Secure Shell Protocol,简称SSH)是一种加密的网络传输协议,属于应用层协议.OpenSSH 是最流行的 SSH 实现,它是大量操作系统的默认组件 OpenSSH 套 ...
- C#生成目录
在使用C#时,特别是做项目时,有时不会关注生成结果的目录结构的管理.但这样随着动态链接库的增多,文件夹中的文件数量会急剧增加.毕竟许多产品级的软件的清晰的目录是我们追求的目标. 通过以下简单的几步我们 ...
- DeepSeekV3+Roo Code,智能编码好助手
前言 硅基流动最近上线了deepseek-ai/DeepSeek-R1与deepseek-ai/DeepSeek-V3,感兴趣快来试试吧! 邀请注册得14元不过期额度:https://cloud.si ...