echart树形折线图

echarts 实现如上树形结构图，版本：echart4.0

直接用官方的例子中的代码发现不起作用，需要修改源代码。我用的是VUE，所有我改的文件是：

\node_modules\echarts\lib\chart\tree\TreeView.js  有的是在echarts.js文件中。

找到updateNode 这个方法中下图所示代码，注释的是源代码，下面是修改后的代码

2. 找到getEdgeShape 方法，

function getEdgeShape(seriesScope, sourceLayout, targetLayout) {
  var cpx1;
  var cpy1;
  var cpx2;
  var cpy2;
  var orient = seriesScope.orient;
    //修改- zn  add 
    var x1;
    var x2;
    var y1;
    var y2;
    //-------------
  if (seriesScope.layout === 'radial') {
   ......
  }
  else {
    var x1 = sourceLayout.x;
    var y1 = sourceLayout.y;
    var x2 = targetLayout.x;
    var 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;
    }
    //上下布局，我用的是从上到下布局，可根据自己的布局修改cpx1,cpx2,cpy1,cpy2的值
    if (orient === 'TB' || orient === 'BT') {
      cpx1 = x1;
      cpy1 = y1 + (y2 - y1)/2 * seriesScope.curvature;
      cpx2 = x2;
      // cpy2 = y2 + (y1 - y2) * seriesScope.curvature;
      cpy2 = y1 + (y2 - y1) /2* seriesScope.curvature;//修改-这里除以2才会有90度折线，不除以2折线会和下级在同一水平上
    }
    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
    // };
}

还有一个困扰到我的问题就是，接口返回的数据中不仅有name,value,children三个字段，我把官网例子中的数据复制下来，又多加了两个字段，想获取其他字段一直没成功，半天时间也没解决问题。 还让后台写接口的人把数据全返回到value中，返回成数组。，后来去掉包裹字段名的双引号后就好了。。。对自己也是无语了