A-01-01-01项目分析echarts graph配置项内容和展示
项目编号-供代关系
配置项如下
option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
{
offset: 0,
color: '#f7f8fa',
},
{
offset: 1,
color: 'white',
},
]),
title: {
text: 'A-01-01-01项目分析',
subtext: '项目编号-供代关系',
top: 'top',
left: 'left',
},
tooltip: {},
legend: [
{
formatter: function (name) {
return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
},
tooltip: {
show: true,
},
selectedMode: 'multiple',
bottom: 20,
data: [ ],
},
],
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: true },
restore: { show: true },
saveAsImage: { show: true },
},
},
animationDuration: 3000,
animationEasingUpdate: 'quinticInOut',
series: [
{
name1: 'A-01-01-01',
type: 'graph',
layout: 'force',
// 力引导布局
force: {repulsion: 50,},
data: [
{name:'A-01-01-01',id:"010101",symbol:'',value: 30,symbolSize: 30,
category:'010101',draggable:'true',itemStyle:{normal:{color:"red",}},},
// symbol : 'triangle',
// 调节点的形状为”方块状“,
// ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’
// A-01-01-01-01
{name: 'A-01-01-01-01',id:"01010101",symbolSize: 20,category: '01010101',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 10,},
{name:'A4432',id:"01a4432",symbol:'triangle',value: 7,symbolSize: 15,
category:'a4432',draggable:'true',itemStyle:{normal:{color:"green",}},},
{name: '01',id:"01010101011",symbolSize: 3,draggable: 'true',
category: '01010101',itemStyle:{normal:{color:"red",}},value: 1,},
{name: '01-WA',id:"0101010101wa",symbolSize: 3,draggable: 'true',
category: '01010101',itemStyle:{normal:{color:"red",}},value: 1,},
{name: '01-EF',id:"0101010101ef",symbolSize: 3,draggable: 'true',
category: '01010101',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'WA',id:"01010101wa",symbolSize: 3,category: '01010101',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'EF',id:"01010101ef",symbolSize: 3,category: '01010101',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'EF-01',id:"01010101ef01",symbolSize: 3,category: '01010101',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'EF-02',id:"01010101ef02",symbolSize: 3,category: '01010101',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'A1257',symbol : 'triangle',id:"01a1257",value: 1,symbolSize: 18,
itemStyle:{normal:{color:"green",}},category: 'a1257',draggable:'true',},
{name: '01-01',id:"010101010101",symbolSize: 3,category: '01010101',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'A1661',id:"01a1661",symbol : 'triangle',value: 2,symbolSize: 18,
itemStyle:{normal:{color:"green",}},category: 'a1661',draggable: 'true',},
{name: '01',id:"01010101012",symbolSize: 3,category: '01010101',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: '02',id:"0101010102",symbolSize: 3,category: '01010101',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
//A-01-01-01-02
{name:'A-01-01-01-02',id:"01010102",symbolSize: 20,value: 10,
category: '01010102',draggable: 'true',itemStyle:{normal:{color:"red",}},},
{name: 'A4432',symbol : 'triangle',id:"02a4432",value: 7,symbolSize: 15,
category: 'a4432',draggable: 'true',itemStyle:{normal:{color:"green",}},},
{name: '01',id:"01010102011",symbolSize: 3,category: '01010102',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: '01-WA',id:"0101010201wa",symbolSize: 3,category: '01010102',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: '01-EF',id:"0101010201ef",symbolSize: 3,category: '01010102',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'WA',id:"01010102wa",symbolSize: 3,category: '01010102',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'EF',id:"01010102ef",symbolSize: 3,category: '01010102',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'EF-01',id:"01010102ef01",symbolSize: 3,category: '01010102',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'EF-02',id:"01010102ef02",symbolSize: 3,category: '01010102',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'A1257',symbol : 'triangle',id:"02a1257",value: 1,draggable: 'true',
symbolSize: 18,itemStyle:{normal:{color:"green",}},category: 'a1257',},
{name: '01-01',id:"010101020101",symbolSize: 3,category: '01010102',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'A1661',id:"02a1661",symbol : 'triangle',value: 2,symbolSize: 18,
itemStyle:{normal:{color:"green",}},category: 'a1257',draggable: 'true',},
{name: '01',id:"01010102012",symbolSize: 3,category: '01010102',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: '02',id:"0101010202",symbolSize: 3,category: '01010102',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: '03',id:"0101010203",symbolSize: 3,category: '01010102',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
// A-01-01-01-03
{name:'A-01-01-01-03',id:"01010103",symbolSize: 20,value: 10,
category: '01010103',draggable: 'true',itemStyle:{normal:{color:"red",}},},
{name: 'A4432',symbol : 'triangle',id:"03a4432",value: 7,symbolSize: 15,
category: 'a4432',draggable: 'true',itemStyle:{normal:{color:"green",}},},
{name: '01',id:"01010103011",symbolSize: 3,category: '01010103',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: '01-WA',id:"0101010301wa",symbolSize: 3,category: '01010103',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: '01-EF',id:"0101010301ef",symbolSize: 3,category: '01010103',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'WA',id:"01010103wa",symbolSize: 3,category: '01010103',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'EF',id:"01010103ef",symbolSize: 3,category: '01010103',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'EF-01',id:"01010103ef01",symbolSize: 3,category: '01010103',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'EF-02',id:"01010103ef02",symbolSize: 3,category: '01010103',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'A1257',symbol : 'triangle',id:"03a1257",value: 1,draggable: 'true',
symbolSize: 18,itemStyle:{normal:{color:"green",}},category: 'a1257',},
{name: '01-01',id:"010101030101",symbolSize: 3,category: '01010103',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: 'A1661',id:"03a1661",symbol : 'triangle',value: 2,symbolSize: 18,
itemStyle:{normal:{color:"green",}},category: 'a1661',draggable: 'true',},
{name: '01',id:"01010103012",symbolSize: 3,category: '01010103',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
{name: '02',id:"0101010302",symbolSize: 3,category: '01010103',
draggable: 'true',itemStyle:{normal:{color:"red",}},value: 1,},
],
links: [
{source: '010101',target: '01010101',},
{source: '010101',target: '01010102',},
{source: '010101',target: '01010103',},
// A01010101
{source: '01010101',target: '01010101011',},
{source: '01010101',target: '0101010101wa',},
{source: '01010101',target: '0101010101ef',},
{source: '01010101',target: '01010101wa',},
{source: '01010101',target: '010101010101',},
{source: '01010101',target: '01010101ef',},
{source: '01010101',target: '01010101ef01',},
{source: '01010101',target: '01010101ef02',},
{source: '01010101',target: '01010101012',},
{source: '01010101',target: '0101010102',},
{source: '01010101',target: '01a4432',},
{source: '01010101011',target: '01a4432',},
{source: '0101010101wa',target: '01a4432',},
{source: '0101010101ef',target: '01a4432',},
{source: '010101010101',target: '01a1257',},
{source: '01010101wa',target: '01a4432',},
{source: '01010101ef01',target: '01a4432',},
{source: '01010101ef02',target: '01a4432',},
{source: '01010101012',target: '01a1661',},
{source: '0101010102',target: '01a1661',},
//A01010102
{source: '01010102',target: '01010102011',},
{source: '01010102',target: '0101010201wa',},
{source: '01010102',target: '0101010201ef',},
{source: '01010102',target: '01010102wa',},
{source: '01010102',target: '010101020101',},
{source: '01010102',target: '01010102ef',},
{source: '01010102',target: '01010102ef01',},
{source: '01010102',target: '01010102ef02',},
{source: '01010102',target: '01010102012',},
{source: '01010102',target: '0101010202',},
{source: '01010102',target: '0101010203',},
{source: '01010102',target: '02a4432',},
{source: '01010102011',target: '02a4432',},
{source: '0101010201wa',target: '02a4432',},
{source: '0101010201ef',target: '02a4432',},
{source: '010101020101',target: '02a1257',},
{source: '01010102wa',target: '02a4432',},
{source: '01010102ef01',target: '02a4432',},
{source: '01010102ef02',target: '02a4432',},
{source: '01010102012',target: '02a1661',},
{source: '0101010202',target: '02a1661',},
{source: '0101010203',target: '02a1661',},
//A01010103
{source: '01010103',target: '01010103011',},
{source: '01010103',target: '0101010301wa',},
{source: '01010103',target: '0101010301ef',},
{source: '01010103',target: '01010103wa',},
{source: '01010103',target: '010101030101',},
{source: '01010103',target: '01010103ef',},
{source: '01010103',target: '01010103ef01',},
{source: '01010103',target: '01010103ef02',},
{source: '01010103',target: '01010103012',},
{source: '01010103',target: '0101010302',},
{source: '01010103',target: '03a4432',},
{source: '01010103011',target: '03a4432',},
{source: '0101010301wa',target: '03a4432',},
{source: '0101010301ef',target: '03a4432',},
{source: '010101030101',target: '03a1257',},
{source: '01010103wa',target: '03a4432',},
{source: '01010103ef01',target: '03a4432',},
{source: '01010103ef02',target: '03a4432',},
{source: '01010103012',target: '03a1661',},
{source: '0101010302',target: '03a1661',},
],
categories: [
{name: '01010101',color:"blue",},
{name: '01010102',color:"yellow",},
{name: '01010103',color:"yellow",},
{name: '010101',color:"yellow",},
{name: 'a1661',color:"yellow",},
{name: 'a1257',color:"yellow",},
{name: 'a4432',color:"yellow",},
],
focusNodeAdjacency: true,
roam: true,
label: {
normal: {
show: true,
position: 'top',
},
},
lineStyle: {
normal: {
color: 'black',
// 连接线的颜色
curveness: 0,
type: 'solid',
},
},
},
],
};
截图如下
