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

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

<!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 selenium - SSL处理(https)

    在实际的自动化测试实践中,因为越来越多的站点接入https,使得我们原有的python selenium2自动化测试代码进行测试时,浏览器总是报安全问题,即便在浏览器选项中将被测网址加入信任网址也没用 ...

  2. python 函数的进阶

    1. 动态参数 位置参数的动态参数: *args 动态接收参数的时候要注意: 动态参数必须在位置参数后面 顺序: 位置参数, 动态参数*, 默认值参数 例子: def chi(a, b, *food, ...

  3. Cow Contest(传递闭包)

    Cow Contest Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10450   Accepted: 5841 Desc ...

  4. 6.2.1-FactoryBeanRegistrySupport(未全)

    FactoryBeanRegistrySupport 的关系图: 添加工厂方式创建类FactoryBean的支持

  5. php在web端播放amr语音（如微信语音）

    在使用微信JSSDK的上传下载语音接口时,发现一个问题: 下载的语音在iPhone上不能播放,测试了之后原因竟然是: 微信接口返回的音频内容是amr格式的,但iPhone不支持播放此类型格式. 那么转 ...

  6. lua面向对象封装

    lua面向对象的一个封装,直接贴代码 --swfclass = {};local cs = {};function _class( child, base, ... )--    _.s( child ...

  7. bug-5——（js）indexOf（）

    indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置. ①对大小写敏感 ②如果要检索的字符串值没有出现,则该方法返回-1. ③位置时从0开始的 $j(this).html().ind ...

  8. pom.xml配置文件详解（转发）

    setting.xml主要用于配置maven的运行环境等一系列通用的属性,是全局级别的配置文件:而pom.xml主要描述了项目的maven坐标,依赖关系,开发者需要遵循的规则,缺陷管理系统,组织和li ...

  9. activiti基础--2----------------------（流程定义）

    Deployment 部署对象 1.一次部署的多个文件信息,对于不需要的流程可以删除和修改 2.对应的表 act_re_deployment #部署对象表 act_re_procdef #流程定义表 ...

  10. 关于ionic开发中遇到的坑与总结

    这次是第二次使用ionic开发混合app,今天算是对这个框架做一个总结,基础的我就不再重复了,网上都有教程.我就说说自己的心得和遇见的各种坑, 之后会陆续补充,想到什么说什么吧. 1.关于ionic效 ...