最近項(xiàng)目在做一個(gè)節(jié)點(diǎn)可以拖拽的關(guān)系圖,網(wǎng)上找到一些資料(參考鏈接,感謝),現(xiàn)整理如下
效果圖
可拖拽
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main" style="width:1000px;height:600px;"></div>
</body>
<script src="./lib/js/echarts.min.js"></script>
<script>
var colors = [{
c1: "#00c7ef",
c2: "#0AF3FF"
},
{
c1: "#FF8E14",
c2: "#FFA12F"
},
{
c1: "#AF5AFF",
c2: "#B62AFF"
},
{
c1: "#25dd59",
c2: "#29f463"
},
{
c1: "#6E35FF",
c2: "#6E67FF"
},
{
c1: "#002AFF",
c2: "#0048FF"
},
{
c1: "#8CD282",
c2: "#95F300"
},
{
c1: "#3B0EFF",
c2: "#604BFF"
},
{
c1: "#00BE74",
c2: "#04FDB8"
},
{
c1: "#4a3ac6",
c2: "#604BFF"
}
];
function getData() {
let data = {
name: "根節(jié)點(diǎn)1",
value: 0,
list: []
};
for (let i = 1; i <= 10; i++) {
let obj = {
name: "節(jié)點(diǎn)" + i,
value: i,
list: [],
};
for (let j = 1; j <= 5; j++) {
let obj2 = {
name: `節(jié)點(diǎn)1-${i}-${j}`,
value: 1 + "-" + i + "-" + j,
};
// if(j%2==1){
// obj2.list=[]
// for (let k = 1; k <= 3; k++) {
// let obj3 = {
// name: `節(jié)點(diǎn)1-${i}-${j}-${k}`,
// value: 1 + "-" + i + "-" + j+'-'+k,
// };
// obj2.list.push(obj3);
// }
// }
obj.list.push(obj2);
}
data.list.push(obj);
}
var arr = []
arr.push(data)
// arr=handle(arr,0)
return arr;
}
var listData = getData()
var list = [];
var links = [];
var legend = [];
var categories = listData[0].list.map(item => {
return {
name: item.name
};
});
var legendColor = colors.map(item => item.c2)
handle2(JSON.parse(JSON.stringify(listData)), 0);
handle3(JSON.parse(JSON.stringify(listData)), 0);
//計(jì)算list
function handle2(arr, idx, color, category) {
arr.forEach((item, index) => {
if (item.name === null) {
return false;
}
// 設(shè)置節(jié)點(diǎn)大小
let symbolSize = 10;
switch (idx) {
case 0:
symbolSize = 70;
break;
case 1:
symbolSize = 50;
break;
default:
symbolSize = 10;
break;
}
// 每個(gè)節(jié)點(diǎn)所對(duì)應(yīng)的文本標(biāo)簽的樣式。
let label = null;
switch (idx) {
case 0:
case 1:
label = {
position: "inside",
rotate: 0
};
break;
default:
break;
}
//計(jì)算出顏色,從第二級(jí)開始
if (idx === 0) {
color = colors[0];
}
if (idx == 1) {
color = colors.find((itemm, eq) => eq == index % 10);
legend.push(item.name);
}
// 設(shè)置線條顏色
let lineStyle = {
color: color.c2
};
// 設(shè)置節(jié)點(diǎn)樣式
let bgcolor = null;
if (idx === 0) {
bgcolor = {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: color.c1 // 0% 處的顏色
},
{
offset: 0.8,
color: color.c1 // 80% 處的顏色
},
{
offset: 1,
color: "rgba(0, 0, 0, 0.3)" // 100% 處的顏色
}
],
global: false
};
} else {
bgcolor = {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: color.c1 // 0% 處的顏色
},
{
offset: 0.4,
color: color.c1 // 0% 處的顏色
},
{
offset: 1,
color: color.c2 // 100% 處的顏色
}
],
global: false
};
}
let itemStyle = null;
if (item.list && item.list.length !== 0) {
//非子節(jié)點(diǎn)
itemStyle = {
borderColor: color.c2,
color: bgcolor
};
} else {
//子節(jié)點(diǎn)
item.isEnd = true;
if (item.isdisease == "true") {
itemStyle = {
color: color.c2,
borderColor: color.c2
};
} else {
itemStyle = {
color: "transparent",
borderColor: color.c2
};
}
}
//可以改變來(lái)實(shí)現(xiàn)節(jié)點(diǎn)發(fā)光效果，但體驗(yàn)不好
itemStyle = Object.assign(itemStyle, {
shadowColor: "rgba(255, 255, 255, 0.5)",
shadowBlur: 10
});
if (idx == 1) {
category = item.name;
}
let obj = {
name: item.name,
symbolSize: symbolSize,
category: category,
label,
color: bgcolor,
itemStyle,
lineStyle
};
obj = Object.assign(item, obj);
if (idx === 0) {
obj = Object.assign(obj, {
root: true
});
}
if (item.list && item.list.length === 0) {
obj = Object.assign(obj, {
isEnd: true
});
}
list.push(obj);
if (item.list && item.list.length > 0) {
handle2(item.list, idx + 1, color, category);
}
});
}
// 計(jì)算links
function handle3(arr, index, color) {
arr.forEach(item => {
if (item.list) {
item.list.forEach((item2, eq) => {
if (index === 0) {
color = colors.find((itemm, eq2) => eq2 == eq % 10);
}
let lineStyle = null;
switch (index) {
case 0:
if (item2.list.length > 0) {
lineStyle = {
normal: {
color: "target"
}
};
} else {
lineStyle = {
normal: {
color: color.c2
}
};
}
break;
default:
lineStyle = {
normal: {
color: "source"
}
};
break;
}
let obj = {
source: item.name,
target: item2.name,
lineStyle
};
links.push(obj);
if (item2.list && item.list.length > 0) {
handle3(item.list, index + 1);
}
});
}
});
}
let echart = echarts.init(document.getElementById('main'));
option = {
backgroundColor: "#000",
toolbox: {
show: true,
left: "right",
right: 20,
top: "bottom",
bottom: 20,
},
color: legendColor,
legend: {
show: true,
data: legend,
textStyle: {
color: "#fff",
fontSize: 10
},
// inactiveColor: "#fff",
icon: "circle",
type: "scroll",
orient: "vertical",
left: "right",
right: 20,
top: 20,
bottom: 80,
// itemWidth: 12,
// itemHeight: 12,
pageIconColor: "#00f6ff",
pageIconInactiveColor: "#fff",
pageIconSize: 12,
pageTextStyle: {
color: "#fff",
fontSize: 12
}
},
selectedMode: false,
bottom: 20,
left: 0,
right: 0,
top: 0,
animationDuration: 1500,
animationEasingUpdate: "quinticInOut",
series: [{
name: "知識(shí)圖譜",
type: "graph",
hoverAnimation: true,
layout: "force",//布局方式;force為力引導(dǎo)布局
force: {
repulsion: 150,//節(jié)點(diǎn)之間的斥力因子,即值越大節(jié)點(diǎn)間的連線越長(zhǎng)
edgeLength: 60//引力因子,值越大越往中心靠攏
},
nodeScaleRatio: 0.6,//鼠標(biāo)縮放時(shí),節(jié)點(diǎn)的相應(yīng)縮放比例;為0時(shí)不縮放
draggable: true,//節(jié)點(diǎn)是否可拖拽
roam: true,//是否開啟鼠標(biāo)縮放
symbol: "circle",//節(jié)點(diǎn)的形狀
data: list,
links: links,
categories: categories,
focusNodeAdjacency: true,//鼠標(biāo)移到節(jié)點(diǎn)上時(shí)是否突出節(jié)點(diǎn)及鄰接節(jié)點(diǎn)
scaleLimit: {
min: 0.5, //最小的縮放值
max: 9 //最大的縮放值
},
edgeSymbol: ["circle", "arrow"],//連接線兩端的形狀,此為一端圓圈一端箭頭
edgeSymbolSize: [4, 8],//連接線兩端形狀的大小
label: {
normal: {
show: true,
position: "right",
color: "#fff",
distance: 5,
fontSize: 10
}
},
lineStyle: {
normal: {
width: 1.5,
curveness: 0,
type: "solid"
}
}
}]
};
echart.setOption(option);
</script>
</html>
注意:如不能正常顯示可能是echarts版本問(wèn)題
