我怎么敢倒下,我身后空无一人

实现echarts 饼图 点击链接跳转

 jQuery/js   高蒙   阅读(11259)   评论(0)   2016-04-27 17:12:40    echarts 饼图 echarts点击链接跳转 


工作中遇到用echarts图表展示数据,第一个任务就是要在写好的echarts饼图上面加上点击链接跳转。尼玛,我还没看echarts图表怎么设置,

直接上来就让我在上面加点击跳转链接。我想这下有得玩了。于是,我先查看了官方手册,没有发现到。于是,百度了一下找到了一个官方给的事例。

我们默认echarts饼图图表,已经正确的生成了。

官方给的案例;

网址:http://echarts.baidu.com/echarts2/doc/example/event.html
var ecConfig = require('echarts/config');
function eConsole(param) {
    var mes = '【' + param.type + '】';
    if (typeof param.seriesIndex != 'undefined') {
        mes += '  seriesIndex : ' + param.seriesIndex;
        mes += '  dataIndex : ' + param.dataIndex;
    }
    if (param.type == 'hover') {
        document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
    }
    else {
        document.getElementById('console').innerHTML = mes;
    }
    console.log(param);
}

// -------全局通用
 REFRESH: 'refresh',
 RESTORE: 'restore',
 RESIZE: 'resize',
 CLICK: 'click',
 DBLCLICK: 'dblclick',
 HOVER: 'hover',
 MOUSEOUT: 'mouseout',
// -------业务交互逻辑
 DATA_CHANGED: 'dataChanged',
 DATA_ZOOM: 'dataZoom',
 DATA_RANGE: 'dataRange',
 DATA_RANGE_HOVERLINK: 'dataRangeHoverLink',
 LEGEND_SELECTED: 'legendSelected',
 LEGEND_HOVERLINK: 'legendHoverLink',
 MAP_SELECTED: 'mapSelected',
 PIE_SELECTED: 'pieSelected',
 MAGIC_TYPE_CHANGED: 'magicTypeChanged',
 DATA_VIEW_CHANGED: 'dataViewChanged',
 TIMELINE_CHANGED: 'timelineChanged',
 MAP_ROAM: 'mapRoam',

myChart.on(ecConfig.EVENT.CLICK, eConsole);
myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
//myChart.on(ecConfig.EVENT.HOVER, eConsole);
myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);

根据上面官方的事例,我们亲自的动手试试。首先我们通过console.log调试工具,查看我们的点击事件是不是真的有效果,有没有我们需要的数据显示。

设置:
var ecConfig = require('echarts/config');
    function eConsole(param) {
        console.log(param);
    }
调用:
myChart.on(ecConfig.EVENT.CLICK, eConsole);

myChart:是我们建立的图表。

我们得到的是一个对象。

图1.png

Object {seriesIndex: 0, seriesName: "资源类型分布", dataIndex: 0, data: Object, name: "医学院"…}
 data: Object
 dataIndex: 0
 event: MouseEvent
 name: "医学院"
 seriesIndex: 0
 seriesName: "资源类型分布"
 special: "25.19"
 type: "click"
 value: 30555
 __proto__: Object

通过分析console.log返回的数据,可以明显的得出我们需要的值就是name。

使用 :
    console.log(param.name);
得到:

图2.png

那么得到这个结果之后,我们就可以在函数里面实现点击跳转的功能了。

我们可以将代码修改如下:

// start
    var ecConfig = require('echarts/config');
    function eConsole(param) {
        //console.log(param.name);
        var name = param.name;
        var url  = "?h=jgk_school&school_id=<{$school_id}>&gid=";
        var num;
            if(name == "医学院")    { num = "5423";}
            if(name == "瑞金医院")  { num = "5607";}
            ......
            window.open(url+num,"newwindow");
        //window.location.href=url+num;
        }
    myChart.on(ecConfig.EVENT.CLICK, eConsole);
// end

在网页加上上面的代码,相应的参数自己根据实际需求修改。通过上面的方法就可以很轻松的解决echarts饼状图点击跳转的问题。

方法不一定完美,但是能够解决问题。如果你有更好的方法,不妨留言告诉我,谢谢。




相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客