/*
实现的效果是：在关系图上加点击事件，点击某个点，得到改点代表的内容，并且实现一个跳转效果。

关键代码已用红色标出
*/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="ECharts">

    <meta name="author" content="kener.linfeng@gmail.com">

    <title>新闻关系</title>

    <link rel="shortcut icon" href="../asset/ico/favicon.png">

    <link href="../asset/css/font-awesome.min.css" rel="stylesheet">

    <link href="../asset/css/bootstrap.css" rel="stylesheet">

    <link href="../asset/css/carousel.css" rel="stylesheet">

    <link href="../asset/css/echartsHome.css" rel="stylesheet">

    <script src="./www/js/echarts.js"></script>

    <script src="../asset/js/codemirror.js"></script>

    <script src="../asset/js/javascript.js"></script>

    <link href="../asset/css/codemirror.css" rel="stylesheet">

    <link href="../asset/css/monokai.css" rel="stylesheet">

</head>

<body>

    <!-- Fixed navbar -->

    <div class="container-fluid">

        <div class="row-fluid example">

            <div id="sidebar-code" class="col-md-4" >

                <div class="well sidebar-nav">

                    <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>

                    <textarea id="code" name="code">

option = {

    title : {

        text: '',

        subtext: '',

        x:'right',

        y:'bottom'

    },

    tooltip : {

        trigger: 'item',

        formatter: '{a} : {b}'

    },

    toolbox: {

        show : true,

        feature : {

            restore : {show: true},

            magicType: {show: true, type: ['force', 'chord']},

            saveAsImage : {show: true}

        }

    },

    legend: {

        x: 'left',

        data:['家人','朋友']

    },

    series : [

        {

            type:'force',

            name : "人物关系",

            ribbonType: false,

			clickable :true,

            categories : [

                {

                    name: '人物'

                },

                {

                    name: '家人'

                },

                {

                    name:'朋友'

                }

            ],

            itemStyle: {

                normal: {

                    label: {

                        show: true,

                        textStyle: {

                            color: '#333'

                        }

                    },

                    nodeStyle : {

                        brushType : 'both',

                        borderColor : 'rgba(255,215,0,0.4)',

                        borderWidth : 1

                    },

                    linkStyle: {

                        type: 'curve'

                    }

                },

                emphasis: {

                    label: {

                        show: false

                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE

                    },

                    nodeStyle : {

                        //r: 30

                    },

                    linkStyle : {}

                }

            },

            useWorker: false,

            minRadius : 15,

            maxRadius : 25,

            gravity: 0.1,

            scaling: 1.1,

            roam: 'move',

            nodes:[

            	 {category:1, name: '李四',value : 2},

                {category:1, name: '张三', value : 4,onclick:function focus(param){

                }},

            ],

            links : [

               {source : '李四', target : '张三', weight : 10, name: ''},

            ]

        }

    ]

};

var ecConfig = require('echarts/config');

function focus(param) {

    if (typeof param.seriesIndex == 'undefined') {

        return;

    }

    if (param.type == 'click') {        

       window.location.href='';

    }

}

myChart.on(ecConfig.EVENT.CLICK, focus)

myChart.on(ecConfig.EVENT.FORCE_LAYOUT_END, function () {

    console.log(myChart.chart.force.getPosition());

});

                    </textarea>

              </div><!--/.well -->

            </div><!--/span-->

            <div id="graphic" class="col-md-8">

                <div id="main" class="main"></div>

                <div>

                    <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>

                    <select id="theme-select"></select>

                    <span id='wrong-message' style="color:red"></span>

                </div>

            </div><!--/span-->

        </div><!--/row-->

        </div><!--/.fluid-container-->

    <!-- Le javascript

    ================================================== -->

    <!-- Placed at the end of the document so the pages load faster -->

    <script src="../asset/js/jquery.min.js"></script>

    <script type="text/javascript" src="../asset/js/echartsHome.js"></script>

    <script src="../asset/js/bootstrap.min.js"></script>

    <script src="../asset/js/echartsExample.js"></script>

</body>

</html>

　　

Echarts 关系图 添加点击事件的更多相关文章

  1. echarts饼图扇区添加点击事件

    在echarts最后面添加上这段代码就可以了 function eConsole(param) { //alert(option.series[0].data.length); //alert(opt ...

  2. ECharts问题--散点图中对散点添加点击事件

    1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...

  3. echarts对每个data[i]的图片添加点击事件

    1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...

  4. echarts pie饼状图绑定点击事件

    var valueData = [ {value: 33,name: '诊所'}, {value: 29,name: '汽车服务相关'}, {value: 27, name: '洗衣店'}, {val ...

  5. echart字符云之添加点击事件

    // 路径配置 require.config({ paths : { echarts : 'jquery/echarts-2.2.7/build/dist' } }); // 使用EChart.js画 ...

  6. iOS开发小技巧 - label中的文字添加点击事件

    Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...

  7. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  8. ThinkPHP框架下，给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

  9. 继承UIView的子控件添加点击事件

    UITapGestureRecognizer*tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@select ...

随机推荐

  1. python 3 关于requests库的 text / content /json

    最近在爬SDFDA的数据,刚开始用urllib.request 库,一直连不到数据 : 后来通过CHROME浏览器的F12,发现该 网站用的是JSON格式{}'Content-Type': 'appl ...

  2. bugzilla部署记录

    这两天部署了个bugzilla,记录如下. 1.主要参考文章 Bugzilla安装过程.Bugzilla使用手册及解决方案 如果你使用的系统是win7或者IIS是7.0的话,你可能还需要Win7 安装 ...

  3. jqcloud 标签云效果

    官网地址: http://mistic100.github.io/jQCloud/index.htmlgithub 地址: https://github.com/lucaong/jQCloud使用 & ...

  4. POJ 2993 Emag eht htiw Em Pleh【模拟画棋盘】

    链接: http://poj.org/problem?id=2993 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=27454#probl ...

  5. thinkphp将APP_DEBUG常量设置为false后报错的问题

    ThinkPHP 将 APP_DEBUG 常量设置为 false 后出现了下面的问题: Parse error: syntax error, unexpected T_STRING in \www\R ...

  6. python 列表中字符串排序故事一则

    a = ["bca","cab","abc"] 有时候需要对列表排序 如果是对列表中整个元素 直接用sort()排序 如果想按元素的某一段排 ...

  7. ubuntu查看Mysql是否已启动

    sudo netstat -tap | grep mysql 命令行输出: tcp6       0      0 [::]:mysql              [::]:*             ...

  8. Bootstrap学习1--响应式导航栏

    备注:最新Bootstrap手册:http://www.jqhtml.com/bootstraps-syntaxhigh/index.html <nav class="navbar n ...

  9. sublime 添加 颜色插件 colorcoder

    高亮所有变量,因此可以极大的简化代码定位.尤其是对那些有阅读障碍的程序员非常有帮助.

  10. sonarQube使用maven进行检查

    1.在maven的中找到setting配置文件.在setting.xml中增加sonarqube配置.如下: <profiles> <profile> <id>so ...