Echarts柱状图的点击事件

摘要:
最近,我使用了百度的开源图表软件Echatrs来完成一些图表统计功能。不得不提的是,它不仅易于使用,而且扩展功能非常强大。我们在使用过程中也遇到了很多问题。也许是因为有关棘皮动物的信息不是很完整,所以搜索信息的过程也相当曲折。让我们总结一下我们遇到的问题。单击条形图的功能跳转到页面:找到生成Option事件的方法,并在下面添加以下代码。[html]viewplaincopyvarchart=ec.init;chart.setOption;//以下是要添加的方法内容//单击直方图跳转到相应页面,其中param.name参数是横坐标varecConfig=require的值;函数Console{if(typeofram.seriesIndex!

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

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

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

[html] view plain copy
 
  1. var chart = ec.init(document.getElementById(id));              
  2. chart.setOption(Option);  
  3.    
  4.    
  5.   
  6. //下面是需要添加的方法内容  
  7. //点击柱状图跳转相应页面的功能,其中param.name参数为横坐标的值   
  8. var ecConfig = require('echarts/config');  
  9. function eConsole(param) {  
  10.     if (typeof param.seriesIndex != 'undefined') {  
  11.         switch (param.name) {  
  12.             case "新浪":      
  13.                 window.location.href = "http://www.sina.com";  
  14.                 window.open("http://www.sina.com", "_blank");//在新页面打开  
  15.                      break;  
  16.             case "百度":    
  17.                 window.location.href = "http://www.baidu.com";  
  18.                 break;  
  19.             case "腾讯":    
  20.                 window.location.href = "http://www.qq.com";  
  21.                 break;  
  22.             default:  
  23.                 break;  
  24.         }  
  25.     }  
  26. }  
  27. 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柱状图的点击事件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇WiFi密码破解详细图文教程android系统的源代码获取(亲测可用)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Chrome(谷歌浏览器)和Firefox浏览器flash的swf文件发黑不透明问题解决方法

一直以来看到各大网站的FLASH都是黑框框的,很好奇,难道他们不知道flash是可以设成透明的?于是用IE Tab插件浏览了下,发现人家的网页又正常,这样一来我就开始怀疑是我的Chrome有问题,于是在换了多台电脑,多种操作系统之后找到了治标治本的方法:在遇到这里网站时,尽量用IE,如果你的网站也在这类网站之中,那么你可能需要修改自己的网站代码这是一则fl...

[OpenCV开发]OpenCV图像编码和解码 imencode和imdecode使用,用于网络传输图片

在很多应用中,经常会直接把图片的二进制数据进行交换,比如说利用 socket 通信传送图片二进制数据,或者直接用内存数据库(例如 Redis)来传递图片二进制数据。 这个时候,当你的应用程序读到内存里的二进制图片数据时,怎么样直接转为 OpenCV 可以使用的图片格式呢,答案是用 cv::imdecode 这个函数: std::vector<ch...

ROS学习之参数

ROS学习之参数         除 了 前 面 介 绍 过 的 消 息 传 递 , ROS 还 提 供 另 一 种 参 数( parameters )机制用于获取节点的信息。其主要思想是使用集中参数服务器( parameter server )维护一个变量集的值,包括整数、浮点数、字符串以及其他数据类型,每一个变量用一个较短的字符串标识  。由于允许节点...

springBoot--Redis配置与使用

SpringBoot自动配置redis,主要是两个自动配置类 缓存管理器配置类:org.springframework.boot.autoconfigure.cache.RedisCacheConfiguration redis封装了工具RedisTemplate自动配置:org.springframework.boot.autoconfigure.da...

微信app支付,完整流程,完整代码 (转)

微信app支付流程 需要的配置参数 private function wechat($body,$indent_id,$cou,$user_id,$total_fee,$ip,$domain,$nonce_str){ //微信配置信息和初始逻辑 $appid= WxPayConfig::APPID; //appid (微信开放平台的应用appid) $bo...

angular 路由跳转以及传参的几种方式

通过域名跳转的方式获取参数(http://localhost:4200/second/110?productId=1&title=moon) 这种方式配置路由,其中:id是必需的参数,其它的是可配的,写在?后面: { path: 'second/:id', component: SecondComponent }, 通过ts代码跳转: this...