页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

图形排序的使用操作、排序设置和逻辑,基本和表格组件一样,表格组件排序功能说明详见:新数据排序逻辑数据排序逻辑

由于每种图形的展示效果和业务含义都不一样,所以本文主要是介绍,相对于表格组件,图形的排序功能有哪些区别和使用注意事项。

...

先用一个简单的图形排序示例展示排序功能,方便理解下文的排序逻辑。详细的排序操作说明详见:新数据排序逻辑数据排序逻辑

比如要按合同金额降序查看各行业的合同签约情况,此时在 合同金额 字段上设置 排序>组内降序,即可得到所需效果,设置方式如下图所示:

...

2、漏斗图本身已隐含排序效果,在 大小 上设置的排序,实际看不出排序变化。

3、指标拆解树,当前版本在字段上并未开放排序入口,指标拆解树的排序本身是各个维度按指标值进行排序,需等未来 

3、桑基图,当数据较多时,在字段上设置的排序,可能会看不出数据顺序变化,如下图所示:

原因是从数据层按排序设置取回数据后,前端渲染时ECharts会自动计算这些节点的最佳位置,使得整个图表既美观又能清晰地显示数据流的方向和量级。ECharts自动优化布局大概有以下方向:

  • 节点间的连接关系:桑基图通过节点间的链接数量来确定各个节点的相对位置。
  • 链接权重的影响:每个链接都有一个权重值(通常代表流量或容量),这个值会影响链接线的粗细以及布局优化时的考量。较大的权重可能会使得相关联的节点更靠近中心,以减少高流量路径上的交叉,从而提高图表的可读性。
  • 最小化交叉:自动布局算法尝试最小化节点间链接的交叉,以保持图表清晰易读。这意味着具有更多连接或者更强连接(即更高的权重)的节点可能会被放置在更有利的位置上,以减少不必要的连线交叉。

如ECharts判断不需要优化,则按照字段数据排序顺序直接展示。

Image Added

4、指标拆解树,当前版本在字段上并未开放排序入口,指标拆解树的排序本身是各个维度按指标值进行排序,需等未来 按其他字段值排序 的功能上线后,再开放排序入口。

图形排序场景示例

...

此时X轴刻度标签的顺序和颜色块的顺序,是两个相互独立的区域,排序不相互影响。

新旧版本图形排序升级影响
新旧版本图形排序升级影响
新旧版本图形排序升级影响

2025年06月01日以前的版本(下文简称旧版本)和 2025年06月01日以后的V11版本(下文简称新版本)排序升级对比。

...