/* * 直接搜索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 // }; }