Echatrs柱状图的点击事件

最近在做一些图表统计的功能,用到了百度的开源图表软件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";
                            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

根据以上属性可以自由调整,根据点击事件取得想要的值。

时间: 07-28

Echatrs柱状图的点击事件的相关文章

移动端点击事件全攻略,有你知道与不知道的各种坑

看标题的时候你可能会想,点击事件有什么好说的,还写一篇攻略?哈哈,如果你这么想,只能说明你too young to simple. 接触过移动端开发的同学可能都会面临点击事件的第一个问题:click事件的300ms延迟响应.不能立即响应给体验造成了很大的困扰,因此解决这个问题就成为了必然. 这个问题的解决方案就是: zepto.js的tap事件.tap事件可以理解为在移动端的click事件,而zepto.js因为几乎完全复制jQuery的api,因此常常被用在h5的开发上用来取代jquery.

微信小程序学习总结(2)------- 之for循环,绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

【转】Android - Button(按钮)的响应点击事件的4种写法

原文网址:http://www.yrom.net/blog/2011/12/12/android-4-onclicklistener-of-button/ Button控件setOnclickListener(View.OnClickListener listener)来接收一个点击事件的监听器 自定义一个点击事件监听器类让其实现View.OnClickListener的onClick(View v)方法 1 2 3 4 5 class MyOnClickListener implements

android中多次点击事件的实现

1.在android系统中,设置里面->关于手机->安卓版本(即android version),三击后会出现android该个版本的版本号,以及一些动图,算是一个彩蛋吧! 2.导入setting源代码,ctrl+h搜索文件(关键字Android Version),搜索到了之后打开xml文件 3.是一个strings.xml文件,再次找到关键字firmware_version,再搜索.找到src下的源代码文件 4.又找到一个关键字KEY_FIRMWARE_VERSION,翻一翻找到关于多次点击

IOS - UIView添加点击事件

UIView通过手势(Gesture-UITapGestureRecognizer)添加点击事件, 类似于UIButton的效果. 示例: UIImageView *iKnowIcon = [CYResource loadImageView:@"free-question-once-more-i-know.png"]; iKnowIcon.top = questionIcon.top + scaleWidthWith320(200); iKnowIcon.centerX = self.

Android点击事件的四种写法

Android点击事件的四种写法 一.Android点击事件的四种写法 1.点击事件的第一种写法 .  写一个内部类.实现点击事件的接口 bt.setOnClickListener(new MyButtonListener()); 2.点击事件的第二种写法,匿名内部类 bt.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { callPhone(); } }); 3.点击事件的第三种

安卓给button增加点击事件

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.mmmm); //获取XML里面的button Button button=(Button)findViewById(R.id.button1); //给button增加点击事件 button.setOnClickListener(new OnClick

微信公众平台开发入门--PHP,实现自动回复文本,图文,点击事件

一页代码实现微信基本回复和点击事件功能,部署上去sae或者bae,妥妥的基本免费的服务器 不懂代码都基本每个人都可以做自己的微信公众号了 <?php define("TOKEN", "mzh"); //换成你的token $wechatObj = new wechatCallbackapiTest(); if (isset($_GET['echostr'])) { //验证微信 $wechatObj->valid(); }else{ //回复消息 $we

js 触发LinkButton点击事件,执行后台方法

页面 <asp:LinkButton ID="lbtButton" runat="server"  CssClass="lbtButton" Font-Underline="false" OnClick="lbtButton_Click"> js function clickButton(filePath, fileName){ __doPostBack('lbtButton', ''); }