Echarts 树图的连接线上加箭头与文字方案记录_JA+

网络投稿 02-07 6026

需要如图所示效果

使用echart配置出来

根据Echart官方树图示例和配置项文档，发现不能在树图的连接线上加上label标签

方案方案1：

一张图告诉你怎么做

箭头的位置也是一个节点

配置箭头位置的节点标志为三角形（symbol:'trangle'）旋转90度(symbolRotate: -90)文字偏移一定位置，防止盖住箭头。(offset: [0, 20])

此方案的问题是不能控制节点间连接线的长度

方案2（控制线长）：

用rich富文本画线

整个是一个节点，用border画出线，调整位置

参考配置

{ name: '人物', symbol: 'triangle', symbolSize: 10, label: { position: 'left', distance: -50, // 调整位置 formatter: (val) => `{label|${val.name}}{line|}{percent|10%}`, rich: { label: { ...baseLabel, }, line: { // 画横线 borderWidth: 0.5, borderColor: '#000', width: 50, height: 0, }, percent: { width: 50, // 调整箭头label位置 padding: [20, 0, 0, 0], // 调整箭头label位置 } } }, }, 代码 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <style> .mychart { width: 600px; height: 200px; border: 1px solid #ddd; overflow: hidden; } </style> <body> <div class="mychart"></div> </body> <script> const baseLabel = { fontSize: 14, lineHeight: 21, borderWidth: 2, padding: 10, borderRadius: 5, align: 'center', overflow: 'breakAll', backgroundColor: '#eee', borderColor: '#ddd', } const lineLabel = { fontSize: 12, color: '#000', offset: [0, 20] } let myChart = echarts.init(document.querySelector('.mychart')) myChart.setOption({ series: [ { type: 'tree', orient: 'RL', width: 400, roam: 'move', left: 'center', symbolRotate: -90, // 箭头顺时针旋转90度 itemStyle: { color: '#ddd', borderWidth: 0 }, lineStyle: { color: '#ddd', curveness: 0.5 }, expandAndCollapse: false, data: [{ name: '名称名称', label: baseLabel, children: [ { name: '50%', label: lineLabel, symbol: 'triangle',// 三角形作为箭头 symbolSize: 10, children: [ { name: '公司', label: baseLabel, symbolSize: 0.1, // 兼容echarts4 } ] }, { name: '人物', symbol: 'triangle', symbolSize: 10, label: { position: 'left', distance: -50, // 调整位置 formatter: (val) => `{label|${val.name}}{line|}{percent|10%}`, rich: { label: { ...baseLabel, }, line: { // 画横线 borderWidth: 0.5, borderColor: '#000', width: 50, height: 0, }, percent: { width: 50, // 调整箭头label位置 padding: [20, 0, 0, 0], // 调整箭头label位置 } } }, }, // { // name: '30%', // label: lineLabel, // symbol: 'triangle',// 三角形作为箭头 // symbolSize: 10, // children: [ // { // name: '人物', // label: baseLabel, // symbolSize: 0.1, // } // ] // }, ] }], } ] }); </script> </html>