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中,返回成数组。,后来去掉包裹字段名的双引号后就好了。。。对自己也是无语了