mysql 图形插件_ECharts绘图解决方案——流动关系图（桑基图）

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

应用场景

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

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

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

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

一期

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

二期

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

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

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

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

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

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

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

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

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

问题一：流入、中间、流出的品牌存在同名情况，而ECharts桑基图只支持有向无环图。展示的品牌流动关系需要明确分为三列：流入品牌、中间品牌和流出品牌ÿ