[apache/echarts]桑基图显示排序问题

2024-07-04 483 views
9
One-line summary [问题简述]

桑基图的target 如何排序?默认好想是按照value排序的

Other comments [其他信息]

image

回答

1

我如何让 最右侧的 四个按照固定的上下顺序排序?

7

series: [ { type: 'sankey', layout:'none', data: [ { name: "All", value: 7 }, { name: "a2", value: 5 },
{ name: "a1", value: 2 },
{ name: "b1", value: 4 },
{ name: "b2", value: 1 },
{ name: "c1", value: 3 },
{ name: "c2", value: 1 }
], links:[ { source: "All", target: "a1", value: 2 }, { source: "All", target: "a2", value: 5 },

            { source: "a2", target: "b1", value: 4 },
            { source: "a2", target: "b2", value: 1 },

            { source: "b1", target: "c1", value: 3},

            { source: "b1", target: "c2", value: 1}
        ],
            itemStyle: {
                normal: {
                    borderWidth: 1,
                    borderColor: '#aaa'
                }
            },
            lineStyle: {
                normal: {
                    curveness: 0.5
                }
            }
        }
    ]
5

image 如何把a1放到最下面??

7
一种解决方案

刚才碰到了类似的问题,通过修改js凑合能用,分享一下。

修改echarts.js中的两个位置,我不确定是否两个都必要,但也懒得测试了。反正我改了之后成功了。注意是在完整版js里修改,比较好找。

  1. 寻找函数 computeNodeDepths 在其中 iterations 调用前强制设置为0,大约是52086行左右。

    initializeNodeDepth(nodes, nodesByBreadth, edges, height, nodeGap);
    resolveCollisions(nodesByBreadth, nodeGap, height);
    iterations = 0 //erimus
    for (var alpha = 1; iterations > 0; iterations--) {
        // 0.99 is a experience parameter, ensure that each iterations of
        // changes as small as possible.
  2. 寻找函数 sankeyVisual 注释掉其中的排序部分,大约52302行左右。

    ecModel.eachSeriesByType('sankey', function (seriesModel) {
        var graph = seriesModel.getGraph();
        var nodes = graph.nodes;
        //erimus
        // nodes.sort(function (a, b) {
        //     return a.getLayout().value - b.getLayout().value;
        // });
  3. 两部分都设置好之后,视图就按照 dada 的列表顺序排列了(links随意)。
    左侧集数,右侧时间线,都按照顺序排列了。 image


  • 如果只下sankey的js,压缩之后220k,还行。
  • 其实我也搞不懂它怎么实现的,反正刚好就能用了。
  • 这样处理过之后颜色会有点问题,我是手动指定了data的itemlinks的line的颜色。
  • 排序其实还是挺有必要的,而且我还想要获取item位置大小,对item再增加类似graph的连线,修改item宽度等功能,都还没找到解决方法。等官方更新吧。
1

大佬分享一下呢

8

大家好,这个问题已经解决了,会在下个版本随版发布。修改后的节点是按用户给定的 series.data 中的顺序排序的,并且不会改变。谢谢大家的建议。

7

大家试用后,如有任何问题,欢迎 reopen 这个 issue.

6

好的,谢谢!

7

问下,使用最新的echart版本,还是随机排序的,这个问题还需要修改什么么?

1

@deqingli 请问,用series.data 里面的哪个选项来实现排序的功能?说明文档里没有找到。。。看到实际上4.1.0的版本已经做过enhance了。

4

并没有改好 还是按照links的value排序的

6

series.data順序一樣,但仍會因為links不同而有所變化,希望能依照data給的順序排列。

2

目前显示仍然没有按照data中给出的顺序排序。不过我发现,更改series.layoutIterations=0之后,可以按照data中的顺序正确排序。期待早日修复这个问题!

7

还是按照 value 正序排的,设置 layoutIterations=0 父节点在顶部,不能居中了。。4.4.0

9

关于这个

layoutIterations 的作用就是根据当前节点的出入边所链接的节点,不断调整当前节点的位置,以期尽可能减少边之间的相互遮盖。如果不想要调整,只希望节点按照 series.data排序,那么可以设置 layoutIterations: 0 即可。

0

还是按照 value 正序排的,设置 layoutIterations=0 父节点在顶部,不能居中了。。4.4.0

@loseyear, 可以设置节点的depth,以显示指定当前节点展示在哪一层。

5

为什么我修改为layoutIterations: 0 之后,还是不行呢?

9

layoutIterations=0

遇到了同样的问题

1

While layoutIterations=0 solves the ordering problem , it introduces another weird side effect. All the nodes become aligned to the top.

layoutIterations=1

image

layoutIterations=0

image

Has anyone found a workaround for this?