echarts 树tree节点的文字竖着放

echarts 树tree将节点的文字竖着放

1.1 实现效果

1.2 每个标签的文字竖着显示

主要是修改 label 下 formatter ，让每行显示一个字符，代码如下：

 formatter: (params) => {
   let newName = ''
     let len = params.data.name.length
     let strLen = 1 //一行显示几个字
     let rowNum = Math.ceil(len / strLen)
     if (len > strLen) {
       for (let p = 0; p < rowNum; p  ) {
         let tempStr = ''
         let start = p * strLen
         let end = start   strLen
         if (p == rowNum - 1) {
           tempStr = params.data.name.substring(start, len)
         } else {
           tempStr = params.data.name.substring(start, end)   '\n'
         }
         newName  = tempStr
       }
     } else {
       newName = params.data.name
     }
     let n = newName
     if (n.length > 16) {
       n = n.slice(0, 16)   '...'
     }
     let str = `{name|${n}}`
     return str
   },

关键的设置在于 let strLen = 1 //一行显示几个字 ，还可以给 strLen 加判断条件以来区分每个节点每行的显示字数。

1.3 根节点文字样式修改

1.3.1 根节点文字横着显示

需求：使得根节点的文字横着，其他标签竖着显示。
解决：主要是给strLen 添加判断条件来判断，具体的代码如下：

let strLen = params.data.relationType === 0 ? 100 : 1 //一行显示几个字

1.3.2 给根节点添加文字

需求：给根节点添加 总部、本企业 标签；并单独设置总部、本企业 标签的文字样式
解决：通过lable下的 formatter 和 rich配合使用，可实现功能。
在formatter 中给根节点标签中添加相应的文字，代码如下：

let str = `{name|${n}}`
let isMain = params.data.relationType === 0
str = isMain ? `{name|${n}} {current|本企业} {main|总部}` : str

利用rich给总部、本企业 标签文字设置不用的样式，代码如下：

 rich: {
   name: {
     fontSize: 14
   },
   current: {
     fontSize: 12,
     padding: 0,
     color: '#07CA42',
     fontWeight: 600,
     backgroundColor: '#E5F7EA',
     borderRadius: 2
   },
   main: {
     color: '#0780ED',
     fontSize: 12,
     padding: 0,
     fontWeight: 600,
     backgroundColor: '#E6F2FD',
     borderRadius: 2
   }
 }

1.4 全部代码

