···html
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom, "dark", {
renderer: "canvas",
useDirtyRect: false,
});
var app = {};
var option;
let isMarkLink = false;
option = {
// backgroundColor: '',
animation: true,
darkMode: true,
color: ["#4992ff", "#7cffb2", "#fddd60", "#ff6e76", "#58d9f9", "#05c091", "#ff8a45", "#8d48e3", "#dd79ff"],
textStyle: {
color: "#B9B8CE",
fontFamily: "Microsoft YaHei",
fontSize: 12,
fontStyle: "normal",
fontWeight: "normal",
},
timeAxis: {
axisLine: {
lineStyle: {
color: "#B9B8CE",
},
},
splitLine: {
lineStyle: {
color: "#484753",
},
},
splitArea: {
areaStyle: {
color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"],
},
},
minorSplitLine: {
lineStyle: {
color: "#20203B",
},
},
},
logAxis: {
axisLine: {
lineStyle: {
color: "#B9B8CE",
},
},
splitLine: {
lineStyle: {
color: "#484753",
},
},
splitArea: {
areaStyle: {
color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"],
},
},
minorSplitLine: {
lineStyle: {
color: "#20203B",
},
},
},
valueAxis: {
axisLine: {
lineStyle: {
color: "#B9B8CE",
},
},
splitLine: {
lineStyle: {
color: "#484753",
},
},
splitArea: {
areaStyle: {
color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"],
},
},
minorSplitLine: {
lineStyle: {
color: "#20203B",
},
},
},
categoryAxis: {
axisLine: {
lineStyle: {
color: "#B9B8CE",
},
},
splitLine: {
lineStyle: {
color: "#484753",
},
show: false,
},
splitArea: {
areaStyle: {
color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"],
},
},
minorSplitLine: {
lineStyle: {
color: "#20203B",
},
},
},
line: {
symbol: "circle",
},
graph: {
color: ["#4992ff", "#7cffb2", "#fddd60", "#ff6e76", "#58d9f9", "#05c091", "#ff8a45", "#8d48e3", "#dd79ff"],
},
gauge: {
title: {
color: "#B9B8CE",
},
axisLine: {
lineStyle: {
color: [[1, "rgba(207,212,219,0.2)"]],
},
},
axisLabel: {
color: "#B9B8CE",
},
detail: {
color: "#EEF1FA",
},
},
candlestick: {
itemStyle: {
color: "#f64e56",
color0: "#54ea92",
borderColor: "#f64e56",
borderColor0: "#54ea92",
},
},
colorBy: "series",
gradientColor: ["#f6efa6", "#d88273", "#bf444c"],
aria: {
decal: {
decals: [
{
color: "rgba(0, 0, 0, 0.2)",
dashArrayX: [1, 0],
dashArrayY: [2, 5],
symbolSize: 1,
rotation: 0.5235987755982988,
},
{
color: "rgba(0, 0, 0, 0.2)",
symbol: "circle",
dashArrayX: [
[8, 8],
[0, 8, 8, 0],
],
dashArrayY: [6, 0],
symbolSize: 0.8,
},
{
color: "rgba(0, 0, 0, 0.2)",
dashArrayX: [1, 0],
dashArrayY: [4, 3],
rotation: -0.7853981633974483,
},
{
color: "rgba(0, 0, 0, 0.2)",
dashArrayX: [
[6, 6],
[0, 6, 6, 0],
],
dashArrayY: [6, 0],
},
{
color: "rgba(0, 0, 0, 0.2)",
dashArrayX: [
[1, 0],
[1, 6],
],
dashArrayY: [1, 0, 6, 0],
rotation: 0.7853981633974483,
},
{
color: "rgba(0, 0, 0, 0.2)",
symbol: "triangle",
dashArrayX: [
[9, 9],
[0, 9, 9, 0],
],
dashArrayY: [7, 2],
symbolSize: 0.75,
},
],
},
label: {},
},
stateAnimation: {
duration: 300,
easing: "cubicOut",
},
animationDuration: 1000,
animationDurationUpdate: 500,
animationEasing: "cubicInOut",
animationEasingUpdate: "cubicInOut",
animationThreshold: 2000,
progressiveThreshold: 3000,
progressive: 400,
hoverLayerThreshold: 3000,
useUTC: false,
axisPointer: [
{
lineStyle: {
color: "#817f91",
width: 1,
type: "dashed",
},
crossStyle: {
color: "#817f91",
},
label: {
color: "#fff",
show: true,
formatter: null,
precision: "auto",
margin: 3,
padding: [5, 7, 5, 7],
backgroundColor: "auto",
borderColor: null,
borderWidth: 0,
borderRadius: 3,
},
show: "auto",
z: 50,
type: "line",
snap: false,
triggerTooltip: true,
triggerEmphasis: true,
value: null,
status: null,
link: [],
animation: null,
animationDurationUpdate: 200,
shadowStyle: {
color: "rgba(210,219,238,0.2)",
},
handle: {
show: false,
icon: "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z",
size: 45,
margin: 50,
color: "#333",
shadowBlur: 3,
shadowColor: "#aaa",
shadowOffsetX: 0,
shadowOffsetY: 2,
throttle: 40,
},
},
],
tooltip: [],
series: [
{
type: "graph",
layout: "none",
nodes: [
{
id: "1711994991496056834",
name: "实体1",
icon: "aaarelate",
color: "#48B8DD",
x: "232",
y: "119",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991504445441",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "232",
none_y: "119",
force_x: 100,
force_y: 100,
customData: {
id: "1711994991496056834",
name: "实体1",
icon: "aaarelate",
color: "#48B8DD",
x: "232",
y: "119",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991504445441",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "232",
none_y: "119",
force_x: 100,
force_y: 100,
},
symbolSize: 30,
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD33",
emphasis: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
emphasis: {
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
},
{
id: "1711994991508639746",
name: "实体2",
icon: "aaarelate",
color: "#48B8DD",
x: "197.42737430167577",
y: "153.12430167597728",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991512834049",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "197.42737430167577",
none_y: "153.12430167597728",
force_x: 120,
force_y: 120,
customData: {
id: "1711994991508639746",
name: "实体2",
icon: "aaarelate",
color: "#48B8DD",
x: "197.42737430167577",
y: "153.12430167597728",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991512834049",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "197.42737430167577",
none_y: "153.12430167597728",
force_x: 120,
force_y: 120,
},
symbolSize: 30,
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD33",
emphasis: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
emphasis: {
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
},
{
id: "1711994991517028353",
name: "实体3",
icon: "aaarelate",
color: "#48B8DD",
x: "192.02769888580272",
y: "125.60086003089785",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991521222657",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "192.02769888580272",
none_y: "125.60086003089785",
force_x: 140,
force_y: 140,
customData: {
id: "1711994991517028353",
name: "实体3",
icon: "aaarelate",
color: "#48B8DD",
x: "192.02769888580272",
y: "125.60086003089785",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991521222657",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "192.02769888580272",
none_y: "125.60086003089785",
force_x: 140,
force_y: 140,
},
symbolSize: 30,
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD33",
emphasis: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
emphasis: {
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
},
{
id: "1711994991525416962",
name: "实体4",
icon: "aaarelate",
color: "#48B8DD",
x: "185.37211112324871",
y: "126.26809497986947",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991529611265",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "185.37211112324871",
none_y: "126.26809497986947",
force_x: 160,
force_y: 160,
customData: {
id: "1711994991525416962",
name: "实体4",
icon: "aaarelate",
color: "#48B8DD",
x: "185.37211112324871",
y: "126.26809497986947",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991529611265",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "185.37211112324871",
none_y: "126.26809497986947",
force_x: 160,
force_y: 160,
},
symbolSize: 30,
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD33",
emphasis: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
emphasis: {
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
},
{
id: "1711994991533805570",
name: "实体5",
icon: "aaarelate",
color: "#48B8DD",
x: "178.08856718735422",
y: "140.0417307122122",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991537999874",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "178.08856718735422",
none_y: "140.0417307122122",
force_x: 180,
force_y: 180,
customData: {
id: "1711994991533805570",
name: "实体5",
icon: "aaarelate",
color: "#48B8DD",
x: "178.08856718735422",
y: "140.0417307122122",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991537999874",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "178.08856718735422",
none_y: "140.0417307122122",
force_x: 180,
force_y: 180,
},
symbolSize: 30,
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD33",
emphasis: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
emphasis: {
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
},
{
id: "1711994991542194178",
name: "实体6",
icon: "aaarelate",
color: "#48B8DD",
x: "173.08430507006707",
y: "126.554052815143",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991546388481",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "173.08430507006707",
none_y: "126.554052815143",
force_x: 200,
force_y: 200,
customData: {
id: "1711994991542194178",
name: "实体6",
icon: "aaarelate",
color: "#48B8DD",
x: "173.08430507006707",
y: "126.554052815143",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1711994991546388481",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "173.08430507006707",
none_y: "126.554052815143",
force_x: 200,
force_y: 200,
},
symbolSize: 30,
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD33",
emphasis: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
emphasis: {
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
},
{
id: "1711997519759593474",
name: "实体7",
icon: "aaarelate",
color: "#48B8DD",
x: "162.9007481928803",
y: "134.96383873314807",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1712008872452870146",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "162.9007481928803",
none_y: "134.96383873314807",
force_x: 220,
force_y: 220,
customData: {
id: "1711997519759593474",
name: "实体7",
icon: "aaarelate",
color: "#48B8DD",
x: "162.9007481928803",
y: "134.96383873314807",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1712008872452870146",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "162.9007481928803",
none_y: "134.96383873314807",
force_x: 220,
force_y: 220,
},
symbolSize: 30,
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD33",
emphasis: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
emphasis: {
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
},
{
id: "1712008872457064449",
name: "实体8",
icon: "aaarelate",
color: "#48B8DD",
x: "167.87227866446966",
y: "132.97377584806412",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1712008872461258754",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "167.87227866446966",
none_y: "132.97377584806412",
force_x: 240,
force_y: 240,
customData: {
id: "1712008872457064449",
name: "实体8",
icon: "aaarelate",
color: "#48B8DD",
x: "167.87227866446966",
y: "132.97377584806412",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1712008872461258754",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "167.87227866446966",
none_y: "132.97377584806412",
force_x: 240,
force_y: 240,
},
symbolSize: 30,
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD33",
emphasis: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
emphasis: {
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
},
{
id: "1712008872465453057",
name: "实体9",
icon: "aaarelate",
color: "#48B8DD",
x: "165.96401444305212",
y: "118.86266410547644",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1712008872469647362",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "165.96401444305212",
none_y: "118.86266410547644",
force_x: 260,
force_y: 260,
customData: {
id: "1712008872465453057",
name: "实体9",
icon: "aaarelate",
color: "#48B8DD",
x: "165.96401444305212",
y: "118.86266410547644",
picture: null,
whetherShow: null,
canSee: null,
propertyList: [
{
id: "1712008872469647362",
name: "name",
type: 0,
status: 0,
},
],
size: 1,
none_x: "165.96401444305212",
none_y: "118.86266410547644",
force_x: 260,
force_y: 260,
},
symbolSize: 30,
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD33",
emphasis: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
emphasis: {
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#48B8DD",
},
{
offset: 0.6,
color: "#ffffff",
},
],
},
borderWidth: 15,
borderColor: "#48B8DD",
},
},
},
],
links: [
{
id: "1711994992297168897",
name: "关系1",
entityStartId: "1711994991542194178",
entityStartName: "实体6",
entityEndId: "1711994991533805570",
entityEndName: "实体5",
propertyList: [
{
id: "1711994992301363202",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
source: "1711994991542194178",
target: "1711994991533805570",
customData: {
id: "1711994992297168897",
name: "关系1",
entityStartId: "1711994991542194178",
entityStartName: "实体6",
entityEndId: "1711994991533805570",
entityEndName: "实体5",
propertyList: [
{
id: "1711994992301363202",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
},
label: {
color: "#fff",
},
lineStyle: {
color: "#9cf68a",
},
},
{
id: "1711994992313946113",
name: "关系1",
entityStartId: "1711994991533805570",
entityStartName: "实体5",
entityEndId: "1711994991525416962",
entityEndName: "实体4",
propertyList: [
{
id: "1711994992318140418",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
source: "1711994991533805570",
target: "1711994991525416962",
customData: {
id: "1711994992313946113",
name: "关系1",
entityStartId: "1711994991533805570",
entityStartName: "实体5",
entityEndId: "1711994991525416962",
entityEndName: "实体4",
propertyList: [
{
id: "1711994992318140418",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
},
label: {
color: "#fff",
},
lineStyle: {
color: "#9cf68a",
},
},
{
id: "1711994992326529025",
name: "关系1",
entityStartId: "1711994991525416962",
entityStartName: "实体4",
entityEndId: "1711994991517028353",
entityEndName: "实体3",
propertyList: [
{
id: "1711994992330723329",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
source: "1711994991525416962",
target: "1711994991517028353",
customData: {
id: "1711994992326529025",
name: "关系1",
entityStartId: "1711994991525416962",
entityStartName: "实体4",
entityEndId: "1711994991517028353",
entityEndName: "实体3",
propertyList: [
{
id: "1711994992330723329",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
},
label: {
color: "#fff",
},
lineStyle: {
color: "#9cf68a",
},
},
{
id: "1711994992343306241",
name: "关系1",
entityStartId: "1711994991517028353",
entityStartName: "实体3",
entityEndId: "1711994991496056834",
entityEndName: "实体1",
propertyList: [
{
id: "1711994992347500546",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
source: "1711994991517028353",
target: "1711994991496056834",
customData: {
id: "1711994992343306241",
name: "关系1",
entityStartId: "1711994991517028353",
entityStartName: "实体3",
entityEndId: "1711994991496056834",
entityEndName: "实体1",
propertyList: [
{
id: "1711994992347500546",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
},
label: {
color: "#fff",
},
lineStyle: {
color: "#9cf68a",
},
},
{
id: "1711994992355889153",
name: "关系1",
entityStartId: "1711994991496056834",
entityStartName: "实体1",
entityEndId: "1711994991508639746",
entityEndName: "实体2",
propertyList: [
{
id: "1711994992360083457",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
source: "1711994991496056834",
target: "1711994991508639746",
customData: {
id: "1711994992355889153",
name: "关系1",
entityStartId: "1711994991496056834",
entityStartName: "实体1",
entityEndId: "1711994991508639746",
entityEndName: "实体2",
propertyList: [
{
id: "1711994992360083457",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
},
label: {
color: "#fff",
},
lineStyle: {
color: "#9cf68a",
},
},
{
id: "1711994992372666369",
name: "关系1",
entityStartId: "1711994991508639746",
entityStartName: "实体2",
entityEndId: "1711994991517028353",
entityEndName: "实体3",
propertyList: [
{
id: "1711994992376860673",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
source: "1711994991508639746",
target: "1711994991517028353",
customData: {
id: "1711994992372666369",
name: "关系1",
entityStartId: "1711994991508639746",
entityStartName: "实体2",
entityEndId: "1711994991517028353",
entityEndName: "实体3",
propertyList: [
{
id: "1711994992376860673",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
},
label: {
color: "#fff",
},
lineStyle: {
color: "#9cf68a",
},
},
{
id: "1711994992385249282",
name: "关系2",
entityStartId: "1711994991517028353",
entityStartName: "实体3",
entityEndId: "1711994991496056834",
entityEndName: "实体1",
propertyList: [
{
id: "1711994992393637889",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
source: "1711994991517028353",
target: "1711994991496056834",
customData: {
id: "1711994992385249282",
name: "关系2",
entityStartId: "1711994991517028353",
entityStartName: "实体3",
entityEndId: "1711994991496056834",
entityEndName: "实体1",
propertyList: [
{
id: "1711994992393637889",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
},
label: {
color: "#fff",
},
lineStyle: {
color: "#9cf68a",
},
},
{
id: "1711994992402026497",
name: "关系3",
entityStartId: "1711994991517028353",
entityStartName: "实体3",
entityEndId: "1711994991496056834",
entityEndName: "实体1",
propertyList: [
{
id: "1711994992406220801",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
source: "1711994991517028353",
target: "1711994991496056834",
customData: {
id: "1711994992402026497",
name: "关系3",
entityStartId: "1711994991517028353",
entityStartName: "实体3",
entityEndId: "1711994991496056834",
entityEndName: "实体1",
propertyList: [
{
id: "1711994992406220801",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
},
label: {
color: "#fff",
},
lineStyle: {
color: "#9cf68a",
},
},
{
id: "1711994992418803714",
name: "关系1",
entityStartId: "1711994991496056834",
entityStartName: "实体1",
entityEndId: "1711994991517028353",
entityEndName: "实体3",
propertyList: [
{
id: "1711994992422998017",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
source: "1711994991496056834",
target: "1711994991517028353",
customData: {
id: "1711994992418803714",
name: "关系1",
entityStartId: "1711994991496056834",
entityStartName: "实体1",
entityEndId: "1711994991517028353",
entityEndName: "实体3",
propertyList: [
{
id: "1711994992422998017",
name: "name",
type: 0,
},
],
color: "#9cf68a",
size: "1.5",
type: "1",
},
label: {
color: "#fff",
},
lineStyle: {
color: "#9cf68a",
},
},
],
legendHoverLink: true,
focusNodeAdjacency: true,
roam: false,
autoCurveness: true,
edgeSymbol: ["none", "arrow"],
draggable: true,
scaleLimit: {
min: 0.5,
max: 5,
},
force: {
initLayout: "circular",
gravity: 0.1,
repulsion: 50,
edgeLength: 20,
layoutAnimation: true,
friction: 0.3,
},
label: {
show: true,
position: "bottom",
color: "#fff",
fontSize: 15,
backgroundColor: "transparent",
formatter: "{b}",
},
lineStyle: {
color: "#D0D0D0",
type: "solid",
width: 2,
opacity: 0.5,
},
edgeLabel: {
show: true,
fontSize: 14,
fontWeight: 600,
verticalAlign: "middle",
color: "#fff",
position: "middle",
distance: 5,
},
emphasis: {
focus: "none",
itemStyle: {
shadowColor: "#ffffffcc",
shadowBlur: 20,
},
lineStyle: {
color: "#409EFF",
},
edgeLabel: {
color: "#409EFF",
show: true,
},
scale: true,
label: {
show: true,
},
},
markLine: {
symbol: ["none", "arrow"],
symbolSize: 8,
label: {
show: false,
},
lineStyle: {
color: "#DA4A43",
type: "dashed",
width: 2,
curveness: 0,
opacity: 1,
},
z: -1,
emphasis: {
lineStyle: {
width: 2,
},
label: {
show: false,
},
},
data: [],
},
color: ["#4992ff", "#7cffb2", "#fddd60", "#ff6e76", "#58d9f9", "#05c091", "#ff8a45", "#8d48e3", "#dd79ff"],
z: 2,
coordinateSystem: "view",
circular: {
rotateLabel: false,
},
left: "center",
top: "center",
symbol: "circle",
symbolSize: 10,
edgeSymbolSize: 10,
center: null,
zoom: 1,
nodeScaleRatio: 0.6,
itemStyle: {},
select: {
itemStyle: {
borderColor: "#212121",
},
},
},
],
visualMap: [],
legend: [],
markArea: [],
markLine: [
{
z: 5,
symbol: ["circle", "arrow"],
symbolSize: [8, 16],
symbolOffset: 0,
precision: 2,
tooltip: {
trigger: "item",
},
label: {
show: true,
position: "end",
distance: 5,
},
lineStyle: {
type: "dashed",
},
emphasis: {
label: {
show: true,
},
lineStyle: {
width: 3,
},
},
animationEasing: "linear",
},
],
markPoint: [],
brush: [],
dataZoom: [],
};
if (option && typeof option === "object") {
myChart.setOption(option);
myChart.on("click", (params) => {
if (!isMarkLink) {
const _o1 = myChart.getOption();
_o1.series[0].markLine.data[0] = [
{
id: "link-1",
idMemary: "",
name: "",
coord: [params.data.x, params.data.y],
},
{
id: "",
idMemary: "",
name: "",
coord: [params.data.x, params.data.y],
},
];
_o1.series[0].draggable = false;
_o1.animation = false;
myChart.setOption(_o1);
isMarkLink = true;
}
});
myChart.getZr().on("click", (params) => {
if (isMarkLink) {
const _o2 = myChart.getOption();
_o2.series[0].markLine.data = [];
_o2.series[0].draggable = true;
_o2.animation = true;
isMarkLink = false;
}
});
myChart.getZr().on("mousemove", (params) => {
if (isMarkLink && !params.target) {
const _l1 = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY]);
const _o3 = myChart.getOption();
_o3.series[0].markLine.data[0][1] = {
id: "",
name: "",
coord: _l1,
};
myChart.setOption(_o3);
}
});
myChart.on("mouseover", (params) => {
if (isMarkLink && params.dataType === "node") {
const _o4 = myChart.getOption();
_o4.series[0].markLine.data[0][1] = { id: "", name: "", coord: [params.data.x, params.data.y] };
myChart.setOption(_o4);
}
});
}
window.addEventListener("resize", myChart.resize);
</script>
···
7568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
