关于echarts绘制树图形的注意事项(文字倾斜、数据更新、缓存重绘问题等)

最近项目中使用到echarts的树操作，对其中几点注意事项进行下总结。

效果图：

1、基础配置

options的配置如下：

{
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',
              data: data,
              orient: 'TB',
              symbolSize: 20,
              label: {
                normal: {
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right',
                  fontSize: 12,
                  rotate: 45,
                  formatter (data) {
                    let { name } = data;
                    return name.length > 7
                      ? name.substring(0, 7) + '...'
                      : name;
                  }
                }
              },
              leaves: {
                label: {
                  normal: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left',
                    rotate: 45
                  }
                }
              },
              itemStyle: {
                normal: {
                  borderColor: '#1890ff'
                }
              },
              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750
            }
          ]
        }

1.1 文字倾斜

在label选项设置rotate属性

label:{
    rotate: 45
}

1.2 竖式显示

设置orient选项，LR表示横向，TB表示纵向

{
    type: 'tree',
    orient:'TB'
}

1.3 省略显示

当字数过多的时候显示...在label的formatter中进行设置

label:{
    normal:{
        formatter (data) {
             formatter (data) {
                    let { name } = data;
                    return name.length > 7  ? name.substring(0, 7) + '...'  :  name;
                  }
    }
}

2、交互说明

当点击【显示关系】的时候，显示图中的黄色边框节点。

看下关系数据：

节点【罗拉】的【朋友】是【quorra】和【heimayu】

我们需要做的就是抽取关系数据并塞入到原来树的节点中，分析逻辑并显示代码：

2.1 在原来树的节点中找到节点【罗拉】

// 获取接口返回的数据
let relations = res.conceptRelationDTOS;

// 对关系数组进行识别，this.relationTreeList是原来树的数据
relations.forEach((item, index) => {
     this.findRelationNode(item, this.relationTreeList);
});

递归树数据找到节点

/**
     * 在 list 中找到 dataId 并塞入关系relationDTO
     * @param data 关系数据
     * @param list 树数据
     */
    findRelationNode (data, list) {
      for (var i = 0, len = list.length; i < len; i++) {
        let id = data.id;
        if (id === list[i].id) {
          this.setRelationNode(data, list[i]);
          break;
        } else if (list[i].children && list[i].children.length > 0) {
          this.findRelationNode(data, list[i].children);
        }
      }
    }

2.2 找到节点【罗拉】后，塞入孩子节点（关系）

/**
     * 设置孩子节点
     * @param data 关系数据
     * @param node 塞入的节点
     */
    setRelationNode (data, node) {
      let { conceptRelations } = data;
      if (!conceptRelations.length) {
        return;
      }
      conceptRelations.forEach(item => {
        let { relationName, concepts } = item;       

        node.children.push({
          id: new Date().getTime() * Math.random(),
          name: `关系：${relationName}`,
          children: concepts,
          itemStyle: {
            borderColor: '#faa221' // 对节点颜色设置
          }
        });
      });
    }

这里要注意的是，保证设置的id的唯一性，不然会对树的显示渲染有影响

3、重绘缓存影响

echarts在内部渲染树的时候会合并数据，我们这里需要点击显示关系进行切换，数据也是不停的切换的，由于数据的耦合度较高导致树渲染的过程中出现了问题。这里我的解决方法是：

1、设置setOption的第二个参数true，第二个参数指的就是notMerger

this.treeChart.setOption(options,true)

2、在重新渲染前清除画布，方法是clear()

this.treeChart.clear();

亲测有效。