Echarts柱状图的点击事件
最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大。在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所以查找资料的过程也是相当曲折的,所以还是自己就遇到的问题总结一下吧。
点击柱状图跳转页面的功能:
找到你的生成Option事件的方法,在其下面添加以下代码。
- var chart = ec.init(document.getElementById(id));
- chart.setOption(Option);
- //下面是需要添加的方法内容
- //点击柱状图跳转相应页面的功能,其中param.name参数为横坐标的值
- var ecConfig = require('echarts/config');
- function eConsole(param) {
- if (typeof param.seriesIndex != 'undefined') {
- switch (param.name) {
- case "新浪":
- window.location.href = "http://www.sina.com";
- window.open("http://www.sina.com", "_blank");//在新页面打开
- break;
- case "百度":
- window.location.href = "http://www.baidu.com";
- break;
- case "腾讯":
- window.location.href = "http://www.qq.com";
- break;
- default:
- break;
- }
- }
- }
- chart.on(ecConfig.EVENT.CLICK, eConsole);
以上,可以获取点击事件的参数,实现跳转的功能。
此外param参数包含的内容有:
param.seriesIndex:系列序号(series中当前图形是第几个图形第几个,从0开始计数)
param.dataIndex:数值序列(X轴上当前点是第几个点,从0开始计数)
param.seriesName:legend名称
param.name:X轴值
param.data:Y轴值
param.value:Y轴值
param.type:点击事件均为click
根据以上属性可以自由调整,根据点击事件取得想要的值。
转载于:https://www.cnblogs.com/amylis_chen/p/7402759.html
Echarts柱状图的点击事件相关推荐
- Echarts柱状图实现点击事件
本次实现的是点击黄绿色的柱显示对应的人员弹窗,通过打印params值确定了每个柱子的区分字段如下: var _this = this;myChart.on("click", fun ...
- Echarts柱状图柱子点击事件
文章目录 效果展示 需求 实现 效果展示 需求 点击柱子显示当天的详细数据 实现 这里只需要拿到被点击柱子对应的X轴时间坐标,可以直接监听click事件 在DOM加载完为chart注册点击事件 拿到被 ...
- vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图)
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档 起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
- echarts 地图 scatter点击事件_React实现高亮可点击地图
目前越来越多的项目中开始使用地图,而对地图的需求也不仅仅是简单的纯展示,更多了各种各样的交互功能.今天这篇文章主要介绍的就react中通过Echarts实现一个高亮可点击的省市地图.接下来先看看效果图 ...
- echats 柱状图的点击事件及高亮
点击柱状图触发事件及双击柱状图高亮 <!DOCTYPE html> <html> <head><meta charset="utf-8"& ...
- Echarts树形结构图加点击事件
一.引入js 二.前端 <div id="statisticChart" style="height:800px"></div> // ...
- vue中echarts纵轴添加点击事件
直接上代码 initChart () {this.ganttChart = echarts.init(document.getElementById('gantt-chart'))const _sel ...
- echarts 地图去除点击事件_ECharts地图区域处理事件
ECharts 中有两种方式的地图区域处理: 一种是在 geo 中: 另一种是在 series-map 中 geo 的情况下 : events.geoselectchanged | Event ...
- 【Echarts图例点击事件】自定义Echarts图例legend点击事件(已解决)
目录 先睹为快(效果) 1.实现Echarts多条曲线 2.点击echarts触发接口请求 2.1 先默认隐藏部分数据 2.2 自定义legend图例点击事件 3.源码下载地址(解压即用) **[写在 ...
最新文章
- http 错误 404.0 - not found_python3从零学习-5.10.8、http.client—HTTP 协议客户端
- python list 删除元素_Python的list循环遍历中,删除数据的正确方法
- bootstrap-fileinput 应用
- (转) ASP.NET 2.0:使用用户控件和定制的Web部件个人化你的门户网站(二)
- SAP标准工单入库时产生成本差异-求解进行时
- [转载] 七龙珠第一部——第110话 加油 孙悟空
- 向silverlight传递自定义参数
- 通过负载均衡器+域名实现容灾切换-(9)GSLB典型产品-F5简介
- 牛客网 牛客小白月赛1 C.分元宵-快速幂
- ios 中的tintColor
- java中图例的显示图标显示 jFrameChar
- 微服务学习之Hystrix图形化DashBoard监控【Hoxton.SR1版】
- PAT 甲级 1003 Emergency 25分
- 使用Motrix快速下载百度网盘文件
- tomcat修改端口号 / 同时运行多个tomcat
- 邮箱的正确格式是什么,如何发送一封规范的邮件
- 冒泡排序(Bubble Sort)含gif动图
- 六级通关笔记--词汇1
- PSGAN——姿态稳健型可感知空间式生成对抗网络论文详细解读与整理
- 1GB有多少个扇区?
热门文章
- Android 中文api (88)——SharedPreferences
- iOS 线程操作库 PromiseKit
- clojure的感觉
- Mysql 索引优化分析_如何优化MySQL的性能?从索引方面优化案例分析
- vivado----fpga硬件调试 (六)----数据导出
- php循环获取xml节点,PHP_PHP遍历XML文档所有节点的方法,本文实例讲述了PHP遍历XML文档 - phpStudy...
- 超级的全中文语音数据集合
- 数据集神经网络共同进步
- ES6-Promise对象
- Python学习—函数