标签：关系 borderColor echars name 5ec54a color source 节点
`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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。