d3实现家族树
<template>
<div class="topdivall">
<div class="all-tree">
<com-header :title="titlename"></com-header>
<section>
<div class="parent clearfix" style="overflow: auto;background-color: #fff;">
<div id="tree" class="tree"></div>
</div>
</section>
<div class="nodecolor">
<ul class="clearfix">
<li>私募管理人</li>
<li>股东</li>
<li>对外投资</li>
<li>私募备案产品</li>
</ul>
<p class="danger">可能有风险的企业为红色</p>
</div>
</div>
<!--第一个弹窗start-->
<div class="content" v-show="alertone">
<div class="con_top clearfix">
<div class="fl">{{titletype==5?'相同股东':(titletype==4?'对外投资':'股东')}}(<span>{{listarr.length}}</span>)</div>
<div class="fr" @click="alertone=false">×</div>
</div>
<div v-if="titletype==5" style="margin-top:10px;">相同股东指的是：该公司的股东的对外投资中，还有哪些是私募管理人。</div>
<div class="con_center">
<div class="con_cen_bottom">
<div class="clearfix con_cen_title">
<div class="grid-col-7 text-left">{{titletype==5?'私募管理人':(titletype==4?'投资企业':'股东名称')}}</div>
<div class="grid-col-3 text-center">风险信息</div>
<div class="grid-col-2 text-center">股比</div>
</div>
<div class="clearfix con_cen_text" v-for="item in listarr">
<div class="grid-col-7 text-left apostrophe">
<div class="orange" v-if="item.fundflag==1&&item.prodflag==0"></div>
<div class="blue" v-if="item.prodflag==1&&item.fundflag==0"></div>
<div class="double" v-if="item.prodflag==1&&item.fundflag==1">
<div class="dou_one"></div><div class="dou_two"></div>
</div>
<span :class="[item.clickflag==1?'color-blue':'']" @click="alertdetail(item.id,item.clickflag,item.prodflag,item.fundflag,item.shareholderid)">{{item.fullname}}</span>
</div>
<div class="grid-col-3 text-center">
<span>{{item.riskcount}}</span>条
</div>
<div class="grid-col-2 text-center">{{item.proportion && item.proportion=='0' ? '--' : item.proportion}}</div>
</div>
</div>
<div class="con_footer clearfix">
<div class="fl">
<div class="orange"></div>
管理人
</div>
<div class="fr">
<div class="blue"></div>
私募基金
</div>
</div>
</div>
</div>
<!--第一个弹窗end-->
<!--第二个弹窗start-->
<div class="content" v-show="alerttwo">
<div class="con_top clearfix">
<div class="fl">公司信息</div>
<div class="fr" @click="alerttwo=false">×</div>
</div>
<div class="con_center">
<div class="con_cen_top clearfix">
<div class="grid-col-10">
<router-link :to="{path:'/managersdetails',query:{corpid:corpinfo.corpid}}" v-if="corpinfo.corptype==1">
<div class="apostrophe com_title color-blue">
{{corpinfo.corpname}}
</div>
</router-link>
<router-link :to="{path:'/probaseinfo',query:{prodid:currentclickprodid}}" v-else-if="currentclickprodid">
<div class="apostrophe com_title color-blue">
{{corpinfo.corpname}}
</div>
</router-link>
<div class="apostrophe com_title color-gry" v-else>
{{corpinfo.corpname}}
</div>
<div class="com_detail">法定代表人：<span>{{corpinfo.legalpersonname}}</span></div>
<div class="com_detail">注册资本：<span v-if="corpinfo.registercapital">{{tofix(corpinfo.registercapital)}}万人民币</span><span v-else>--</span></div>
<div class="com_detail">成立日期：<span>{{corpinfo.founddate|dateformatymd}}</span></div>
<div class="com_detail" v-if="corpinfo.corptype==1">认缴规模：<span>{{tofix(corpinfo.subscribedcapital)}}</span>万</div>
<div class="com_detail" v-if="!!corpinfo.shareholdername">相同股东名称：<span>{{corpinfo.shareholdername}}</span></div>
</div>
<div class="grid-col-2 text-center com_mark">{{jugetype(corpinfo.corptype)}}</div>
</div>
<div class="con_cen_center clearfix text-center">
<div v-for="(item,index) in tabarr" class="grid-col-3" :class="[tabvalue==index?'select':'']" @click="tabvalue=index">{{item}}</div>
</div>
<div v-show="tabvalue==0">
<div class="con_cen_bottom">
<div class="clearfix con_cen_title">
<div class="grid-col-7 text-left">股东名称</div>
<div class="grid-col-3 text-center">风险信息</div>
<div class="grid-col-2 text-center">股比</div>
</div>
<div class="clearfix con_cen_text" v-for="item in listarrhold">
<div class="grid-col-7 text-left apostrophe" :class="[item.clickflag==1?'color-blue':'']" @click="alerttwoclick(item)">
<div class="orange" v-if="item.fundflag==1&&item.prodflag==0"></div>
<div class="blue" v-if="item.prodflag==1&&item.fundflag==0"></div>
<div class="double" v-if="item.prodflag==1&&item.fundflag==1">
<div class="dou_one"></div><div class="dou_two"></div>
</div>
{{item.fullname}}
</div>
<div class="grid-col-3 text-center">
<span>{{item.riskcount}}</span>条
</div>
<div class="grid-col-2 text-center">{{item.proportion && item.proportion=='0' ? '--' : item.proportion}}</div>
</div>
</div>
<div class="con_footer clearfix">
<div class="fl">
<div class="orange"></div>
管理人
</div>
<div class="fr">
<div class="blue"></div>
私募基金
</div>
</div>
</div>
<div v-show="tabvalue==1">
<div class="con_cen_bottom">
<div class="clearfix con_cen_title">
<div class="grid-col-7 text-left">投资企业</div>
<div class="grid-col-3 text-center">风险信息</div>
<div class="grid-col-2 text-center">股比</div>
</div>
<div class="clearfix con_cen_text" v-for="item in listarrinvest">
<div class="grid-col-7 text-left apostrophe" :class="[item.clickflag==1?'color-blue':'']" @click="alerttwoclick(item)">
<div class="orange" v-if="item.fundflag==1&&item.prodflag==0"></div>
<div class="blue" v-if="item.prodflag==1&&item.fundflag==0"></div>
<div class="double" v-if="item.prodflag==1&&item.fundflag==1">
<div class="dou_one"></div><div class="dou_two"></div>
</div>
{{item.fullname}}
</div>
<div class="grid-col-3 text-center">
<span>{{item.riskcount}}</span>条
</div>
<div class="grid-col-2 text-center">{{item.proportion && item.proportion=='0' ? '--' : item.proportion}}</div>
</div>
</div>
<div class="con_footer clearfix">
<div class="fl">
<div class="orange"></div>
管理人
</div>
<div class="fr">
<div class="blue"></div>
私募基金
</div>
</div>
</div>
<div v-show="tabvalue==2">
<div class="con_cen_bottom">
<div class="clearfix con_cen_title">
<div class="grid-col-6 text-left">姓名</div>
<div class="grid-col-6 text-left">职务</div>
</div>
<div class="clearfix con_cen_text" v-for="item in listarrmem">
<div class="grid-col-6 apostrophe">{{item.staffname}}</div>
<div class="grid-col-6">{{item.position}}</div>
</div>
</div>
</div>
<div v-show="tabvalue==3">
<div class="con_cen_punish">
<div class="punish_type" v-if="listarrpunish.court.list.length>0">
<div class="punish_title"> 法院判决：<span>{{listarrpunish.court.list.length}}</span>条</div>
<div class="punish_list" v-for="item in listarrpunish.court.list">
<div class="com_title">{{item.courtname}}</div>
<div class="com_detail">案件类型：<span>{{item.lawsuittype}}</span></div>
<div class="com_detail">发布时间：<span>{{item.submittime|dateformatymd}}</span></div>
</div>
</div>
<div class="punish_type" v-if="listarrpunish.enforced.list.length>0">
<div class="punish_title"> 失信人被执行人：<span>{{listarrpunish.enforced.list.length}}</span>条</div>
<div class="punish_list" v-for="item in listarrpunish.enforced.list">
<div class="com_detail">{{item.casecode}}</div>
<div class="com_detail">发布时间：<span>{{item.publishdate|dateformatymd}}</span></div>
<div class="com_detail">执行法院：<span>{{item.courtname}}</span></div>
<div class="com_detail">执行标的：<span>{{item.gistid}}</span></div>
</div>
</div>
<div class="punish_type" v-if="listarrpunish.admin.list.length>0">
<div class="punish_title"> 行政处罚：<span>{{listarrpunish.admin.list.length}}</span>条</div>
<div class="punish_list" v-for="item in listarrpunish.admin.list">
<div class="com_detail">处罚时间：<span>{{item.publishdate|dateformatymd}}</span></div>
<div class="com_detail">处罚类型：<span>{{item.remark}}</span></div>
<div class="com_detail">处罚来源：<span>{{item.sourceorgan}}</span></div>
<div class="com_detail"><a :href="item.url">处罚详情：链接网址</a></div>
</div>
</div>
<div class="punish_type" v-if="listarrpunish.notice.list.length>0">
<div class="punish_title"> 法院公告：<span>{{listarrpunish.notice.list.length}}</span>条</div>
<div class="punish_list" v-for="item in listarrpunish.notice.list">
<div class="com_detail">原告：<span>{{item.party1}}</span></div>
<div class="com_detail">当事人：<span>{{item.party2}}</span></div>
<div class="com_detail">公告类型：<span>{{item.bltntypename}}</span></div>
<div class="com_detail">公告人：<span>{{item.courtname}}</span></div>
<div class="com_detail">刊登日期：<span>{{item.publishdate|dateformatymd}}</span></div>
</div>
</div>
<div class="punish_type" v-if="listarrpunish.fmcreditabnormal!=null">
<div class="punish_title"> 异常机构：</div>
<div class="punish_list">
<div class="com_title">{{listarrpunish.fmcreditabnormal.fullname}}</div>
<div class="com_detail">异常原因：</div>
<div class="com_detail">
{{listarrpunish.fmcreditabnormal.credittip}}
</div>
</div>
</div>
<div class="punish_type" v-if="listarrpunish.abnormal.list.length>0">
<div class="punish_title"> 工商异常：<span>{{listarrpunish.abnormal.list.length}}</span>条</div>
<div class="punish_list" v-for="item in listarrpunish.abnormal.list">
<div class="com_detail">异常原因：<span>{{item.addreason}}</span></div>
<div class="com_detail">发现机构：<span>{{item.addorgan}}</span></div>
<div class="com_detail">加入时间：<span>{{item.adddate|dateformatymd}}</span></div>
<div class="com_detail" v-if="item.removedate==null">移除时间：<span>- -</span></div>
<div class="com_detail" v-if="item.removedate!=null">移除时间：<span>{{item.removedate|dateformatymd}}</span></div>
</div>
</div>
<div class="punish_type" v-if="listarrpunish.court.list.length==0&&listarrpunish.enforced.list.length==0&&listarrpunish.admin.list.length==0&&listarrpunish.notice.list.length==0&&listarrpunish.fmcreditabnormal==null&&listarrpunish.abnormal.list.length==0">
<div class="punish_title setpadbot text-center"> 暂无风险信息</div>
</div>
</div>
</div>
</div>
</div>
<!--第二个弹窗end-->
<div class="alert-shadow" v-show="alertone||alerttwo" @click="shadow()"></div>
</div>
</template>
<script>
import comheader from '../common/comheader.vue'
import $ from 'jquery'
import panzoom from '../../../static/js/jquery.panzoom.js'
import mousewheel from '../../../static/js/jquery.mousewheel.js'
let echarts = require('echarts/echarts')
require('echarts/chart/tree');
require('echarts/chart/treemap');
// require('../../../static/js/d3')
export default {
name: 'default',
components: {
comheader
},
data () {
return {
titlename: '',
alertone:false,//控制第一个弹出框的显示和隐藏
titletype:'',//4为对外投资，3为股东
listarr:[],//第一个弹窗的数据
alerttwo:false,//控制第二个弹出框的显示和隐藏
corpinfo:{},//公司详情数据
tabarr:['股东','投资','主要成员','风险信息'],//类别切换
tabvalue:0,//切换的具体哪个类别:0股东，1投资，2主要成员，3风险信息
listarrhold:[],//股东数据数组
listarrinvest:[],//投资数据数组
listarrmem:[],//成员数组数据
iszq: false, //是证券公司 不显示 相同地址 和相同法人
listarrpunish:{//处罚的数据数组
admin:{//行政处罚数据
list:[]
},
court:{//法院判决数据
list:[]
},
notice:{//法院公告数据
list:[]
},
enforced:{//被执行人数据
list:[]
},
fmcreditabnormal:{//异常机构
},
abnormal:{//工商异常
list:[]
}
},
treecolor: { // 0 : 私募管理人 1 ： 股东 2： 对外投资 3： 私募备案产品
normal: {
color: '#fe8c58', // 圆点 节点 颜色 橙色
label: {
show: true,
position: 'bottom',
formatter: "{b}",
textstyle: {
color: '#4883b4',
fontsize: 12,
}
},
linestyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
},
currentclickprodid:0
}
},
mounted: function () {
var _this = this;
if (this.$route.query.types) {
this.iszq = true;
} else {
this.iszq = false;
}
this.$nexttick(function () {
_this.ajaxhandle();
})
},
methods: {
tofix:function(val){//保留两位小数
return math.floor(val*100)/100;
},
shadow:function(){//点击阴影部分的事件
var _this = this;
if(this.alertone){
this.listarr=[];
this.alertone=false;
}else if(this.alerttwo){
_this.listarrpunish.admin.list=[];
_this.listarrpunish.court.list=[];
_this.listarrpunish.notice.list=[];
_this.listarrpunish.enforced.list=[];
_this.listarrpunish.abnormal.list=[];
_this.listarrpunish.fmcreditabnormal={};
_this.tabvalue=0;
this.alerttwo=false;
}
},
alertdetail:function(id,flag,prodflag,fundflag,shareholderid){//从第一个弹窗跳到第二个弹窗的事件
var _this = this;
if(flag==1){
_this.alertone=false;
_this.alerttwo=true;
_this.listarrpunish.admin.list=[];
_this.listarrpunish.court.list=[];
_this.listarrpunish.notice.list=[];
_this.listarrpunish.enforced.list=[];
_this.listarrpunish.abnormal.list=[];
_this.listarrpunish.fmcreditabnormal={};
_this.tabvalue=0;
_this.ajaxalerttwo(id,prodflag,fundflag,shareholderid);
}
},
jugetype:function(type){//判断机构类型
var title='';
switch (type){
case 1:
title="管理人";
break;
case 2:
title="期货";
break;
case 3:
title="券商";
break;
case 4:
title="基金子公司";
break;
case 5:
title="信托";
break;
case 6:
title="银行";
break;
case 7:
title="基金公司";
break;
case 8:
title="上市公司";
break;
case 9:
title="新三板上市公司";
break;
case 10:
title="律师事务所";
break;
case 11:
title="会计事务所";
break;
case 12:
title="保险公司";
break;
default:
title="其他";
break;
}
return title;
},
ajaxalertone: function (id,type) {//获取第一个弹出框的信息
var _this = this;
this.$http.post(this.baseurl + 'manager/querycorplistforfamilytreebytype',json.stringify(
{
corpid:id,
type:type
}
)).then(function (response) {
if (response.body.status == 'success') {
_this.listarr=response.body.data;
_this.alertone=true;
}
}, function (response) {
});
},
alerttwoclick:function(item){
var _this=this;
if(item.clickflag==1){
_this.alerttwo=false;
_this.ajaxalerttwo(item.id,item.prodflag,item.fundflag,item.shareholderid);
}
},
ajaxalerttwo:function(id,prodflag,fundflag,shareholderid){
var _this = this;
let param = {
corpid:id,
type:0,
fundflag:fundflag,
prodflag:prodflag
};
if(shareholderid){
param.shareholderid = shareholderid;
}
//查看公司详情和股东情况
this.$http.post(this.baseurl + 'manager/showcompanyinfo',json.stringify(param)).then(function (response) {
if (response.body.status == 'success') {
_this.corpinfo=response.body.data.corpinfo;
_this.listarrhold=response.body.data.list;
if(response.body.data.prodflag){
_this.currentclickprodid = response.body.data.prodid;
}
if(shareholderid) {
_this.corpinfo.shareholdername = response.body.data.shareholder.corpname;
}
_this.alerttwo=true;
}
}, function (response) {
});
//查看公司对外投资
this.$http.post(this.baseurl + 'manager/showcompanyinfo',json.stringify(
{
corpid:id,
type:1
}
)).then(function (response) {
if (response.body.status == 'success') {
_this.listarrinvest=response.body.data.list;
}
}, function (response) {
});
//查看公司主要成员
this.$http.post(this.baseurl + 'manager/showcompanyinfo',json.stringify(
{
corpid:id,
type:2
}
)).then(function (response) {
if (response.body.status == 'success') {
_this.listarrmem=response.body.data.list;
}
}, function (response) {
});
//查看公司风险详情列表
this.$http.post(this.baseurl + 'manager/showcompanyinfo',json.stringify(
{
corpid:id,
type:3
}
)).then(function (response) {
if (response.body.status == 'success') {
_this.listarrpunish.admin.list=response.body.data.negatives;
_this.listarrpunish.court.list=response.body.data.corplawsuits;
_this.listarrpunish.notice.list=response.body.data.corpcourts;
_this.listarrpunish.enforced.list=response.body.data.corpdishonests;
_this.listarrpunish.fmcreditabnormal=response.body.data.fmcreditabnormal;
_this.listarrpunish.abnormal.list=response.body.data.abnormal;
}
}, function (response) {
});
},
returntype: function (obj) {
var index;
if (obj.fundflag) {
index = 0;
} else if (obj.prodflag) {
index = 3;
} else if (obj.investmentflag) {
index = 2;
} else if (obj.shareflag) {
index = 1;
}
obj.itemstyle = this.setcolorfortree(index);
if (obj.riskcount) {
obj.itemstyle.normal.label.textstyle.color = 'red';
}
return obj;
},
setcolorfortree: function (idx) {
var itemstyle;
/*
* 0 私募管理人
* 1 股东
* 2 对外投资
* 3 私募备案产品
* 其他 原点
* */
switch (idx) {
case 0:
itemstyle = {
normal: {
color: '#fe8c58', // 圆点 节点 颜色
label: {
show: true,
position: 'bottom',
formatter: '{b}',
textstyle: {
color: '#4883b4',
fontsize: 10,
}
},
linestyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
};
break;
case 1:
itemstyle = {
normal: {
color: '#fbde15', // 圆点 节点 颜色
label: {
show: true,
position: 'bottom',
formatter: "{b}",
textstyle: {
color: '#4883b4',
fontsize: 10,
}
},
linestyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
};
break;
case 2:
itemstyle = {
normal: {
color: '#00a2e8', // 圆点 节点 颜色#e69e07
label: {
show: true,
position: 'bottom',
formatter: "{b}",
textstyle: {
color: '#4883b4',
fontsize: 10,
}
},
linestyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
};
break;
case 3:
itemstyle = {
normal: {
color: '#11a259', // 圆点 节点 颜色
label: {
show: true,
position: 'bottom',
formatter: "{b}",
textstyle: {
color: '#4883b4',
fontsize: 10,
}
},
linestyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
};
break;
default:
itemstyle = {
normal: {
color: '#333', // 圆点 节点 颜色
label: {
show: true,
position: 'inside',
formatter: '{b}',
textstyle: {
color: '#000',
fontsize: 10,
}
},
linestyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
width:'3'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
}
};
break;
}
return itemstyle;
},
ajaxhandle: function () {
var _this = this;
this.$http.post(this.baseurl + 'manager/familysearch', json.stringify({
corpid: _this.$route.query.corpid
})).then(response => {
var res = response.body;
if (res.status === 'success') {
_this.titlename = res.data.corpinfo.corpname;
var data;
data = [
{
//'name':res.data.corpinfo.corpname, children: [
'name':res.data.corpinfo.corpname, children: [
// {
// name: '对外投资' + '(' + res.data.investmentscount + ')',type: 4,id: res.data.corpinfo.corpid
// },
// {
// name: '股东' + '(' + res.data.shareholderscount + ')',type: 3,id: res.data.corpinfo.corpid
// },
]
}
];
// 设置原点的颜色
data[0].itemstyle = _this.setcolorfortree(100);
if (res.data.investmentscount>0) {
var im = {
name: '对外投资' + '(' + res.data.investmentscount + ')',type: 4,id: res.data.corpinfo.corpid
};
im.clickflag = 1;
im.itemstyle = _this.setcolorfortree(2);
res.data.investments.foreach(function (val, index) {
val = _this.returntype(val);
val.type = 4;
});
im.children = res.data.investments;
data[0].children.push(im);
}
if (res.data.shareholderscount>0) {
var sh = {
name: '股东' + '(' + res.data.shareholderscount + ')',type: 3,id: res.data.corpinfo.corpid
};
sh.clickflag = 1;
sh.itemstyle = _this.setcolorfortree(1);
sh.children = _this.returntype(res.data.shareholders);
res.data.shareholders.foreach(function (val, index) {
val = _this.returntype(val);
val.type = 3;
});
sh.children = res.data.shareholders;
data[0].children.push(sh);
}
var xtdz = {
name: '相同地址 ' + '(' + res.data.sameaddresscount + ')'
};
var xtfr = {
name: '相同法人' + '(' + res.data.samelegalpersoncount + ')'
};
var xtgd = {
name: '相同股东' + '(' + res.data.sameshareholderscount + ')',type: 5,id: res.data.corpinfo.corpid
};
if (!_this.iszq) { // 是证券公司 隐藏 相同地址 相同法人
if (res.data.samelegalpersoncount > 0) { //相同法人
xtfr.children = res.data.samelegalperson;
}
if (res.data.sameaddresscount > 0) { // 相同地址
xtdz.children = res.data.sameaddress;
}
if (res.data.sameshareholderscount > 0) {
xtgd.children = res.data.sameshareholders;
}
xtdz.itemstyle = _this.setcolorfortree(0);
if(res.data.sameaddresscount>0){
data[0].children.push(xtdz);
}
xtfr.itemstyle = _this.setcolorfortree(0);
if(res.data.samelegalpersoncount>0){
data[0].children.push(xtfr);
}
xtgd.itemstyle = _this.setcolorfortree(0);
if(res.data.sameshareholderscount>0){
xtgd.clickflag = 1;
data[0].children.push(xtgd);
}
// 相同股东，要也能点击
// if (res.data.sameshareholderscount) {
// data[0].children[4].clickflag = 1;
// }
}
// if (res.data.investmentscount > 0) { // 对外投资
// res.data.investments.foreach(function (val, index) {
// val = _this.returntype(val);
// val.type = 4;
// });
// data[0].children[0].children = res.data.investments;
// }
// if (res.data.shareholderscount > 0) { // 股东
// data[0].children[1].children = _this.returntype(res.data.shareholders);
// res.data.shareholders.foreach(function (val, index) {
// val = _this.returntype(val);
// val.type = 3;
// });
// data[0].children[1].children = res.data.shareholders;
// }
_this.drawtree(data);
}
}, response => {
})
},
drawtree: function (data) {
var _this = this;
// 基于准备好的dom，初始化echarts实例
let mychart = echarts.init(document.getelementbyid('tree'));
mychart.setoption({
title: {
text: ''
},
toolbox: {
feature: {
datazoom: {
show: true,
title: {
datazoom: '区域缩放',
datazoomreset: '区域缩放后退'
}
}
}
},
series: [
{
name: '树图',
type: 'tree',
orient: 'radial', // vertical horizontal
rootlocation: {x: 'center', y: 'center'}, // 根节点位置 {x: 100, y: 'center'}
nodepadding: 1,
layerpadding: 60,
symbol: 'circle',
hoverable: false,
roam: true,
symbolsize: 10,
itemstyle: {
normal: {
// color: '#333', // 圆点 节点 颜色 #ff8d59 橘黄色
label: {
show: true,
position: 'bottom',
//formatter: "{b}",
textstyle: {
color: '#4883b4',
fontsize: 10,
}
},
linestyle: {
color: '#ccc',
type: 'curve', // 'curve'|'broken'|'solid'|'dotted'|'dashed'
length:'5'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
// borderwidth: 0,
}
},
data: data
}
]
});
window.onresize = mychart.resize();
//var ecconfig = require('echarts/config');
//mychart.on(ecconfig.event.click, _this.clickfun);
//console.info(mychart);
mychart.on('click', _this.clickfun);
mychart.refresh();
_this.scalefun();
},
clickfun: function (e) {
var _this = this;
if(e.data.clickflag){
if(e.data.children){
_this.listarr=[];
_this.titletype=e.data.type;
_this.ajaxalertone(e.data.id,e.data.type);
}else{
_this.listarrpunish.admin.list=[];
_this.listarrpunish.court.list=[];
_this.listarrpunish.notice.list=[];
_this.listarrpunish.enforced.list=[];
_this.listarrpunish.abnormal.list=[];
_this.listarrpunish.fmcreditabnormal={};
_this.tabvalue=0;
_this.ajaxalerttwo(e.data.id,e.data.prodflag,e.data.fundflag,e.data.shareholderid);
}
}
},
scalefun: function(){
var $panzoom = $("#tree").panzoom();
$panzoom.parent().on('mousewheel.focal', function( e ) {
e.preventdefault();
var delta = e.delta || e.originalevent.wheeldelta;
var zoomout = delta ? delta < 0 : e.originalevent.deltay > 0;
$panzoom.panzoom('zoom', zoomout, {
increment: 0.1,
animate: false,
focal: e
});
});
}
/*scalefun: function () {
var slider = {
//判断设备是否支持touch事件
touch:('ontouchstart' in window) || window.documenttouch && document instanceof documenttouch,
slider:document.getelementbyid('tree'),
//事件
events:{
index:0, //显示元素的索引
slider:this.slider, //this为slider对象
//icons:document.getelementbyid('icons'),
//icon:this.icons.getelementsbytagname('span'),
handleevent:function(event){
var self = this; //this指events对象
console.info(event.type)
if(event.type == 'touchstart'){
self.start(event);
}else if(event.type == 'touchmove'){
self.move(event);
}else if(event.type == 'touchend'){
self.end(event);
}
},
//滑动开始
start:function(event){
var touch = event.targettouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
startpos = {x:touch.pagex,y:touch.pagey,time:+new date}; //取第一个touch的坐标值
isscrolling = 0; //这个参数判断是垂直滚动还是水平滚动
this.slider.addeventlistener('touchmove',this,false);
this.slider.addeventlistener('touchend',this,false);
},
//移动
move:function(event){
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if(event.targettouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targettouches[0];
endpos = {x:touch.pagex - startpos.x,y:touch.pagey - startpos.y};
isscrolling = math.abs(endpos.x) < math.abs(endpos.y) ? 1:0; //isscrolling为1时，表示纵向滑动，0为横向滑动
if(isscrolling === 0){
event.preventdefault(); //阻止触摸事件的默认行为，即阻止滚屏
this.slider.classname = 'cnt';
this.slider.style.left = -this.index*600 + endpos.x + 'px';
}
},
//滑动释放
end:function(event){
var duration = +new date - startpos.time; //滑动的持续时间
if(isscrolling === 0){ //当为水平滚动时
this.icon[this.index].classname = '';
if(number(duration) > 10){
//判断是左移还是右移，当偏移量大于10时执行
if(endpos.x > 10){
if(this.index !== 0) this.index -= 1;
}else if(endpos.x < -10){
if(this.index !== this.icon.length-1) this.index += 1;
}
}
this.icon[this.index].classname = 'curr';
this.slider.classname = 'cnt f-anim';
this.slider.style.left = -this.index*600 + 'px';
}
//解绑事件
this.slider.removeeventlistener('touchmove',this,false);
this.slider.removeeventlistener('touchend',this,false);
}
},
//初始化
init:function(){
var self = this; //this指slider对象
if(!!self.touch) self.slider.addeventlistener('touchstart',self.events,false); //addeventlistener第二个参数可以传一个对象，会调用该对象的handleevent属性
}
};
slider.init();
},*/
}
}
</script>
<style scoped src="../../css/family/managerfamily.css">
</style>