前端 - echarts关系图graph如何让节点显示两个数值？

Question

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

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

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

Answer 1

修改label 的formatter

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

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

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

series里面设置label的formatter