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

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

<!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. Unity合并选中物体的Mesh

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEditor; pu ...

  2. nginx(Window下安装 & 配置文件参数说明 & 实例)

    一.为什么需要对Tomcat服务器做负载均衡:  Tomcat服务器作为一个Web服务器,其并发数在300-500之间,如果有超过500的并发数便会出现Tomcat不能响应新的请求的情况,严重影响网站 ...

  3. 划分Linux分区

    / Swap 这二个分区是必须有的. /usr linux系统都在 /usr 中 /home  用户信息都在 /home 下 /var 保持所有服务器的登录文件,且Web默认的路径在 /var中 可以 ...

  4. Storm编程模型及Worker通信机制

    1.编程模型 2.Worker通信机制

  5. OC常用函数及变量

    1.OC常用的的函数及变量 (1)算术函数 [算术函数] 函数名 说明 int rand() 随机数生成.(例)srand(time(nil)); //随机数初期化int val = rand()P; ...

  6. MySQL查询含转义字符反斜杠的时候一直为零查询无效

    今天在查询一个字段时显示一直显示为0,可是表里明明有对应的数值. ) as vote_your_count from vote_beauty where beauty_person = '\u5c0f ...

  7. 如何将gedit变成c++编译器

    本蒟蒻的第一篇文章,分享一下神佬教我的好东西 ——将Ubuntu 16.04上gedit变为编译器! 1° 新建文档.然后点击编辑,打开首选项. 2° 勾选外部工具,然后退出.打开工具,选择Manag ...

  8. 7 Javascript:表单与验证-非空验证

    表单提交前要检查数据的合法性 在要对表单里的数据进行验证的时候,能够利用getElementById()来訪问网页上不论什么一个元素 每一个表单域都有一个form对象,可被传给不论什么验证表单数据的函 ...

  9. 【Android】开源项目汇总

    Android开源项目第一篇——个性化控件(View)篇  包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.Progres ...

  10. 特性，批次特性建立的BAPI函數

    [转http://taijizhang.blog.163.com/blog/static/176071381201442225514453/] SAP特性,物料特性,批次特性建立的BAPI函數 类的T ...