echarts graph关系图自定义线条label颜色
一、按条件匹配自定义颜色
echarts 关系图自定义线条label颜色 自定义label颜色:通过配置edgeLabel中的rich和formatter
rich配置文档:点击
二、完整配置
1.先看效果:
2. 配置项:
let myData = [
{
name: '我',
value: { val: '50', type: '收入' },
x: 300,
y: 0
},
{
name: '交通',
value: { val: '50', type: '收入' },
x: 200,
y: 300
},
{
name: '餐饮',
x: 550,
y: 300
},
{
name: '充值',
x: 550,
y: 500
}
];
let linksData = [
{
source: 0,
target: 3,
value: { val: '50', type: '收入' }
},
{
source: 0,
target: 2,
value: { val: '230', type: '支出' }
},
{
source: '我',
target: '交通',
value: { val: '230', type: '支出' }
}
];
option = {
title: {
text: 'Basic Graph'
},
tooltip: {
show: false
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: true,
label: {
show: true
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 14,
show: true,
formatter: (params) => {
console.log('params', params);
if (params.value.type === '收入') {
return `收入20笔,{a|+${params.value.val}万元}`;
} else {
return `支出20笔,-${params.value.val}万元`;
}
},
rich: {
a: {
color: 'red',
lineHeight: 10
}
}
},
data: myData,
links: linksData,
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
};