【可视化开发】echarts点击事件

2023-11-08

echarts提供了点击事件方法,首先需要确定点击的范围
横向柱状图为例,若不设置属性,添加点击事件后默认为柱型

设置可点击属性,需添加以下配置

yAxis:[{
	//...其余属性
	silent: false,//坐标轴是否是静态无法交互
	triggerEvent: true,//坐标轴的标签是否响应和触发鼠标事件,默认不响应
	axisLabel: {
		clickable:true,//可点击
	}
}]

在init函数中添加点击事件

其中this.students为当前绘图对象

this.students.on('click', function (params) {
	console.log(params);
	console.log('点击的是第'+params.dataIndex);
});

点击事件中参数params

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【可视化开发】echarts点击事件 的相关文章

随机推荐

  • 线性dp(背包)、树形dp、区间dp,板子+典型问题+例题

    线性dp 01背包问题 核心板子 for int v 0 v lt x v f v 0 w i 为重量 c i 为价值 x为重量上限 for int i 1 i lt n i for int v x v gt w i v f v max f
  • java.net.UnknownHostException: www.xxx.com: Name or service not known的某种情况

    我一般只记录不是网上给出的大众答案 很明显很多人搜到的结论是 修改服务器hosts文件 vi etc hosts 添加记录行 127 0 0 1 www xxx com 这只是把这个无法识别的域名映射到本地了 有点掩耳盗铃 我是真的需要访问
  • c++学习之模板

    函数模板 1 c 有一种编程思想称为泛型编程 主要利用的技术就是模板 2 c 提供两种模板机制 函数模板和类模板 函数模板的语法 函数模板的作用 建立一个通用函数 其函数返回值类型和形参类型可以不具体的指定 用一个虚拟的类型来代表 语法 t
  • switch语句

    switch语句格式 格式 switch 表达式 case值1 语句体1 break case值2 语句体2 break default 语句体n 1 break 执行流程 首先计算表达式的值 依次和case后面的值进行比较 如果有对应的值
  • RabbitMQ 队列消息的条数限制、队列字节长度限制、队列溢出行为方式

    目录 队列长度限制 默认最大队列长度限制行为 队列溢出行为 使用配置定义最大队列长度 在声明队列期间使用 x arguments 定义最大队列长度 重点阅读即可 队列长度限制 概述 队列的最大长度可以限制为一组消息数或一组字节数 忽略消息属
  • (C语言)使用函数输出指定范围内的Fibonacci数 (20分)

    本题要求实现一个计算Fibonacci数的简单函数 并利用其实现另一个函数 输出两正整数m和n 0
  • 程序员幸福感拉满:一键为代码自动生成注释的工具,拿走不谢!

    提升程序员幸福感的CodeGeeX代码解释功能上线了 一个 古老的传说 程序员最讨厌的2件事 一是编写程序时要写注释 二是看别人编写的程序里没写注释 可见 手动为代码添加注释 需要投入大量的时间和精力 但是 学会注释又是编码过程中不可或缺的
  • vue富文本编辑器vue-quill-editor安装及使用

    一 vue项目中 npm安装依赖 npm install vue quill editor save 二 两种引用方法 全局引用和局部引用 1 全局引用 项目入口文件中 main js 注册 Author pcf pcf Date 2022
  • 去除 QListWidget的selected item的长方形边框focus rectangle--委托

    QListWidget change color of selected item focus rectangle 视图中元素的绘制是通过代理实现的 在显示QListWidget的时候 如果我们在iconMode或者listMode显示QL
  • 前端Css@media设备媒体查询大全

    移动端设备 media max width 575px 移动端设备 横屏 低分辨率 media min width 576px and max width 767px iPad 平板设备 and 移动端设备 横屏 高分辨率 media mi
  • utf8转gb2312精简版

    var strGB 啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翱袄傲奥懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸白柏百摆佰败拜稗斑班搬扳般颁板版扮拌伴瓣半办绊邦帮梆榜膀绑棒磅蚌镑傍谤苞胞包褒剥薄雹保堡饱宝抱报暴豹鲍爆杯碑悲卑
  • linux强制安装rpm包的命令

    rpm ivh rpm nodeps force 强制安装会忽略掉所有依赖关系 强制进行安装 转载于 https www cnblogs com Noul p 10523090 html
  • 机器学习实战——第四章(分类):朴素贝叶斯

    前言 首先感谢博主 Jack Cui 主页 http blog csdn net c406495762 朴素贝叶斯博文地址 https blog csdn net c406495762 article details 77341116 ht
  • 在Ubuntu上用命令行安装Chrome浏览器

    1 下载谷歌浏览器 通过使用Ctrl Alt T键盘快捷键或单击终端图标来打开终端 使用wget下载最新的Chrome deb软件包 wget https dl google com linux direct google chrome s
  • 小程序自动化测试框架Minium——框架介绍和环境搭建

    一 Minium 简介 minium 是微信团队为小程序专门开发的自动化框架 我们可以用它来做小程序的UI自动化测试 但是它的能力却不仅仅在于UI自动化 正是得益于官方订制打造 所以对于小程序很多原生内容和特性的支持自然也是非常独到的 比如
  • 重点必考题:区块链百万年薪人才招聘,必会这58个知识点

    2018年区块链行业热度不减 投资人青睐 创业者追捧 而区块链人才成了稀缺性物种 拉勾网发布的 2018年区块链高薪清单 中 腾讯 阿里等大厂将区块链岗位的月薪最高开到了100K 有相关数据统计 2月份北京区块链岗位增加了3万多个 技术类2
  • ovirt简介

    Ovirt 调研 简介 架构 功能模块和列表 虚拟化所用的技术 kvm 是否支持分布式存储以及所用的技术 支持 gluster 虚拟网络能够实现哪些功能 VLAN 在虚拟机上最小化部署一套 简介 oVirt是一种开源分布式虚拟化解决方案 旨
  • wang_ys121账号停用及博客迁移至wonyoungsen的说明!

    从今天起 本账号wang ys121停止使用 不再更新博文 并将此账号博文逐步迁移到新的账号wonyoungsen中去 请喜欢我的同学继续关注我 谢谢
  • 远程链接redis遇到的坑

    1 安装redis参考 https cloud tencent com developer article 1653709 安装完后一直无法启动redis Dec 28 13 12 05 hecs 22391 systemd 1 Start
  • 【可视化开发】echarts点击事件

    echarts提供了点击事件方法 首先需要确定点击的范围 以横向柱状图为例 若不设置属性 添加点击事件后默认为柱型 设置可点击属性 需添加以下配置 yAxis 其余属性 silent false 坐标轴是否是静态无法交互 triggerEv