echarts关系图graph如何让节点显示两个不同位置的数值？

Question

以这个为例子：
https://www.makeapie.cn/echarts_content/xkiiaUN8q.html

我希望能够在节点上同时显示数值和名称，名称在下面，数值在中间。

注意，formatter无法解决问题，只能显示在一个位置，比方说inside或者bottom。

Answer 1

series里面设置label的formatter

Answer 2

配置label.formatter

let data = {
  nodes: [{
    name: '操作系统集团',
    category: 0,
    value: 1
  }, {
    name: '浏览器有限公司',
    category: 0,
    value: 2
  }, {
    name: 'HTML科技',
    category: 0,
    value: 3
  }, {
    name: 'JavaScript科技',
    category: 0,
    value: 14
  }, {
    name: 'CSS科技',
    category: 0,
    value: 15
  }, {
    name: 'Chrome',
    category: 1,
    value: 16
  }, {
    name: 'IE',
    category: 1,
    value: 17
  }, {
    name: 'Firefox',
    category: 1,
    value: 18
  }, {
    name: 'Safari',
    category: 1,
    value: 19
  }],
  
  links: [{
    source: '浏览器有限公司',
    target: '操作系统集团',
    name: '参股'
  }, {
    source: 'HTML科技',
    target: '浏览器有限公司',
    name: '参股'
  }, {
    source: 'CSS科技',
    target: '浏览器有限公司',
    name: '参股'
  }, {
    source: 'JavaScript科技',
    target: '浏览器有限公司',
    name: '参股'
  }, {
    source: 'Chrome',
    target: '浏览器有限公司',
    name: '董事'
  }, {
    source: 'IE',
    target: '浏览器有限公司',
    name: '董事'
  }, {
    source: 'Firefox',
    target: '浏览器有限公司',
    name: '董事'
  }, {
    source: 'Safari',
    target: '浏览器有限公司',
    name: '董事'
  }, {
    source: 'Chrome',
    target: 'JavaScript科技',
    name: '法人'
  }]
}

const color1 = '#006acc';
const color2 = '#ff7d18';
const color3 = '#10a050';

data.nodes.forEach(node => {
  if (node.category === 0) {
    node.symbolSize = 100;
    node.itemStyle = {
      color: color1
    };
  } else if (node.category === 1) {
    node.itemStyle = {
      color: color2
    };
  }
});

data.links.forEach(link => {
  link.label = {
    align: 'center',
    fontSize: 12
  };
  
  if (link.name === '参股') {
    link.lineStyle = {
      color: color2
    }
  } else if (link.name === '董事') {
    link.lineStyle = {
      color: color1
    }
  } else if (link.name === '法人') {
    link.lineStyle = {
      color: color3
    }
  }
});

let categories = [{
    name: '公司',
    itemStyle: {
        color: color1
    }
  },
  {
    name: '董事',
    itemStyle: {
        color: color2
    }
}]

option = {
  title: {
    text: '知识图谱',
  },
  legend: [{
    // selectedMode: 'single',
    data: categories.map(x => x.name),
    // icon: 'circle'
  }],
  series: [{
    type: 'graph',
    layout: 'force',
    symbolSize: 58,
    draggable: true,
    roam: true,
    focusNodeAdjacency: true,
    categories: categories,
    edgeSymbol: ['', 'arrow'],
    // edgeSymbolSize: [80, 10],
    edgeLabel: {
      normal: {
        show: true,
        textStyle: {
          fontSize: 20
        },
        formatter(x) {
          return x.data.name;
        }
      }
    },
    label: {
        show: true,
        formatter: '{c}\n{b}',
    },
    force: {
      repulsion: 2000,
      edgeLength: 120
    },
    data: data.nodes,
    links: data.links
  }]
}

Answer 3

修改label 的formatter

假设要显示的数据是这样的

num就是你要显示的数字
这是最终效果