Echarts绘制图谱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="resource/layui/css/layui.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-rc.1/echarts.min.js"></script>
<title>图谱</title>
<style>
.header-logo{font-family:BarbaraHand;font-size:40px;margin-top: 1px; color:#444647;text-align:center;position:absolute;left:900px}
.head{
15%;
background: #F0F7FC;
}
#money{
26%;
}
</style>
</head>
<body>
<blockquote class="layui-elem-quote" style="border-left- 0px; margin-bottom:-29px;">
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label" style="line-height:36px; margin-left: -23px;margin-top: 1px">查询条件</label>
<div class="layui-input-inline" style="margin-top: 8px;">
<select name="name" lay-search="">
<option value="南京师范大学印刷厂">南京师范大学印刷厂</option>
<option value="南京师范大学科技实业集团公司">南京师范大学科技实业集团公司</option>
<option value="江苏省房地产建筑装饰工程总公司">江苏省房地产建筑装饰工程总公司</option>
<option value="江苏金飞达电动工具有限公司">江苏金飞达电动工具有限公司</option>
<option value="江苏大方经营公司">江苏大方经营公司</option>
<option value="江苏省环本农场">江苏省环本农场</option>
<option value="江苏省消防工程公司">江苏省消防工程公司</option>
<option value="中国有色金属进出口江苏公司">中国有色金属进出口江苏公司</option>
<option value="江苏水利经济实业开发公司">江苏水利经济实业开发公司</option>
<option value="江苏远东国际船舶代理有限公司">江苏远东国际船舶代理有限公司</option>
<option value="江苏苏源新兴电建实业有限公司">江苏苏源新兴电建实业有限公司</option>
<option value="南京邮电大学电信工程公司">南京邮电大学电信工程公司</option>
<option value="江苏华隆兴进出口公司">江苏华隆兴进出口公司</option>
</select>
</div>
<label class="layui-form-label"><input type="button" class="layui-btn layui-btn-normal" value="查询" onclick="quick()"></label>
<label class="layui-form-label" ><a class="header-logo">Mr.Zhang</a></label>
</div>
</div>
</div>
</blockquote>
<div class="layui-form">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col width="200">
<col>
</colgroup>
<tbody>
<tr>
<td class="head">法定代表人</td>
<td colspan="3" id="person_intro">
<div>
<div class="name-show">
帅
</div>
<div class="name">
<a id="per-info" href="#">张大帅</a>
<div class="qy">
任职 <b class="num">全球</b> 家企业
</div>
</div>
<div class="clear"></div>
</div>
</td>
</tr>
<tr>
<td class="head">注册资本</td>
<td id="money">1千万亿</td>
<td class="head">成立日期</td>
<td id="begin_date">远古时期</td>
</tr>
<tr>
<td class="head">经营状态</td>
<td id="state">世界第一强</td>
<td class="head">统一社会信用代码</td>
<td id="social_flag">001</td>
</tr>
<tr>
<td class="head">纳税人识别号</td>
<td id="person_flag">101</td>
<td class="head">注册号</td>
<td id="sign_flag">adqwerewewt</td>
</tr>
<tr>
<td class="head">组织机构代码</td>
<td id="ori_flag">45qwe12014</td>
<td class="head">公司类型</td>
<td id="type">国企</td>
</tr>
<tr>
<td class="head">人员规模</td>
<td id="amount">100</td>
<td class="head">营业期限</td>
<td id="date">保密</td>
</tr>
<tr>
<td class="head">登记机关</td>
<td id="sign_ori">神州</td>
<td class="head">核准日期</td>
<td id="check_date">1.1</td>
</tr>
<tr>
<td class="head">英文名</td>
<td id="en_name">DaShuai</td>
<td class="head">曾用名</td>
<td id="pre_name">无</td>
</tr>
<tr>
<td class="head">所属地区</td>
<td id="province">无</td>
<td class="head">所属行业</td>
<td id="industry">all</td>
</tr>
<tr>
<td class="head">企业地址</td>
<td colspan="3" id="q_address">all</td>
</tr>
<tr>
<td class="head">经营范围</td>
<td colspan="3" id="s_area">all</td>
</tr>
</tbody>
</table>
</div>
<div id="main" style=" 900px;height:400px;">股权结构</div>
<div id="main2" style=" 1500px;height:800px;">投资族谱</div>
<div id="main3" style=" 1500px;height:800px;">企业族谱</div>
<div id="main4" style=" 900px;height:400px;">疑似关系</div>
</body>
<script src="resource/layui/layui.all.js"></script>
</html>
<script>
function quick() {
var name = $('select[name=name]').val();
if (name == "") {
alert("输入为空");
}
$.post(
'Servlet'
, {'method': 'scan', 'name': name}
, function (o) {
var data = JSON.parse(o);
console.log(data[0].address);
if (data[0].begin_time == "NaT") {
bg = "未知日期"
} else {
bg = data[0].begin_time;
}
if (data[0].during == "NaT") {
end = "未知日期"
} else {
end = data[0].during;
}
$("#name").text(data[0].name);
$("#phone").text(data[0].phone);
$("#net").text(data[0].net);
$("#email").text(data[0].email);
$("#address").text(data[0].address);
$("#money").text(data[0].money);
$("#begin_date").text(data[0].begin_date);
$("#state").text(data[0].state);
$("#social_flag").text(data[0].social_flag);
$("#person_flag").text(data[0].person_flag);
$("#sign_flag").text(data[0].sign_flag);
$("#ori_flag").text(data[0].ori_flag);
$("#type").text(data[0].type);
$("#amount").text(data[0].amount);
$("#date").text(bg + " 至 " + end);
$("#sign_ori").text(data[0].sign_ori);
$("#check_date").text(data[0].check_date);
$("#en_name").text(data[0].en_name);
$("#pre_name").text(data[0].pre_name);
$("#province").text(data[0].province);
$("#industry").text(data[0].industry);
$("#q_address").text(data[0].address);
$("#s_area").text(data[0].s_area);
$(".name-show").text(data[0].head_person[0]);
$("#per-info").text(data[0].head_person);
}
)
//获取数据
$.getJSON("resource/json/"+name+".json",function (data) {
//处理股权结构数据
var pieData=[];
var GQ=data.gqjg;
console.log(GQ);
for(i=0;i<GQ.data.length;i++){
pieData.push({
name:GQ.data[i].name,
value:GQ.data[i].money
})
}
GQJG(pieData);
//投资图谱数据
TZZP(data);
QYTP(data);
YSGX(data.ysgx);
});
}
function GQJG(GQdata) {
//股权结构
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
option = {
title: {
text: '股权结构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: {show: true},
saveAsImage: {show: true}
}
},
series: [
{
name: '面积模式',
type: 'pie',
radius: [30, 110],
center: ['75%', '50%'],
roseType: 'area',
data: GQdata
}
]
};
myChart.setOption(option);
}
function TZZP(TZdata) {
var treData1=[];
var treData2=[];
var TZ=TZdata.tzzp;
for(i=0;i<TZ.dwtz.length;i++){
treData1.push({
name: TZ.dwtz[i].company+":"+TZ.dwtz[i].percent,
});
}
for(j=0;j<TZ.gd.length;j++){
treData2.push({
name: TZ.gd[j].name+":"+TZ.gd[j].percent,
});
}
var myChart2 = echarts.init(document.getElementById('main2'));
option2 = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series:
{
type: 'tree',
data:[
{
name:TZdata.name,
children:[{
name:'对外投资',
children:treData1
},{
name:'股东',
children:treData2
}
],
left: '2%',
right: '2%',
top: '20%',
bottom: '8%',
symbol: 'emptyCircle',
orient: 'BT',
expandAndCollapse: true,
label: {
position: 'bottom',
rotate: 90,
verticalAlign: 'middle',
align: 'right'
},
leaves: {
label: {
position: 'top',
rotate: 90,
verticalAlign: 'middle',
align: 'left'
}
},
animationDurationUpdate: 750
}
]
}
}
myChart2.setOption(option2);
}
function QYTP(QYdata){
var treData3=[];
var treData4=[];
var treData5=[];
var QY=QYdata.qyzp;
for(i=0;i<QY.dwtz.length;i++){
treData3.push({
name: QY.dwtz[i].name,
});
}
for(j=0;j<QY.gd.length;j++){
treData4.push({
name: QY.gd[j].name,
});
}
for(j=0;j<QY.gg.length;j++){
treData5.push({
name: QY.gg[j].name,
});
}
var myChart3 = echarts.init(document.getElementById('main3'));
option3 = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series:
{
type: 'tree',
data:[
{
name:QYdata.name,
children:[{
name:'对外投资',
children:treData3
},{
name:'股东',
children:treData4
},{
name:'高管',
children:treData5
}
],
left: '2%',
right: '2%',
top: '20%',
bottom: '8%',
symbol: 'emptyCircle',
orient: 'BT',
expandAndCollapse: true,
label: {
position: 'bottom',
rotate: 90,
verticalAlign: 'middle',
align: 'right'
},
leaves: {
label: {
position: 'top',
rotate: 90,
verticalAlign: 'middle',
align: 'left'
}
},
animationDurationUpdate: 750
}
]
}
}
myChart3.setOption(option3);
}
function YSGX(data){
var myChart4 = echarts.init(document.getElementById('main4'));
var sourceCompany=$('select[name=name]').val();
var ysData=[
{
name: sourceCompany,
symbolSize: 60,
category: "源公司",
des:"-"
}
];
var ysLinks=[];
var categories=[
{
name:"源公司"
},
{
name: "投资公司"
},
{
name:"人员"
}
];
for(var i=0;i<data.length;i++){
if(!isHasNode(ysData,data[i].from)){
ysData.push({
name: data[i].from,
symbolSize: 40,
category: "人员",
des:"任职"+(parseInt(data[i].num)+1)+"家公司"
})
}
if(!isHasNode(ysData,data[i].to)){
ysData.push({
name: data[i].to,
symbolSize: 40,
category: "投资公司",
des:"-"
});
ysLinks.push({
source: data[i].frdb,
target: data[i].to,
des:"法人代表",
name:"关系",
label: {
normal: {
show: true,
formatter:"法人代表"
}
}
});
}
ysLinks.push({
source: data[i].from,
target: data[i].to,
des:data[i].relation,
name:"关系",
label: {
normal: {
show: true,
formatter:data[i].relation
}
}
});
}
option4 = {
title: {
top: 'bottom',
left: 'right'
},
tooltip: {
show: true,
//对应json下nodes的des（详细描述）
formatter: function(rela) {
return rela.data.name + "：" + rela.data.des;
}
},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
animation: true,
series : [
{
name: '疑似关系',
type: 'graph',
layout: 'force',
categories: categories,
roam: true,
draggable: true,
label: {
position: 'right'
},
force: {
repulsion: 800
}
}
]
};
option4.series[0].data=ysData;
option4.series[0].links=ysLinks;
option4.series[0].categories=categories;
option4.legend[0].data=categories.map(function(a) {
return a.name;
});
myChart4.setOption(option4);
}
function isHasNode(data,name) {
var flag=false;
for(i=0;i<data.length;i++){
if(data[i].name===name){
flag=true;
break;
}
}
return flag;
}
function isPerson(p) {
return p === 'p';
}
</script>
通过对数据集处理，完成简单的关系判断
平均学习2小时
代码量800行