echarts graph关系图自定义线条label颜色
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
}
}
]
};
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiekbkj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09