echars关系图
作者：互联网
`drawLine () {
// 基于准备好的dom，初始化echarts实例
const chartDom = document.getElementById('main')
const myChart = echarts.init(chartDom)
// 指定图表的配置项和数据
const option = {
tooltip: {},
legend: {
icon: 'circle',
// 修改样式
x: 'center',
bottom: '15' // 距下边距
},
color: ['#fff', '#5ec54a', '#4cabce', '#e5323e'],
toolbox: {
show: true,
feature: {
saveAsImage: {}
},
roam: false
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
backgroundColor: 'red',
borderColor: 'red',
type: 'graph',
layout: 'none',
symbolSize: 88, // 控制圆圈的大小
roam: false, // 禁止缩放
label: {
show: true,
position: 'inside', // 文本位置
formatter: function (para) {
// console.log(para) //节点上的数据
// return '\n' + '{txtFontsize|' + para.data.name + '}' + '\n' + '{cnNum|' + para.data.value[2] + '}'
return ['{a|1/1}', '{b|8}', '{c|2ms}', '{d|3}'].join('\n')
},
rich: { // 文本的样式
a: {
color: '#666',
lineHeight: 20,
fontWeight: 700,
fontSize: 16
},
b: {
lineHeight: 15
},
c: {
lineHeight: 15
}
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [0, 15],
edgeLabel: {
fontSize: 14
},
data: [
{
name: '节点1',
x: 500,
y: -600,
// 节点的样式
itemStyle: {
borderType: 'solid',
// color: "red",
borderColor: '#5ec54a',
borderWidth: 5
},
// 鼠标移入该节点的样式
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 6,
symbolSize: [5, 20]
},
itemStyle: {
borderType: 'solid',
color: 'pink',
borderColor: '#5EC54A',
borderWidth: 5
}
}
},
{
name: '节点2',
x: 800,
y: -600,
itemStyle: {
borderType: 'solid',
// color: "red",
borderColor: '#5ec54a',
borderWidth: 5
}
},
{
name: '节点3',
x: 400,
y: -300,
itemStyle: {
borderType: 'solid',
// color: "red",
borderColor: '#5ec54a',
borderWidth: 5
}
},
{
name: '节点4',
x: 600,
y: -300,
itemStyle: {
borderType: 'solid',
// color: "red",
borderColor: '#5ec54a',
borderWidth: 5
}
},
{
name: '节点5',
x: 800,
y: -300,
itemStyle: {
borderType: 'solid',
// color: "red",
borderColor: '#5ec54a',
borderWidth: 5
}
},
{
name: '节点6',
x: 1000,
y: -300,
itemStyle: {
borderType: 'solid',
// color: "red",
borderColor: '#5ec54a',
borderWidth: 5
}
},
{
name: '节点7',
x: 300,
y: -100,
itemStyle: {
borderType: 'solid',
// color: "red",
borderColor: '#5ec54a',
borderWidth: 5
}
},
{
name: '节点8',
x: 500,
y: -100,
itemStyle: {
borderType: 'solid',
// color: "red",
borderColor: '#5ec54a',
borderWidth: 5
}
},
{
name: '节点9',
x: 700,
y: -100,
itemStyle: {
borderType: 'solid',
// color: "red",
borderColor: '#5ec54a',
borderWidth: 5
}
},
{
name: '节点10',
x: 900,
y: -100,
itemStyle: {
borderType: 'solid',
// color: "red",
borderColor: '#5ec54a',
borderWidth: 5
}
},
{
name: '节点11',
x: 1100,
y: -100,
itemStyle: {
borderType: 'solid',
// color: "red",
borderColor: '#5ec54a',
borderWidth: 5
}
}
],
// 连接
links: [
{
source: 0, // 是数字时表示节点的索引
target: 1,
symbolSize: [5, 20],
// 连接上的文字
label: {
show: true,
formatter: ['{a|33 call}', '{b|1.51s}'].join(' | '),
rich: {
a: {
// color: '#000',
lineHeight: 1
},
b: {
height: 20
}
}
},
// 连接的样式，可单独写在连接中
lineStyle: {
curveness: 0.2,
opacity: 0.9,
width: 2,
color: '#5ec54a'
}
},
{
source: '节点3',
target: '节点1', // 文字必须和data中的name值一致
lineStyle: {
curveness: 0.2,
opacity: 0.9,
width: 2,
color: '#5ec54a'
}
},
{
source: '节点4',
target: '节点1'
},
{
source: '节点4',
target: '节点2'
},
{
source: '节点5',
target: '节点2'
},
{
source: '节点5',
target: '节点6'
},
{
source: '节点7',
target: '节点3'
},
{
source: '节点8',
target: '节点3'
},
{
source: '节点8',
target: '节点4'
},
{
source: '节点9',
target: '节点5'
},
{
source: '节点9',
target: '节点10'
},
{
source: '节点10',
target: '节点6'
},
{
source: '节点11',
target: '节点6'
}
],
// 连接的样式，可单独写在连接中
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0.3,
color: 'blue'
},
// 鼠标移入动态的时候显示的默认样式，可单独写在每项下，写在全局就是公共的
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 6,
symbolSize: [5, 20]
},
itemStyle: {
borderType: 'solid',
color: '#B3E69F',
borderColor: '#5EC54A',
borderWidth: 5
}
}
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
// 点击出现弹框
myChart.on('mouseover', param => {
param.event.event.stopPropagation()
console.log('param---->', param) // 打印出param, 可以看到里边有很多参数可以使用
// 获取节点点击的数组序号
var arrayIndex = param.dataIndex
console.log('arrayIndex---->', arrayIndex)
console.log('name---->', param.name)
console.log(param.dataType)
if (param.dataType === 'node') {
// alert('点击了节点' + param.name)
this.dialogServeVisible = true
this.dialogConnectVisible = false
} else {
// alert('点击了边' + param.value)
this.dialogServeVisible = false
this.dialogConnectVisible = true
}
})
myChart.on('mouseout', param => {
this.dialogServeVisible = false
this.dialogConnectVisible = false
})
}`标签：关系,borderColor,echars,name,5ec54a,color,source,节点 来源： https://www.cnblogs.com/33shan/p/14964025.html