• Echarts柱状图的点击事件


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

        

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

  • 相关阅读:
    【题解】Luogu P4391 [BOI2009]Radio Transmission 无线传输
    kmp匹配详解
    点分治详解
    【题解】Luogu P3871 [TJOI2010]中位数
    树链剖分详解
    【题解】Luogu P3901 数列找不同
    【题解】Luogu P1503 鬼子进村
    【题解】 P2234 [HNOI2002]营业额统计
    Splay详解
    JSOI2020备考知识点复习
  • 原文地址:https://www.cnblogs.com/amylis_chen/p/7402759.html
Copyright © 2020-2023  润新知