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' ] 坐标轴刻度标签的显示间隔,在类目轴中有效. 默认会采用标签不 ...
随机推荐
- redis中是没有Long类型的
redis中没有Long类型,存储进去后取出来会是Interger类型.需要自行转化,不可直接强转.否则将CCE. 本人在处理springboot的redisTemplate封装时发生了这个异常.解决 ...
- Qt开发经验小技巧121-130
QLineEdit除了单纯的文本框以外,还可以做很多特殊的处理用途. 限制输入只能输入IP地址. 限制输入范围,强烈推荐使用 QRegExpValidator 正则表达式来处理. //正在表达式限制输 ...
- [转]点云库PCL从入门到精通 随书源码(百度网盘下载)
分享给需要的人. 这里有你想要的东西-暗号-pdx6 相关链接: PCL点云数据处理基础️️️目录
- Python 代码实现生命之轮Wheel of life
最近看一个生命之轮的视频,让我们珍惜时间,因为一生是有限的.使用Python创建生命倒计时图表,珍惜时间,活在当下. 生命之轮(Wheel of life),这一概念最初由 Success Motiv ...
- [云研发]腾讯云cloudstudio使用教程-记录1
cloudstudio 在vscode中新建终端,使用nvidia-smi查看显卡与gpu情况,可知当前使用的显卡是T4的,显存有15G
- (一).NET 6.0 Swagger添加文档注释
1.先给api加上标题注释和返回值注释 2.右键项目属性找到生成中的输出 勾选完成以后重新生成项目 3.在Program项目启动类中编写代码 4.最终效果如下
- Solution Set - “让朝阳洒向晚霞,在星空下涂鸦”
目录 0.「UR #12」「UOJ #182」a^-1 + b problem 1.「NOI Simu.」点 2.「集训队互测 2023」「QOJ #5100」卡牌游戏 3.「NOI Simu.」简单 ...
- Restful、SOAP、RPC、SOA、微服务之间的区别-copy
什么是Restful Restful是一种架构设计风格,提供了设计原则和约束条件,而不是架构,而满足这些约束条件和原则的应用程序或设计就是 Restful架构或服务. 主要的设计原则: 资源与URI ...
- 2020年最新版区块链面试题2-copy
1. 问:你认为区块链技术中的区块意味着什么? 区块链由所有金融交易的信息组成.一个块只不过是一个记录列表.当这些列表相互结合时,它们被称为区块链.例如,一个组织有100个分类账簿,其中的组合被称为区 ...
- Linux性能优化-网络性能优化思路
目录 确定优化目标 网络性能工具 网络性能优化 应用程序 套接字 传输层 网络层 链路层 确定优化目标优化前,首先要确定观察到的网络性能指标,要达到多少才合适?虽然网络性能优化的整体目标,是降低网络延 ...