【Echarts】基于Echarts4.0修改树图连接线(由曲线转为直角线)

树图连接线曲线改为直角线

前言

Echarts (http://echarts.baidu.com/)是百度公司出品的一个开源制作图标的js插件，可以说是百度不可多得的良心产品了。我写这篇文章的时候是19年的11月。echarts已经出到4.x的版本，想要更深入了解echarts以及下载echarts的话，直接百度就可以去官网或者github上下载了。

问题/需求

直接进入主题，至于要写这篇文章，主要是因为在公司中也会有使用echarts这个插件，并且遇到一个需求就是要将echarts的树图的曲线转为直角线。其实这个问题在2017年就是echarts2.x的时候，当时的树图就是由直角线组成的，但是不知道为什么升级到3.x的时候，连接线就改为了曲线了，并且连连接点也删除了。

解决办法

直接上手，官网上下载echarts4.x的插件，然后导入echarts4.x的插件直接修改源码，主要就是修改两个方法就好，方法并不复杂，并且也可以根据自身的情况进行调整。暂时测试来说的话，对其他图形没有太大的影响。

源码修改

下载echarts.js，打开直接修改源码部分

/*
* 直接ide搜索updateNode这个方法，然后根据情况找到下面的代码
* 由于echarts3.x以及4.x使用的都是曲线，所以我们可以修改当前的渲染方式修改为直角线
* 修改getEdgeShape方法，生成多边形折线的各个点坐标
*/
function updateNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope){
	~~~
	if (node.parentNode && node.parentNode !== virtualRoot){
        var edge = symbolEl.__edge;
//      if (!edge) {
//          edge = symbolEl.__edge = new BezierCurve({
//              shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
//              style: defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
//          });
//      }
//
//      updateProps(edge, {
//          shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
//          style: {opacity: 1}
//      }, seriesModel);

        // 上面的注释是原本的内容，然后修改为下面的这窜代码，主要是修改渲染线条的方式
        if (!edge) {
            edge = symbolEl.__edge = new Polyline({
                shape: {
                	points: getEdgeShape(seriesScope, sourceLayout, targetLayout)
                },
                style: defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
            });
        }

        updateProps(edge, {
            shape: {
            	points: getEdgeShape(seriesScope, sourceLayout, targetLayout)
            },
            style: {opacity: 1}
        }, seriesModel);

        group.add(edge);
	}
	...
}

/*
*  修改水平方向坐标生成方式，这个的话就是修改节点的参数坐标，如果不修改的话，线条不会有明显的一个弯曲
* 利用curvature调节折线位置坐标，curvature范围:0~1
*/
function getEdgeShape(seriesScope, sourceLayout, targetLayout) {
    var cpx1;
    var cpy1;
    var cpx2;
    var cpy2;
    var orient = seriesScope.orient;
    var x1;
    var x2;
    var y1;
    var y2;

    if (seriesScope.layout === 'radial') {
		...
    }
    else {
        x1 = sourceLayout.x;
        y1 = sourceLayout.y;
        x2 = targetLayout.x;
        y2 = targetLayout.y;
        if (orient === 'LR' || orient === 'RL') { //  折线节点坐标
            cpx1 = x1 + (x2 - x1) * seriesScope.curvature;
            cpy1 = y1;
//          cpx2 = x2 + (x1 - x2) * seriesScope.curvature;
//          cpy2 = y2;
//         一样也是修改这两行代码  
            cpx2 = x1 + (x2 - x1) * seriesScope.curvature;
            cpy2 = y2;
        }
        if (orient === 'TB' || orient === 'BT') {
			...
        }
    }
    // 这个的话就是修改返回的一个数值，由于渲染线条的方式变了，所以就会导致接收数据的方式也相对应改变
    return [[x1,y1],[cpx1,cpy1],[cpx2,cpy2],[x2,y2]]; // 二维数组
//  return {
//      x1: x1,
//      y1: y1,
//      x2: x2,
//      y2: y2,
//      cpx1: cpx1,
//      cpy1: cpy1,
//      cpx2: cpx2,
//      cpy2: cpy2
//  };
}

前后对比

修改之前是因为修改了线条角度才导致是直线的，不然的话也是曲线