123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446 |
- 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);
- });
|