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

JA+

已于 2023-08-17 19:34:51 修改

阅读量8.8k

点赞数 2

分类专栏： echarts 文章标签： css html html5

于 2021-11-24 21:20:32 首次发布

本文链接：https://blog.csdn.net/qq_35459724/article/details/121525057

版权

echarts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文探讨了在ECharts树图中添加连接线标签的两种方法。方案一利用节点的symbol和symbolRotate实现箭头标签，但无法控制线长；方案二通过rich富文本绘制线条和箭头标签，能调整线长但配置较复杂。示例代码展示了如何配置树图，包括节点样式、线宽、线颜色和箭头位置。

摘要由CSDN通过智能技术生成

需要如图所示效果

使用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>