echarts graph关系图自定义线条label颜色

echarts graph关系图自定义线条label颜色

一、按条件匹配自定义颜色

echarts 关系图自定义线条label颜色 自定义label颜色：通过配置edgeLabel中的rich和formatter

二、完整配置

1.先看效果：

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
      }
    }
  ]
};