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中，返回成數組。，後來去掉包裹字段名的雙引號後就好了。。。對自己也是無語了