在项目中遇到这么个需求要在柱形图上的x轴添加点击事件,当点击对应x轴文字的时候要弹出模态框展示子图表

  1. 根据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);
}
});
  1. 添加了点击事件后点击x轴文字,其实没有任何反应,因为并没有给实例绑定上这个点击事件,因此还需要在options中做配置
option = {
...其他配置,
xAxis: [
...其他配置
{
...其他配置
triggerEvent: true, // 只有加上这个,才能绑定上
},
]
}



成功弹出

echarts柱形图给X轴坐标类目添加点击事件的更多相关文章

  1. echarts对每个data[i]的图片添加点击事件

    1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...

  2. ECharts问题--散点图中对散点添加点击事件

    1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...

  3. angular11给Echarts添加点击事件,无脑抄代码的时候到了~~ 超好用

    关于引入Echarts的方法在此 直通车在此 接下来就是添加点击事件,获取X轴的数据 <div echarts #charts [options]="chartOption" ...

  4. ECharts柱状图添加点击事件

    参考: https://zhuanlan.zhihu.com/p/33050579 https://blog.csdn.net/sophia_xiaoma/article/details/780559 ...

  5. android之View坐标系(view获取自身坐标的方法和点击事件中坐标的获取)

    在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄很清楚. 现在把整个总结一下. 其实只要把下面这张图看明白就没问题了. 涉及到的方法一共有下面几个: view获取自身 ...

  6. Echarts 关系图 添加点击事件

    /*实现的效果是:在关系图上加点击事件,点击某个点,得到改点代表的内容,并且实现一个跳转效果. 关键代码已用红色标出*/ <!DOCTYPE html> <html lang=&qu ...

  7. vue echarts 给双饼图添加点击事件

    在用 echarts 画旭双饼图( https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest )的时候,经常会伴随着点击事件 如果想要在 ...

  8. echarts添加点击事件

    由于工作需要,需要用echarts 进行展示图表,却又个新的需求,要点击展示的地方,同时下面出现table展示内容 如图所示: 一开始找了好多博客,发现都不好用,大部分都是用到了 var ecConf ...

  9. echarts饼图扇区添加点击事件

    在echarts最后面添加上这段代码就可以了 function eConsole(param) { //alert(option.series[0].data.length); //alert(opt ...

  10. 百度echarts插件x轴坐标显示不全决解方法

    X轴显示不全: xAxis.axisLabel.interval number, Function [ default: 'auto' ] 坐标轴刻度标签的显示间隔,在类目轴中有效. 默认会采用标签不 ...

随机推荐

  1. okhttp3设置代理(http/https)

    最近项目网络请求需要设置代理,记录一下.http和https都可以. OkHttpClient.Builder builder = new OkHttpClient.Builder(); //代理服务 ...

  2. Linux系统手动安装Firefox浏览器

    大多数Linux发行版都以Firefox作为默认的浏览器,并可以轻松地从软件库中安装.例如:Debian/Ubuntu: sudo apt-get install firefoxFedora: sud ...

  3. 国产系统UOS上的可视化大屏电子看板系统

    一.功能特点 采用分层设计,整体总共分三级界面,一级界面是整体布局,二级界面是单个功能模块,三级界面是单个控件. 子控件包括饼图.圆环图.曲线图.柱状图.柱状分组图.横向柱状图.横向柱状分组图.合格率 ...

  4. OpenWrt安装腾讯云DDNS插件

    1.插件介绍 OpenWRT TencentDDNS插件是一款腾讯云研发的,自动映射动态公网IP至用户指定的DNSPod域名解析记录的官方插件. 标题 名称 中文名称 腾讯云DDNS插件 英文名称 l ...

  5. SHA256 64 位加密

    /// <summary> /// SHA256 64位加密 /// </summary> /// <param name="input">&l ...

  6. IM通讯协议专题学习(九):手把手教你如何在iOS上从零使用Protobuf

    本文作者:丁同舟,来自金蝶随手记技术团队. 1.引言 接上篇<金蝶随手记团队的Protobuf应用实践(原理篇)>,本文将以iOS端的Objective-C代码为例,图文并茂地向您菔救绾卧 ...

  7. 开源即时通讯IM框架 MobileIMSDK v6.3 发布

    一.更新内容简介 本次更新为次要版本更新,进行了若干优化(更新历史详见:码云 Release Nodes).可能是市面上唯一同时支持 UDP+TCP+WebSocket 三种协议的同类开源IM框架. ...

  8. (五).NET6.0使用Serilog进行配置和实现日志记录

    1.首先安装Serilog六件套神装包 也可以对个别相应的包进行删除等,例如:1是读取配置文件的,如果不需要通过配置文件进行操作,就可以不使用这个包.2是打印到控制台的,如果不需要打印到控制台,也可以 ...

  9. Slate文档编辑器-Node节点与Path路径映射

    Slate文档编辑器-Node节点与Path路径映射 在之前我们聊到了slate中的Decorator装饰器实现,装饰器可以为我们方便地在编辑器渲染调度时处理range的渲染,这在实现搜索替换.代码高 ...

  10. Confusion pg walkthrough Intermediate

    namp ┌──(root㉿kali)-[~] └─# nmap -p- -A 192.168.188.99 Starting Nmap 7.94SVN ( https://nmap.org ) at ...