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

应用场景

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

一期：图形中间为分析主品牌；左侧为流入品牌，曲线粗细=换机数大小(流入量)；右侧为流向品牌信息，曲线粗细=换机数大小(流出量)；

二期：为降低信息复杂度，中间品牌支持切换为单个品牌(观察品牌)。

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

一期

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

二期

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

[ 增加对照品牌筛选 ]实现

确定使用的基本图表类型及数据格式：使用桑基图，数据格式编码为节点列表和边列表。

确定节点和边的样式、交互效果：不同品牌的节点和边需要明显的颜色区分；鼠标hover到边上时显示对应的品牌流向关系和有效换机数量。

中间品牌支持切换为单个品牌(观察品牌)。

支持观察品牌两边的颜色与两侧对照品牌颜色一致。

支持鼠标hover到中间品牌时，单独查看其中一个对照品牌与观察品牌的流动关系，其他品牌图形信息置灰。

问题及解决方案后台返回的brand_flow_relation的数据格式如下图所示：

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

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

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

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

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

脑洞成果：

问题二：位于不同列的同品牌节点颜色需保持一致。然而基于问题1的解决方案，对所有节点加入特定标记处理后，ECharts已将所有节点识别为互不关联的不同节点，因此均会会默认按不同节点来处理。

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

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

相关代码片段：

脑洞成果：

问题三：中间节点为单一节点时，边的颜色配置问题。需要支持观察品牌两边的颜色与两侧对照品牌颜色一致。

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

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

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

相关代码片段：

脑洞成果：

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

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

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

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

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

相关代码片段：

脑洞成果：

问题五：ECharts配置不支持鼠标hover到一个节点时，指定特定的相邻边高亮或置灰。需要支持鼠标hover到中间品牌时，单独查看其中一个对照品牌与中间品牌的流动关系，其他品牌信息置灰。

而ECharts4.x开始支持的focusNodeAdjacency属性只支持批量设定相邻的一侧或所有边、节点的高亮，无法单独指定，如下图所示。

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

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

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

相关代码片段：

脑洞成果：

效果样例