最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大。在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所以查找资料的过程也是相当曲折的,所以还是自己就遇到的问题总结一下吧。

点击柱状图跳转页面的功能:

找到你的生成Option事件的方法,在其下面添加以下代码。

  1. var chart = ec.init(document.getElementById(id));
  2. chart.setOption(Option);
  3. //下面是需要添加的方法内容
  4. //点击柱状图跳转相应页面的功能,其中param.name参数为横坐标的值
  5. var ecConfig = require('echarts/config');
  6. function eConsole(param) {
  7. if (typeof param.seriesIndex != 'undefined') {
  8. switch (param.name) {
  9. case "新浪":
  10. window.location.href = "http://www.sina.com";
  11. window.open("http://www.sina.com", "_blank");//在新页面打开
  12. break;
  13. case "百度":
  14. window.location.href = "http://www.baidu.com";
  15. break;
  16. case "腾讯":
  17. window.location.href = "http://www.qq.com";
  18. break;
  19. default:
  20. break;
  21. }
  22. }
  23. }
  24. 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柱状图的点击事件的更多相关文章

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

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

  2. highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

  3. echarts雷达图点击事件

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...

  4. echarts雷达图点击事件 包含(2.x,3.85,4.02)测试

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...

  5. echarts点击柱状图时触发点击事件

    项目需求:1.通过echarts把数据展示为柱状图2.点击对应的柱状图 显示对应的弹窗 主要用到的时 echarts中的 "click" 事件, 使用demo: var myCha ...

  6. echarts的地图点击事件

    1.echarts的地图展示,有时候展示出的数据,虽然鼠标点击上去某个省份或者某个地方会有数据显示,但是点击一下地图没有任何动态效果,如何添加地图点击效果呢,这里自己也是坐下笔记,方便以后使用. 参考 ...

  7. echarts 图的点击事件(含:点击重复触发的问题及其解决方法)

    今天用echarts的时候发现一个问题 鼠标指向不同地市触发一个事件展示该地区趋势图  但是但是后台中不管我第几次鼠标指向都会触发两次指向事件 现在贴出解决办法: 问题完美解决.但是为什么会调用两次, ...

  8. echarts重写图例点击事件

    echarts version: 3.1.2 修改图例点击事件样例代码: 当第一次点击图例时,只显示点击的图例. 当还剩一个图例被取消选中后,自动全选中所有图例. var triggerAction ...

  9. 给ECharts添加右键点击事件,实现右键功能菜单

    由于项目的需要,使用ECharts 的力导向图来实现 整个EDW数据架构的血缘分析,由于ECharts并没有给组件定义有右键的事件,同时ECharts是开源的项目,所以研究了下源码,将ECharts2 ...

随机推荐

  1. Maven 快速入门

    安装 Maven是一个Java工具,因此你的电脑上必须安装有JAVA环境(JDK或者JRE) 首先,从官方下载 Maven ,我这里下载的是 3.5 的版本. 本文是在Mac环境中安装的,首先创建一个 ...

  2. HTML5 filesystem: 网址

    FileSystem API 使用新的网址机制,(即 filesystem:),可用于填充 src 或 href 属性.例如,如果您要显示某幅图片且拥有相应的 fileEntry,您可以调用 toUR ...

  3. ubuntu 终端无法启动:ImportError: cannot import name 'sysconfig' from 'distutils'

    gnome-terminal 出错 ImportError: cannot import name '_gi' 系统:ubuntu17 装了python2.7.13, 之后陆续装了python3.5. ...

  4. npm出错的解决方案

    npm show grpc # 返回版本号 # 安装旧版本: npm install grpc@1.2.0

  5. storm的一些相关文章

    文章可以看这些: https://www.cnblogs.com/zhaojiankai/p/7257617.html https://blog.csdn.net/wangshuminjava/art ...

  6. jquery中对 iframe的操作

    我们先看一下 JQUERY中的对像 contents() 的帮助文件 contents() 概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述: ...

  7. Js组件的一些写法

    首先看下Prototype里的写法: var Class = { create: function() { return function() { this.init.apply(this, argu ...

  8. 设置py文件的路径

    想在IDLE中打开py文件,需要设置PYTHONPATH环境变量: 设置后,就能在IDLE的Path Browser中看到sys.path了: 然后,就可以用import了

  9. vue版本冲突解决办法

    ERROR in Vue packages version mismatch: vue@2.1.4 vue-template-compiler@2.1.5 This may cause things ...

  10. IntelliJ idea配置python

    为什么选择Intellij?因为我需要系统地管理python工程,Intellij可断点调试. 1.下载IntelliJ idea 在百度中搜索“IntelliJ idea”,并点击官网地址进行下载: ...