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' ] 坐标轴刻度标签的显示间隔,在类目轴中有效. 默认会采用标签不 ...
随机推荐
- Shell_Shell 脚本中字符串的相关操作
在我们的shell 编程中,一个必不可少的操作就是针对于字符串的操作, 重要有字符串替换,计算字符串长度 等等... 原文地址: https://blog.csdn.net/github_337369 ...
- Qt开源作品19-通用数据库翻页查询
一.前言 在Qt与数据库结合编程的过程中,记录一多,基本上都需要用到翻页查看记录,翻页有个好处就是可以减轻显示数据的表格的压力,不需要一次性将数据库表的记录全部显示,也基本上没有谁在一页上需要一次性显 ...
- 跟着源码一起学:手把手教你用WebSocket打造Web端IM聊天
本文作者芋艿,原题"芋道 Spring Boot WebSocket 入门",本次有修订和改动. 一.引言 WebSocket如今在Web端即时通讯技术应用里使用广泛,不仅用于传统 ...
- 微信小游戏直播在Android端的跨进程渲染推流实践
本文由微信开发团队工程师"virwu"分享. 1.引言 近期,微信小游戏支持了视频号一键开播,将微信升级到最新版本,打开腾讯系小游戏(如跳一跳.欢乐斗地主等),在右上角菜单就可以看 ...
- 回顾 2024 年 19 期C#/.NET/.NET Core技术前沿周刊
前言 转眼之间2024年就只剩最后一天了,咱们的C#/.NET/.NET Core技术前沿周刊也从8月份的第 1 期持续更新到现在已经更新到了第 19 期了,今天咱们一起来回顾一下 2024 年 19 ...
- 2024年终总结:5000 Star,10w 下载量,这是我交出的开源答卷
你好,我是 Kagol,个人公众号:前端开源星球. 2024年,我做前端开发工作满10年啦! 这10年我一直在开发前线,做过电商项目.广告平台.项目管理系统等业务,目前主要专注于前端组件库建设和开源社 ...
- Solution -「NOI 2017」「洛谷 P3824」泳池
\(\mathscr{Description}\) Link. 给定 \(n,k,p\), 求在一个 \(\infty\times n\) 的矩阵中, 每个位置的值以 \(p\) 的概率为 \ ...
- CDS标准视图:维护通知活动信息 I_MaintNotificationActyData
视图名称:维护通知活动信息 I_MaintNotificationActyData 视图类型:基础 视图代码: 点击查看代码 @AbapCatalog.sqlViewName: 'INOTIFACTY ...
- Golang-反射10
http://c.biancheng.net/golang/reflect/ Go语言反射(reflection)简述 反射(reflection)是在 Java 出现后迅速流行起来的一种概念,通过反 ...
- biancheng-MySQL教程
目录http://c.biancheng.net/mysql/ 1数据库入门2MySQL的安装和配置3MySQL数据库的基本操作4数据库设计5MySQL数据类型和存储引擎6MySQL数据表的基本操作7 ...