<template>
  <div
    class="ent-structure"
    ref="ent-structure"
  >
    <div
      class="ent-tree"
      ref="ent-tree"
    ></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      treeData: {
        id: '1362',
        name: '总企业',
        relationType: 0,
        childList: [
          {
            id: '2095',
            name: '测试企业1',
            relationType: 1,
            childList: []
          },

          {
            id: '2120',
            name: '测试企业2',
            relationType: 2,
            childList: [
              {
                id: '2121',
                name: '测试企业21',
                relationType: 1,
                childList: []
              },
              {
                id: '2122',
                name: '测试企业22',
                relationType: 1,
                childList: []
              }
            ]
          },
          {
            id: '1448',
            name: '测试企业3',
            relationType: 2,
            childList: [
              {
                id: '2048',
                name: '测试企业31',
                relationType: 1,
                childList: []
              },

              {
                id: '2177',
                name: '90794',
                relationType: 1,
                childList: []
              },
              {
                id: '2179',
                name: '51425',
                relationType: 2,
                childList: [
                  {
                    id: '2180',
                    name: '67685',
                    relationType: 2,
                    childList: []
                  },
                  {
                    id: '2181',
                    name: '666',
                    relationType: 1,
                    childList: []
                  }
                ]
              },
              {
                id: '2188',
                name: '28701',
                relationType: 2,
                childList: []
              }
            ]
          }
        ]
      },
      Echarts: null,
      childLength: []
    }
  },

  mounted() {
    this.formatData(this.treeData)
    window.onresize = () => {
      this.$nextTick(() => {
        this.Echarts.resize()
      })
    }
  },

  methods: {
    formatData(data) {
      this.$nextTick(() => {
        this.recursive(data)
        this.setCanvasWidth()
        this.renderTree(data)
      })
    },

    // 递归-给每个子节点中添加 children
    recursive(data) {
      if (data.childList) {
        this.childLength.push(data.childList.length)
        data.children = data.childList
        data.childList.forEach((item) => {
          this.recursive(item)
        })
      } else {
        return
      }
    },

    //  根据树的childList设置容器宽度
    setCanvasWidth() {
      let container = document.getElementsByClassName('ent-structure')[0]
      let maxLen = Math.max(...this.childLength)
      if (maxLen <= 5) {
        container.style.width = '1000px'
        container.style.height = '700px'
      } else {
        container.style.width = `${maxLen * 180}px`
      }
    },

    // 绘制企业结构的echarts
    renderTree(data) {
      this.childLength = []
      this.Echarts = echarts.init(this.$refs['ent-tree'])

      const options = {
        tooltip: {
          // 提示框浮层设置
          trigger: 'item',
          triggerOn: 'mousemove' // 提示框触发条件
        },
        series: [
          {
            type: 'tree',
            data: [this.treeData],
            nodePadding: 30, //结点间距 （发现没用）
            layerPadding: 10, //连接线长度 （发现没用）
            name: '树图',
            top: '1%', // 组件离容器上侧的距离，像素值20，或相对容器的百分比20%
            left: '1%', // 组件离容器左侧的距离
            bottom: '1%', // 组件离容器下侧的距离
            right: '1%', // 组件离容器右侧的距离
            layout: 'orthogonal', // 树图的布局，正交orthogonal和径向radial两种
            orient: 'TB', // 树图中正交布局的方向，'LR','RL','TB','BT'，只有布局是正交时才生效
            // edgeShape: 'polyline', // 树图边的形状，有曲线curve和折线polyline两种，只有正交布局下生效
            zoom: 0.8, //当前视角的缩放比例
            roam: true, //是否开启平游或缩放  // 是否开启鼠标缩放或平移，默认false
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 0.2,
              max: 1
            },
            initialTreeDepth: undefined, // 树图初始的展开层级（深度），根节点是0，不设置时全部展开
            symbol: 'circle', // 标记的图形，默认是emptyCircle;circle,rect,roundRect,triangle,diamond,pin,arrow,none
            // symbolRotate: 270, // 配合arrow图形使用效果较好
            symbolSize: 6, // 大于0时是圆圈，等于0时不展示，标记的大小
            itemStyle: {
              // 树图中每个节点的样式
              color: '#0780ED', // 节点未展开时的填充色
              // borderWidth: 1, // 描边线宽，为0时无描边
              // borderType: 'dotted', // 描边类型
              borderCap: 'round' // 指定线段末端的绘制方式butt方形结束，round圆形结束，square
              // shadowColor: 'rgba(0,121,221,0.3)', // 阴影颜色
              // shadowBlur: 16, // 图形阴影的模糊大小
              // opacity: 1 // 图形透明度
            },
            label: {
              // 每个节点对应的文本标签样式
              show: true, // 是否显示标签
              distance: 8, // 文本距离图形元素的距离
              position: ['50%', '50%'], // 标签位置
              verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
              align: 'center', // 文字水平对齐方式，默认自动，left，right，center
              fontSize: 16, // 字体大小
              color: '#333', // 字体颜色
              // color: 'red', // 字体颜色
              backgroundColor: '#F8F9FA', // 文字块的背景颜色
              borderColor: '#CED4DA', // 文字块边框颜色
              borderWidth: 1, // 文字块边框宽度
              borderType: 'solid', // 文字块边框描边类型 solid dashed dotted
              borderRadius: 2, // 文字块的圆角
              padding: [6, 12], // 文字块内边距
              shadowColor: 'rgba(0,121,221,0.3)', // 文字块的背景阴影颜色
              shadowBlur: 6, // 文字块的背景阴影长度
              // height: 130,
              // width: 12,
              // rotate: -90,
              // 文字超出宽度是否截断或者换行；只有配置width时有效
              // overflow: 'truncate', // truncate截断，并在末尾显示ellipsis配置的文本，默认为...;break换行;breakAll换行，并强制单词内换行
              // ellipsis: '...',
              formatter: (params) => {
                let newName = ''
                let len = params.data.name.length
                let strLen = params.data.relationType === 0 ? 100 : 1 //一行显示几个字
                let rowNum = Math.ceil(len / strLen)
                if (len > strLen) {
                  for (let p = 0; p < rowNum; p  ) {
                    let tempStr = ''
                    let start = p * strLen
                    let end = start   strLen
                    if (p == rowNum - 1) {
                      tempStr = params.data.name.substring(start, len)
                    } else {
                      tempStr = params.data.name.substring(start, end)   '\n'
                    }
                    newName  = tempStr
                  }
                } else {
                  newName = params.data.name
                }
                let n = newName
                if (n.length > 16) {
                  n = n.slice(0, 16)   '...'
                }
                let str = `{name|${n}}`
                let isMain = params.data.relationType === 0
                str = isMain ? `{name|${n}} {current|本企业} {main|总部}` : str
                return str
              },
              rich: {
                name: {
                  fontSize: 14
                },
                current: {
                  fontSize: 12,
                  padding: 0,
                  color: '#07CA42',
                  fontWeight: 600,
                  backgroundColor: '#E5F7EA',
                  borderRadius: 2
                },
                main: {
                  color: '#0780ED',
                  fontSize: 12,
                  padding: 0,
                  fontWeight: 600,
                  backgroundColor: '#E6F2FD',
                  borderRadius: 2
                }
              }
            },

            labelLayout: {
              dy: -20,
              verticalAlign: 'top'
            },
            lineStyle: {
              // 树图边的样式
              // color: 'rgba(0,0,0,.35)', // 树图边的颜色
              width: 1, // 树图边的宽度
              // curveness: 1, // 树图边的曲度
              shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
              // shadowBlur: 10 // 图形阴影的模糊大小
            },
            blur: {
              // 淡出状态的相关配置，开启emphasis.focus后有效
              itemStyle: {}, // 节点的样式
              lineStyle: {}, // 树图边的样式
              label: {} // 淡出标签的文本样式
            },
            leaves: {
              // 叶子节点的特殊配置
              label: {
                // 叶子节点的文本标签样式
                distance: 0,
                position: 'bottom',
                verticalAlign: 'middle'
              },
              itemStyle: {}, // 叶子节点的样式
              emphasis: {}, // 叶子节点高亮状态的配置
              blur: {}, // 叶子节点淡出状态的配置
              select: {} // 叶子节点选中状态的配置
            },
            animation: true, // 是否开启动画
            expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
            animationDuration: 550, // 初始动画的时长
            animationEasing: 'linear', // 初始动画的缓动效果
            animationDelay: 0, // 初始动画的延迟
            animationDurationUpdate: 750, // 数据更新动画的时长
            animationEasingUpdate: 'cubicInOut', // 数据更新动画的缓动效果
            animationDelayUpdate: 0 // 数据更新动画的延迟
          }
        ]
      }

      /**
       * 遍历数节点
       */
      function nodesStutes(nodes) {
        if (nodes.childList && nodes.childList.length) {
          for (let i = 0; i < nodes.childList.length; i  ) {
            if (nodes.childList[i].relationType === 2) {
              // 修改连线颜色
              nodes.childList[i].lineStyle = {
                color: '#6DD400'
              }
            } else if (nodes.childList[i].relationType === 1) {
              nodes.childList[i].lineStyle = {
                color: '#0780ED'
              }
            }
            nodesStutes(nodes.childList[i])
          }
        }
      }
      nodesStutes(data)
      this.Echarts.setOption(options, true)
    }
  }
}
</script>

<style lang="less" scoped>
.ent-structure {
  width: 100%;
  height: 100%;
  background: #fff;
}

.ent-tree {
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>

这篇好文章是转载于：学新通技术网