网络知识 娱乐 ECharts绘图解决方案——流动关系图(桑基图)

ECharts绘图解决方案——流动关系图(桑基图)

| 导语 基于实际业务场景使用ECharts的经验,总结一些通用的解决方案。

应用场景

用流动关系图来映射品牌之间的有效换机数量,从而帮助运营对手机品牌的行情做分析和预测。

图形说明 一期:图形中间为分析主品牌;左侧为流入品牌,曲线粗细=换机数大小(流入量);右侧为流向品牌信息,曲线粗细=换机数大小(流出量); 二期:为降低信息复杂度,中间品牌支持切换为单个品牌(观察品牌)。

最终实现效果如下图所示:

一期

[展示品牌过多,线条过密,信息复杂度较高]

二期 

[ 中间品牌支持切换为单个品牌 ]

[ 增加对照品牌筛选 ]

实现 确定使用的基本图表类型及数据格式:使用桑基图,数据格式编码为节点列表和边列表。 确定节点和边的样式、交互效果:不同品牌的节点和边需要明显的颜色区分;鼠标hover到边上时显示对应的品牌流向关系和有效换机数量。 中间品牌支持切换为单个品牌(观察品牌)。 支持观察品牌两边的颜色与两侧对照品牌颜色一致。 支持鼠标hover到中间品牌时,单独查看其中一个对照品牌与观察品牌的流动关系,其他品牌图形信息置灰。

问题及解决方案

后台返回的brand_flow_relation的数据格式如下图所示:

为了更容易看清后续的处理逻辑,在这里先给出主要用到的变量类型定义:

问题一:流入、中间、流出的品牌存在同名情况,而ECharts桑基图只支持有向无环图。

展示的品牌流动关系需要明确分为三列:流入品牌、中间品牌和流出品牌,而这三列存在名称重复的情况,即需要查看品牌A流入/流出品牌A自身(持机)的数量,然而根据series-sankey.links的配置规则,桑基图只支持有向无环图,“自身流向自身”显然是有环的,因此不支持直接输入所有流向关系。

思路:在数据处理阶段,将流入、中间、流出的节点和表示边的相应两端节点名称均加以特定标记处理(如针对名称为A的节点,流入、中间、流出分别处理为:A(流入)、A、A(流出)),目的是让ECharts将这些节点都识别为唯一的;在实际的展示和交互上,再将对应标记去掉,还原实际名称。

方案:这里可以简单的用“加空格”处理做区分,在还原时简单地“去掉空格”,比较省事。

相关代码片段(节点、边初始化处理,重点看注释):

生成的配置项见# sankeyOptionExample1.js

脑洞成果:

问题二:位于不同列的同品牌节点颜色需保持一致。

然而基于问题1的解决方案,对所有节点加入特定标记处理后,ECharts已将所有节点识别为互不关联的不同节点,因此均会会默认按不同节点来处理。

思路:由于各品牌名称均为大类,即不存在名称重合度较高(如iPhone7、iPhone8)的情况,因此问题一的“加空格”处理方式仍然可行;否则需要结合实际情况做更复杂的处理。此时只需要将节点名称还原出原名称作为一个新字段作为“同名标识”,从调色盘颜色列表给不同的“同名标识”手动分配颜色。

方案:“去掉空格”,取出节点的“同名标识”key,根据不同key给节点分配不同颜色。

相关代码片段:

生成的配置项见# sankeyOptionExample2.js

脑洞成果:

问题三:中间节点为单一节点时,边的颜色配置问题。

需要支持观察品牌两边的颜色与两侧对照品牌颜色一致。 而根据series-sankey.lineStyle的配置,lineStyle.color仅支持设置’source’或者’target’特殊值,或者一个单独的颜色值如’#314656’,那么如果仅在外层lineStyle设置color: ‘source’或’target’,会导致有一侧的所有边颜色为单一颜色,如下图所示。

思路:links是否支持对每个子项单独设置lineStyle?支持的值选项是否与外层一致?答案是肯定的。关键点在于流出边的source均为中间节点,此时只需处理这部分的边,将其lineStyle.color的值调换为’target’即可。

方案:去掉外部统一的lineStyle配置项,只在links内部处理。

相关代码片段:

生成的配置项见sankeyOptionExample3-2.js

脑洞成果:

问题四:数据量级差异过大导致的交互体验问题。

在二期改造中,中间节点固定为一个时,放大了一个因为数据量级差异过大导致的交互体验问题:其中一边的线条过细且较密,交互区域过小且容易与其他边互相影响,如下图所示。

[ 由于存在数据量级相差至少十倍的情况,导致部分线条过细 ]

经对多组数据的观察,发现出现这种情况的原因是某些品牌的流入/流出其中一边的数据量级普遍是另一边的数十上百倍,边的粗细问题也因按比例渲染而受量级影响。

思路:(1)首先想到的是在基于“单边数据较均匀(例如相差小于10倍),且其中一边的量级普遍与另一边相差一个相对定值”的前提下,可以考虑取两边各自的中位数,取其倍数,将量级小的一边乘以倍数处理;但与后台确认此前提不能确保成立,此方案废弃。(2)最终约定由后台做归一化处理,将原数据和归一化后的数据一起返回给前端。

方案:取归一化的值用于图表渲染,增加一个字段保存实际值用于交互展示。

相关代码片段:

生成的配置项见sankeyOptionExample4-2.js

脑洞成果:

问题五:ECharts配置不支持鼠标hover到一个节点时,指定特定的相邻边高亮或置灰。

需要支持鼠标hover到中间品牌时,单独查看其中一个对照品牌与中间品牌的流动关系,其他品牌信息置灰。 而ECharts4.x开始支持的focusNodeAdjacency属性只支持批量设定相邻的一侧或所有边、节点的高亮,无法单独指定,如下图所示。

[ focusNodeAdjacency: "inEdges"("outEdges"效果类似 ]

[ focusNodeAdjacency: "allEdges" ]

思路:利用元素透明度等配置项模拟置灰效果;指定对照节点的名称流入、流出中间节点的值额外保存为中间节点的内容,用于鼠标hover展示。

方案:实现过程中发现手动设定透明度定值无法做到与focusNodeAdjacency属性的置灰效果一致,从focusNodeAdjacency属性入手阅读ECharts源码发现,需要一条公式计算透明度。

相关代码片段:

生成的配置项见sankeyOptionExample5.js

脑洞成果:

效果样例

以上生成的配置项均可直接粘贴在https://echarts.apache.org/examples/zh/editor.html?c=line-simple查看效果。

腾讯项目经理:如何快速上手新项目?

来了!微信车载版首次公开演示

那些熟悉却说不出的设计法则