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
根据以上属性可以自由调整,根据点击事件取得想要的值。
Echarts柱状图的点击事件的更多相关文章
- ECharts柱状图添加点击事件
参考: https://zhuanlan.zhihu.com/p/33050579 https://blog.csdn.net/sophia_xiaoma/article/details/780559 ...
- highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小 大] | ...
- echarts雷达图点击事件
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...
- echarts雷达图点击事件 包含(2.x,3.85,4.02)测试
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...
- echarts点击柱状图时触发点击事件
项目需求:1.通过echarts把数据展示为柱状图2.点击对应的柱状图 显示对应的弹窗 主要用到的时 echarts中的 "click" 事件, 使用demo: var myCha ...
- echarts的地图点击事件
1.echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用. 参考 ...
- echarts 图的点击事件(含:点击重复触发的问题及其解决方法)
今天用echarts的时候发现一个问题 鼠标指向不同地市触发一个事件展示该地区趋势图 但是但是后台中不管我第几次鼠标指向都会触发两次指向事件 现在贴出解决办法: 问题完美解决.但是为什么会调用两次, ...
- echarts重写图例点击事件
echarts version: 3.1.2 修改图例点击事件样例代码: 当第一次点击图例时,只显示点击的图例. 当还剩一个图例被取消选中后,自动全选中所有图例. var triggerAction ...
- 给ECharts添加右键点击事件,实现右键功能菜单
由于项目的需要,使用ECharts 的力导向图来实现 整个EDW数据架构的血缘分析,由于ECharts并没有给组件定义有右键的事件,同时ECharts是开源的项目,所以研究了下源码,将ECharts2 ...
随机推荐
- JMap与JStack
用JMap和JStack做堆dump和线程dump 命令 1. jmap -dump:format=b,file=filename pidjmap -dump:format=b,file=jmap02 ...
- vim粘贴代码的时候,恶心的缩进.
vim粘贴代码 如果有注释,那么粘贴后就惨不忍睹,类似于: 我粘贴代码到a.cpp,内容为: //打印函数 ) { ;i<length;i++){ ){ printf("0x &quo ...
- 从客户端(ctl00$ContentPlaceHolder1$result="<?xml version="1.0" ...")中检测到有潜在危险的 Request.Form 值。
ylbtech-Error-WebForm:从客户端(ctl00$ContentPlaceHolder1$result="<?xml version="1.0" . ...
- Poly2Tri介绍[转]
https://blog.csdn.net/xys206006/article/details/83002326 这是Poly2Tri介绍的翻译博文.原文链接:http://sites-final.u ...
- [leetcode]Substring with Concatenation of All Words @ Python
原题地址:https://oj.leetcode.com/problems/substring-with-concatenation-of-all-words/ 题意: You are given a ...
- iOS开发-仿大众点评iPad侧边导航栏
昨天其实已经写了一篇侧边栏的文章,不过感觉还不是很清晰,这篇文章算是补充吧,iPad上看了大众点评的侧边栏,基本上百分之九十类似,具体效果可参考下图: 对比昨天主要做了两个修改,一个是图片和文字的显示 ...
- 判断小米 魅族 华为 系统 MIUI EMUI FLYME
获取系统信息 public class SimpleDeviceUtils { public enum SystemType { /** * 小米手机(MIUI系统) */ SYS_MIUI, /** ...
- 用深度学习(CNN RNN Attention)解决大规模文本分类问题 - 综述和实践
https://zhuanlan.zhihu.com/p/25928551 近来在同时做一个应用深度学习解决淘宝商品的类目预测问题的项目,恰好硕士毕业时论文题目便是文本分类问题,趁此机会总结下文本分类 ...
- Centos6.4下安装mysql5.6.10
今天下午捣腾安装mysql和apache.从网上下载mysql5.6.10,http://ishare.iask.sina.com.cn/f/36050990.html,解压后发现没有configur ...
- Java扫描二维码进行会议签到思路
1:签到页面都是同一个JSP页面 2:根据不同的会议ID进行拼接URL跳转页面进行签到 JSP页面代码如下 <%@ page language="java" pageEnco ...