//图表
initEchart() {
let myChart = echarts.init(document.getElementById(“echartGraph”))
this.chartLink = [
{ value: “同事”, source: “1”, target: “2” },
{ value: “同事”, source: “1”, target: “3” },
{ value: “同事”, source: “1”, target: “4” },
{ value: “同学”, source: “1”, target: “5” },
{ value: “同学”, source: “1”, target: “6” },
{ value: “同学”, source: “1”, target: “7” },
{ value: “爸爸”, source: “1”, target: “8” },
]
this.chartData = [
{
name: “张1”,
symbolSize: 76,
id: “1”,
},
{
name: “张2”,
id: “2”,
},
{
name: “张3”,
id: “3”,
},
{
name: “张4”,
id: “4”,
},
{
name: “张5”,
id: “5”,
},
{
name: “张6”,
id: “6”,
},
{
name: “张7”,
id: “7”,
},
{
name: “张6”,
id: “8”,
},
]
let option = {
tooltip: {
show: false,
},
series: [
{
edgeLabel: {
normal: {
formatter: "{c}",
show: true,
},
},
edgeSymbol: "circle",
force: {
repulsion: 2000,
},
layout: "force",
roam: true,
itemStyle: {
normal: {
color: "#6495ED",
},
//鼠标放上去有阴影效果
emphasis: {
shadowColor: "#3721db",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 40,
},
},
label: {
normal: {
show: true,
position: "bottom",
},
},
//头像
// symbol: `image://${imgSrc}`,
symbol: function (value, param) {
if (param.data.name == 1) {
return `image://${manSrc}`
} else {
return `image://${womanSrc}`
}
},
symbolSize: 86,
type: "graph",
links: this.chartLink,
data: this.chartData,
},
],
}
myChart.setOption(option)
myChart.on("click", function (params) {
console.log(params.data) //获取点击的头像的数据信息
})
},
没有关系版本
let option = {
animationDurationUpdate: 1500,
animationEasingUpdate: "quinticInOut",
series: [
{
roam: true,
draggable: true,
type: "graph",
layout: "force",
animation: false,
itemStyle: {
normal: {
color: "#262626",
},
},
label: {
normal: {
show: true,
position: "bottom",
},
},
symbol: function (value, param) {
if (param.data.sex == "1") {
return `image://man.png`
} else if (param.data.sex == "2") {
return `image://woman.png`
} else {
return `image://unknown.png`
}
},
symbolSize: 38,
data: this.chartNode,
force: {
repulsion: 600,
},
edges: this.chartLink,
},
],
}