Echarts 关系图添加点击事件

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

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

<!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 关系图添加点击事件的更多相关文章

echarts饼图扇区添加点击事件
在echarts最后面添加上这段代码就可以了 function eConsole(param) { //alert(option.series[0].data.length); //alert(opt ...
ECharts问题--散点图中对散点添加点击事件
1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...
echarts对每个data[i]的图片添加点击事件
1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...
echarts pie饼状图绑定点击事件
var valueData = [ {value: 33,name: '诊所'}, {value: 29,name: '汽车服务相关'}, {value: 27, name: '洗衣店'}, {val ...
echart字符云之添加点击事件
// 路径配置 require.config({ paths : { echarts : 'jquery/echarts-2.2.7/build/dist' } }); // 使用EChart.js画 ...
iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...
【Swift 2.1】为 UIView 添加点击事件和点击效果
前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明欢迎转载,但请保留文章原始出处:) 博客园: ...
ThinkPHP框架下，给jq动态添加的标签添加点击事件移除标签
jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...
继承UIView的子控件添加点击事件
UITapGestureRecognizer*tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@select ...

随机推荐

python操作Excel读写--使用xlrd （转）
(转自:http://www.cnblogs.com/lhj588/archive/2012/01/06/2314181.html) 一.安装xlrd模块到python官网下载http://pypi ...
html5小趣味知识点系列（一）autofocus
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
IOS启动页动画（uiview 淡入淡出效果 )2
Appdelegate里面右个这个函数,只要它没结束,你的等待界面就不会消失.以在启动的时候做些动画 - (BOOL)application:(UIApplication *)application ...
gulp安装教程
1.安装nodejs并选装cnpm: npm install cnpm -g --registry=https://registry.npm.taobao.org 2.全局安装gulp: cnpm i ...
jvm本身的多线程机制
1 多线程环境下的构造函数调用构造函数本身并没有隐式的同步,因为各个线程构建的是自己的对象,它们之间是不存在竞争关系的. 2 class loader在load class时被了sychronize ...
CentOS7.x 报错 There are no enabled repos.
地址 :http://mirrors.163.com/centos/7/os/x86_64/Packages/ wget http://mirrors.163.com/centos/7/os/x8 ...
Android 主线程和子线程通信问题
Android 如今不支持View在子线程中创建及调用其方法.假设要实现子线程内容更新之后.将结果及时反馈到主线程中,该怎样出来呢? 能够在主线程中创建Handler来实现. 这样子线 ...
(转)复习TCP/IP协议与Http协议的区别
TPC/IP协议是传输层协议,主要解决数据如何在网络中传输,而HTTP是应用层协议,主要解决如何包装数据.关于TCP/IP和HTTP协议的关系,网络有一段比较容易理解的介绍:“我们在传输数据时,可以只 ...
swap 内存不足
参考:https://stackoverflow.com/questions/5682854/why-is-the-linker-terminating-on-me-when-i-build-clan ...
full_case parallel_case学习心得
一般情况下,DC把case语句综合成选择器电路,但也可能把case语句综合成优先权译码电路.有时,优先权译码电路是不必要的,这是可以使用“// synopsys parallel_case”引导语句强 ...

Echarts 关系图 添加点击事件

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

随机推荐

热门专题

Echarts 关系图添加点击事件

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