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

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

<!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. 图像处理之基础---2个YUV视频 拼接技术

    /************************************************* * 主要功能:两路 YUV4:2:0拼接一路左右半宽格式YUV视频 参考资料:http://www ...

  2. C语言基础知识【变量】

    C 变量1.变量其实只不过是程序可操作的存储区的名称.C 中每个变量都有特定的类型,类型决定了变量存储的大小和布局,该范围内的值都可以存储在内存中,运算符可应用于变量上.变量的名称可以由字母.数字和下 ...

  3. 新升级！EasyNVR3.0功能概述--直播与录像

    背景介绍: 对于摄像机直播已经是我们司空见惯的需求,但是,许多用户在现有的直播的基础上更有录像的需求,并且有关于录像的删除定时等录像计划的需求,更有客户不仅需要这些功能,还需要将这些功能集成到自身的业 ...

  4. wcf利用IDispatchMessageInspector实现接口监控日志记录和并发限流

    一般对于提供出来的接口,虽然知道在哪些业务场景下才会被调用,但是不知道什么时候被调用.调用的频率.接口性能,当出现问题的时候也不容易重现请求:为了追踪这些内容就需要把每次接口的调用信息给完整的记录下来 ...

  5. Java编码规范之数据对象命名

    数据对象分多种,为方便阅读并区分各数据对象的用途,习惯将数据对象分为以下几类,供参考: 持久对象 PO(persistant object)对象关系映射(ORM)概念的产物,基本上对象的成员变量对应了 ...

  6. nginx日志自动切分

    #!/bin/bash NGINX_LOG_PATH=/data/nginx-/logs # 昨天 YESTERDAY=$(date -d "yesterday" +%Y-%m-% ...

  7. react-native 使用 antd-mobile-rn UI进行开发app

    1.创建 react-native 项目 react-native init app03 2.安装组件 npm install antd-mobile-rn --save 3.配置按需加载 npm i ...

  8. BZOJ3211花神游历各国

    BZOJ3211花神游历各国 BZOJ luogu 分块 记一个all表示该块是否全部<=1,如果all不为真就暴力修改 因为一个数被开根的次数不多,即使\(10^{12}\)只要开根6次也会变 ...

  9. 我的Android进阶之旅------>Android中的布局优化 include、merge 、ViewStub

    1.如何重用布局文件? 可以使用<include>标签引用其他的布局文件,并用android:id属性覆盖被引用布局文件中顶层节点的android:id属性值.代码如下: <!--引 ...

  10. android 多语言(在APP里面内切换语言)

    创建SharedPreferences的管理类 public class PreferenceUtil { private static SharedPreferences mSharedPrefer ...