knowledgeMap/src/js/index.js

const $ = require("jquery");
const echarts = require("echarts");
require("./../css/knowledgeMap.less");
require("./../css/common.css");
require("ztree");
require('./../resources/zTree/js/jquery.ztree.core.min.js');
require('./../resources/zTree/css/zTreeStyle/zTreeStyle.css');
// document.write("aaaa");

        var myChart = echarts.init(document.getElementById('main'));
        option = {
            title: { text: '关系图谱' },
            tooltip: {
                formatter: function (x) {
                    return x.data.des;
                }
            },
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 80,
                    roam: true,
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 10],
                    edgeLabel: {
                        normal: {
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    force: {
                        repulsion: 2500,
                        edgeLength: [10, 50]
                    },
                    draggable: true,
                    animation: true,
                    hoverAnimation:true,
                    animationDuration:5000,
                    focusNodeAdjacency: true,
                    itemStyle: {
                        normal: {
                            color: '#4b565b'
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#4b565b'

                        }
                    },
                    edgeLabel: {
                        normal: {
                            show: true,
                            formatter: function (x) {
                                return x.data.name;
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                            }
                        }
                    },
                    data: [
                        {
                            name: '侯亮平',
                            des: '最高检反贪局侦查处处长，汉东省人民检察院副检察长兼反贪局局长。<br/>经过与腐败违法分子的斗争，最终将一批腐败分子送上了审判台，<br/>正义战胜邪恶，自己也迎来了成长。',
                            symbolSize: 100,
                            symbol:'rect',
                            itemStyle: {
                                normal: {
                                    color: 'red',
                                }
                            }
                        }, {
                            name: '李达康',
                            des: '汉东省省委常委，京州市市委书记。是一个正义无私的好官。<br/>但为人过于爱惜自己的羽毛，对待身边的亲人和朋友显得有些无情。',
                            itemStyle: {
                                normal: {
                                    color: 'red',
                                }
                            }
                        }, {
                            name: '祁同伟',
                            des: '汉东省公安厅厅长',
                            symbolSize: 100
                        }, {
                            name: '陈岩石',
                            des: '离休干部、汉东省检察院前常务副检察长。充满正义，平凡而普通的共 产 党人。<br/>对大老虎赵立春，以各种形式执着举报了十二年。<br/>在这场关系党和国家生死存亡的斗争中，老人家以耄耋高龄，<br/>义无反顾地背起了炸 药包，在反腐胜利前夕因病去世。',
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            }
                        }, {
                            name: '陆亦可',
                            des: '汉东省检察院反贪局一处处长',
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            }
                        }, {
                            name: '高育良',
                            des: '汉东省省委副书记兼政法委书记。年近六十，是一个擅长太极功夫的官场老手。侯亮平、陈海和祁同伟是其学生。',
                            symbolSize: 100
                        }, {
                            name: '沙瑞金',
                            des: '汉东省省委书记',
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            }
                        }, {
                            name: '高小琴',
                            des: '山水集团董事长，是一位叱咤于政界和商界的风云人物，处事圆滑、精明干练。'
                        }, {
                            name: '高小凤'
                        }, {
                            name: '赵东来',
                            des: '汉东省京州市公安局局长，充满正义，整治恶势力，<br/>在与检察部门的合作中从最初的质疑到之后的通力配合。',
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            }
                        }, {
                            name: '程度',
                            des: '汉东省京州市公安局光明区分局局长，因犯错误，被李达康书记和赵东来局长点名要清除公安队伍。<br/>但在高小琴的帮助下，祁同伟调他当上了省公安厅办公室副主任。<br/>尽管程度逃避了所有罪责，上面也有人保他，<br/>但最终还是在反贪局局长侯亮平的缜密侦查下被绳之于法。',
                        }, {
                            name: '吴惠芬',
                            des: '汉东省省委副书记高育良的妻子，汉东大学明史教授。',
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            }
                        }, {
                            name: '赵瑞龙',
                            des: '副国级人物赵立春的公子哥，官二代，打着老子的旗子，<br/>黑白两道通吃，可谓呼风唤雨，权倾一时。',
                        }, {
                            name: '赵立春',
                            des: '副国级领导人，曾经的改革闯将，在权利面前，显得极其渺小。',
                        }, {
                            name: '陈海',
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            }
                        }, {
                            name: '梁璐',
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            }
                        }, {
                            name: '刘新建'
                        }, {
                            name: '欧阳菁'
                        }, {
                            name: '吴心怡',
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            }
                        }, {
                            name: '蔡成功'
                        }, {
                            name: '丁义珍'
                        }
                    ],
                    links: [
                        {
                            source: '高育良',
                            target: '侯亮平',
                            name: '师生',
                            des: '侯亮平是高育良的得意门生'
                        }, {
                            source: '高育良',
                            target: '祁同伟',
                            name: '师生'
                        }, {
                            source: '赵立春',
                            target: '高育良',
                            name: "前领导"
                        }, {
                            source: '赵立春',
                            target: '赵瑞龙',
                            name: "父子"
                        }, {
                            source: '赵立春',
                            target: '刘新建',
                            name: "前部队下属"
                        }, {
                            source: '李达康',
                            target: '赵立春',
                            name: "前任秘书"
                        }, {
                            source: '祁同伟',
                            target: '高小琴',
                            name: "情人"
                        }, {
                            source: '陈岩石',
                            target: '陈海',
                            name: "父子"
                        }, {
                            source: '陆亦可',
                            target: '陈海',
                            name: "属下"
                        }, {
                            source: '沙瑞金',
                            target: '陈岩石',
                            name: "故人"
                        }, {
                            source: '祁同伟',
                            target: '陈海',
                            name: "师哥"
                        }, {
                            source: '祁同伟',
                            target: '侯亮平',
                            name: "师哥"
                        }, {
                            source: '侯亮平',
                            target: '陈海',
                            name: "同学，生死朋友"
                        }, {
                            source: '高育良',
                            target: '吴惠芬',
                            name: "夫妻"
                        }, {
                            source: '陈海',
                            target: '赵东来',
                            name: "朋友"
                        }, {
                            source: '高小琴',
                            target: '高小凤',
                            name: "双胞胎",
                            symbolSize: '1'
                        }, {
                            source: '赵东来',
                            target: '陆亦可',
                            name: "爱慕"
                        }, {
                            source: '祁同伟',
                            target: '程度',
                            name: "领导"
                        }, {
                            source: '高育良',
                            target: '高小凤',
                            name: "情人"
                        }, {
                            source: '赵瑞龙',
                            target: '祁同伟',
                            name: "勾结",
                            symbolSize: '1',
                        }, {
                            source: '李达康',
                            target: '赵东来',
                            name: "领导"
                        }, {
                            source: '赵瑞龙',
                            target: '程度',
                            name: "领导"
                        }, {
                            source: '沙瑞金',
                            target: '李达康',
                            name: "领导"
                        }, {
                            source: '沙瑞金',
                            target: '高育良',
                            name: "领导"
                        }, {
                            source: '祁同伟',
                            target: '梁璐',
                            name: "夫妻"
                        }, {
                            source: '吴惠芬',
                            target: '梁璐',
                            name: "朋友"
                        }, {
                            source: '李达康',
                            target: '欧阳菁',
                            name: "夫妻"
                        }, {
                            source: '赵瑞龙',
                            target: '刘新建',
                            name: "洗钱工具"
                        }, {
                            source: '赵瑞龙',
                            target: '高小琴',
                            name: "勾结，腐化",
                            symbolSize: '1'
                        }, {
                            source: '赵瑞龙',
                            target: '高小凤',
                            name: "腐化"
                        }, {
                            source: '吴心怡',
                            target: '陆亦可',
                            name: "母女"
                        }, {
                            source: '吴心怡',
                            target: '吴惠芬',
                            name: "姐妹"
                        }, {
                            source: '蔡成功',
                            target: '侯亮平',
                            name: "发小"
                        }, {
                            source: '蔡成功',
                            target: '欧阳菁',
                            name: "举报",
                            lineStyle: {
                                normal: {
                                    type: 'dotted',
                                    color: '#000'
                                }
                            }
                        }, {
                            source: '欧阳菁',
                            target: '刘新建',
                            name: "举报",
                            lineStyle: {
                                normal: {
                                    type: 'dotted',
                                    color: '#000'
                                }
                            }
                        }, {
                            source: '刘新建',
                            target: '赵瑞龙',
                            name: "举报",
                            lineStyle: {
                                normal: {
                                    type: 'dotted',
                                    color: '#000'
                                }
                            }
                        }, {
                            source: '李达康',
                            target: '丁义珍',
                            name: "领导"
                        }, {
                            source: '高小琴',
                            target: '丁义珍',
                            name: "策划出逃"
                        }, {
                            source: '祁同伟',
                            target: '丁义珍',
                            name: "勾结"
                        }, {
                            source: '赵瑞龙',
                            target: '丁义珍',
                            name: "勾结"
                        }]
                }
            ]
        };
        myChart.setOption(option);


        function zTreeOnClick(event, treeId, treeNode) {
		    alert(treeNode.id + ", " + treeNode.name);
		};
		//树的配置
		var setting = {	
				//数据格式的设置
				data:{
					simpleData:{
						enable:true  //使用简单的json数据
					}
				},
				//树的显示设置
				view:{
					showLine:true, //设置是否显示连线 默认为true
					showTitle: false,//设置是否显示鼠标悬浮时显示title的效果
					dblClickExpand: false,//设置是否支持双击展开树节点
					fontCss : {color:"blue"},//设置节点样式  
					expandSpeed: "slow",//设置展开的速度  fast normal  slow 
					nameIsHTML: true,//名字是否是HTML
					
				},
				//设置事件回调
				callback:{
					onClick:zTreeOnClick
				}
		};
		
		/**
		属性说明  id  当前节点的唯一ID
			   pId [必须大写]  代表当前节点的父节点id
			   name:节点名称
			   open:是否展开当前节点，默认为false
			   isParent:true  标记当前节点是否为父节点 默认为如果当前节点下有子节点 则为true   否则为false
			   icon:设置节点的图标地址
			   iconOpen:设置节点展开时的图标地址  此节点必须是父节点 isParent:true
			   iconClose:设置节点收起的的图标地地址  此节点必须是父节点 isParent:true
			   url:点击节点打开的链接地址  如果想使用onClick:zTreeOnClick事件，就不要加url属性 或者改名字 href
			   target:设置打开链接的方式  [在新窗口打开(_blank)，要本窗口打开(_self)]
			   
		**/
		//树的json数据
		var zNodes =[
			{ id:1, pId:0, name:"<font color='red'>父节点1 - 展开</font>", open:true},
			{ id:11, pId:1, name:"父节点11 - 折叠",icon:"resources/zTree/css/zTreeStyle/img/diy/2.png"},
			{ id:111, pId:11, name:"叶子节点111",target:'_blank',url:'http://www.baidu.com'},
			{ id:112, pId:11, name:"叶子节点112"},
			{ id:113, pId:11, name:"叶子节点113"},
			{ id:114, pId:11, name:"叶子节点114"},
			{ id:12, pId:1, name:"父节点12 - 折叠",iconOpen:"resources/zTree/css/zTreeStyle/img/diy/1_open.png",iconClose:"resources/zTree/css/zTreeStyle/img/diy/1_close.png"},
			{ id:121, pId:12, name:"叶子节点121"},
			{ id:122, pId:12, name:"叶子节点122"},
			{ id:123, pId:12, name:"叶子节点123"},
			{ id:124, pId:12, name:"叶子节点124"},
			{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
			{ id:2, pId:0, name:"父节点2 - 折叠"},
			{ id:21, pId:2, name:"父节点21 - 展开", open:true},
			{ id:211, pId:21, name:"叶子节点211"},
			{ id:212, pId:21, name:"叶子节点212"},
			{ id:213, pId:21, name:"叶子节点213"},
			{ id:214, pId:21, name:"叶子节点214"},
			{ id:22, pId:2, name:"父节点22 - 折叠"},
			{ id:221, pId:22, name:"叶子节点221"},
			{ id:222, pId:22, name:"叶子节点222"},
			{ id:223, pId:22, name:"叶子节点223"},
			{ id:224, pId:22, name:"叶子节点224"},
			{ id:23, pId:2, name:"父节点23 - 折叠"},
			{ id:231, pId:23, name:"叶子节点231"},
			{ id:232, pId:23, name:"叶子节点232"},
			{ id:233, pId:23, name:"叶子节点233"},
			{ id:234, pId:23, name:"叶子节点234"},
			{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
		];
		$(document).ready(function(){
			//初始化zTree
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});