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 ...
随机推荐
- Maven 快速入门
安装 Maven是一个Java工具,因此你的电脑上必须安装有JAVA环境(JDK或者JRE) 首先,从官方下载 Maven ,我这里下载的是 3.5 的版本. 本文是在Mac环境中安装的,首先创建一个 ...
- HTML5 filesystem: 网址
FileSystem API 使用新的网址机制,(即 filesystem:),可用于填充 src 或 href 属性.例如,如果您要显示某幅图片且拥有相应的 fileEntry,您可以调用 toUR ...
- ubuntu 终端无法启动:ImportError: cannot import name 'sysconfig' from 'distutils'
gnome-terminal 出错 ImportError: cannot import name '_gi' 系统:ubuntu17 装了python2.7.13, 之后陆续装了python3.5. ...
- npm出错的解决方案
npm show grpc # 返回版本号 # 安装旧版本: npm install grpc@1.2.0
- storm的一些相关文章
文章可以看这些: https://www.cnblogs.com/zhaojiankai/p/7257617.html https://blog.csdn.net/wangshuminjava/art ...
- jquery中对 iframe的操作
我们先看一下 JQUERY中的对像 contents() 的帮助文件 contents() 概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述: ...
- Js组件的一些写法
首先看下Prototype里的写法: var Class = { create: function() { return function() { this.init.apply(this, argu ...
- 设置py文件的路径
想在IDLE中打开py文件,需要设置PYTHONPATH环境变量: 设置后,就能在IDLE的Path Browser中看到sys.path了: 然后,就可以用import了
- vue版本冲突解决办法
ERROR in Vue packages version mismatch: vue@2.1.4 vue-template-compiler@2.1.5 This may cause things ...
- IntelliJ idea配置python
为什么选择Intellij?因为我需要系统地管理python工程,Intellij可断点调试. 1.下载IntelliJ idea 在百度中搜索“IntelliJ idea”,并点击官网地址进行下载: ...