應用場景
用流動關系圖來映射品牌之間的有效換機數量,從而幫助運營對手機品牌的行情做分析和預測。
- 圖形說明
- 一期:圖形中間為分析主品牌;左側為流入品牌,曲線粗細=換機數大小(流入量);右側為流向品牌信息,曲線粗細=換機數大小(流出量);
- 二期:為降低信息復雜度,中間品牌支持切換為單個品牌(觀察品牌)。
最終實現效果如下圖所示:
-
一期 展示品牌過多,線條過密,信息復雜度較高
-
二期 中間品牌支持切換為單個品牌增加對照品牌篩選
實現
- 確定使用的基本圖表類型及數據格式:使用桑基圖,數據格式編碼為節點列表和邊列表。
- 確定節點和邊的樣式、交互效果:不同品牌的節點和邊需要明顯的顏色區分;鼠標hover到邊上時顯示對應的品牌流向關系和有效換機數量。
- 中間品牌支持切換為單個品牌(觀察品牌)。
- 支持觀察品牌兩邊的顏色與兩側對照品牌顏色一致。
- 支持鼠標hover到中間品牌時,單獨查看其中一個對照品牌與觀察品牌的流動關系,其他品牌圖形信息置灰。
問題及解決方案
-
后臺返回的brand_flow_relation的數據格式如下圖所示:
- 為了更容易看清后續的處理邏輯,在這里先給出主要用到的變量類型定義:
type brandType = { [index: string]: Array<number> } type brand_flow_relationType = { [index: string]: { brand_in: brandType, brand_out: brandType } } type nodesType = Array<{ name: string, key?: string, depth?: number, itemStyle?: {[index: string]: string | number, opacity?: number}, label?: {[index: string]: string | number}, emphasis?: {[index: string]: string | number}, tooltip?: {[index: string]: string | number}, }> | Array<string> type linksType = Array<{ source: string, target: string, value: Array<number> | number, valueShow?: number, lineStyle? : {[index: string]: string | number, opacity?: number}, emphasis?: {[index: string]: string | number}, }>
問題一:流入、中間、流出的品牌存在同名情況,而ECharts桑基圖只支持有向無環圖。
展示的品牌流動關系需要明確分為三列:流入品牌、中間品牌和流出品牌,而這三列存在名稱重復的情況,即需要查看品牌A流入/流出品牌A自身(持機)的數量,然而根據series-sankey.links的配置規則,桑基圖只支持有向無環圖,“自身流向自身”顯然是有環的,因此不支持直接輸入所有流向關系。
思路:在數據處理階段,將流入、中間、流出的節點和表示邊的相應兩端節點名稱均加以特定標記處理(如針對名稱為A的節點,流入、中間、流出分別處理為:A(流入)、A、A(流出)),目的是讓ECharts將這些節點都識別為唯一的;在實際的展示和交互上,再將對應標記去掉,還原實際名稱。
方案:這里可以簡單的用“加空格”處理做區分,在還原時簡單地“去掉空格”,比較省事。
-
相關代碼片段(節點、邊初始化處理,重點看注釋):
// 節點初始化處理,從中間節點入手 let nodes: nodesType = [] if (brand_flow_relation && Object.keys(brand_flow_relation).length) { const centerNodes: Array<string> = Object.keys(brand_flow_relation) let brandInNodes: Array<string> = [] let brandOutNodes: Array<string> = [] centerNodes.forEach(cNode => { brandInNodes = [...brandInNodes, ...Object.keys(brand_flow_relation[cNode].brand_in)] brandOutNodes = [...brandOutNodes, ...Object.keys(brand_flow_relation[cNode].brand_out)] }) nodes = [ ...brandInNodes.map(name => `${name} `), // 流入結點名稱加1個空格 ...centerNodes, // 中間結點不加空格 ...brandOutNodes.map(name => `${name} `) // 流出結點名稱加2個空格 ] // 節點去重 nodes = [...new Set(nodes)] // 節點數據統一處理成ECharts規范格式 nodes = nodes.map(_ => ({ name: _ })) } // 邊初始化處理 const links: linksType = Object.entries(brand_flow_relation).reduce((acc, [k, v]) => { const brandIns = Object.entries(v.brand_in).map(([key, val]) => { return { source: `${key} `, // 流入節點 target: k, // 中間節點 value: val } }) const brandOuts = Object.entries(v.brand_out).map(([key, val]) => { return { source: k, // 中間節點 target: `${key} `, // 流出節點 value: val } }) return [...acc, ...brandIns, ...brandOuts] }, [])
生成的配置項見# sankeyOptionExample1.js
-
腦洞成果:
問題二:位于不同列的同品牌節點顏色需保持一致。
然而基于問題1的解決方案,對所有節點加入特定標記處理后,ECharts已將所有節點識別為互不關聯的不同節點,因此均會會默認按不同節點來處理。
- 思路:由于各品牌名稱均為大類,即不存在名稱重合度較高(如iPhone7、iPhone8)的情況,因此問題一的“加空格”處理方式仍然可行;否則需要結合實際情況做更復雜的處理。此時只需要將節點名稱還原出原名稱作為一個新字段作為“同名標識”,從調色盤顏色列表給不同的“同名標識”手動分配顏色。
- 方案:“去掉空格”,取出節點的“同名標識”key,根據不同key給節點分配不同顏色。
- 相關代碼片段:
生成的配置項見# sankeyOptionExample2.jsconst colors: Array<string> = [] // ['#3583FF', '#FB7962', '#A5D33E', ...] let nodeKeys: Array<string> = [] // 節點key(“同名標識”)列表 nodes.forEach(elm => { const trimedElmName = elm.name.trim() // 取key nodeKeys.push(trimedElmName) if (elm.name.startsWith(trimedElmName)) { elm.key = trimedElmName // 節點保存對應的key } }) nodeKeys = [...new Set(nodeKeys)] // 去重 const nodeKeyColorMap: {[index: string]: string} = {} // key-顏色映射表 nodeKeys.forEach((key, index) => { nodeKeyColorMap[key] = colors[index % colors.length] }) // 設置節點顏色 nodes = nodes.map(node => ({ ...node, itemStyle: { color: nodeKeyColorMap[node.key], } }))
-
腦洞成果:
問題三:中間節點為單一節點時,邊的顏色配置問題。
需要支持觀察品牌兩邊的顏色與兩側對照品牌顏色一致。
而根據series-sankey.lineStyle的配置,lineStyle.color僅支持設置'source'或者'target'特殊值,或者一個單獨的顏色值如'#314656',那么如果僅在外層lineStyle設置color: 'source'或'target',會導致有一側的所有邊顏色為單一顏色,如下圖所示。
- 思路:links是否支持對每個子項單獨設置lineStyle?支持的值選項是否與外層一致?答案是肯定的。關鍵點在于流出邊的source均為中間節點,此時只需處理這部分的邊,將其lineStyle.color的值調換為'target'即可。
- 方案:去掉外部統一的lineStyle配置項,只在links內部處理。
- 相關代碼片段:
生成的配置項見sankeyOptionExample3-2.jslinks = links.map(link => { const ret = { ...link, lineStyle: { color: 'source', } } if (link.source === centerNode) { ret.lineStyle.color = 'target' } return ret }
-
腦洞成果:
問題四:數據量級差異過大導致的交互體驗問題。
在二期改造中,中間節點固定為一個時,放大了一個因為數據量級差異過大導致的交互體驗問題:其中一邊的線條過細且較密,交互區域過小且容易與其他邊互相影響,如下圖所示。
由于存在數據量級相差至少十倍的情況,導致部分線條過細
經對多組數據的觀察,發現出現這種情況的原因是某些品牌的流入/流出其中一邊的數據量級普遍是另一邊的數十上百倍,邊的粗細問題也因按比例渲染而受量級影響。
- 思路:(1)首先想到的是在基于“單邊數據較均勻(例如相差小于10倍),且其中一邊的量級普遍與另一邊相差一個相對定值”的前提下,可以考慮取兩邊各自的中位數,取其倍數,將量級小的一邊乘以倍數處理;但與后臺確認此前提不能確保成立,此方案廢棄。
(2)最終約定由后臺做歸一化處理,將原數據和歸一化后的數據一起返回給前端。 - 方案:取歸一化的值用于圖表渲染,增加一個字段保存實際值用于交互展示。
- 相關代碼片段:
生成的配置項見sankeyOptionExample4-2.js// 給links加入額外屬性valueShow links = links.map(link => ({ ...link, value: link.value[1], // 歸一化后的值,用于渲染圖表 valueShow: link.value[0], // 真實值,用于交互展示 })) // tooltip設置 tooltip: { trigger: 'item', triggerOn: 'mousemove', formatter: (params) => { const { name, data } = params return data.name ? data.name.trim() : `${data.source.trim()} --> ${data.target.trim()} : ${data.valueShow}` } },
-
腦洞成果:
問題五:ECharts配置不支持鼠標hover到一個節點時,指定特定的相鄰邊高亮或置灰。
需要支持鼠標hover到中間品牌時,單獨查看其中一個對照品牌與中間品牌的流動關系,其他品牌信息置灰。
而ECharts4.x開始支持的focusNodeAdjacency屬性只支持批量設定相鄰的一側或所有邊、節點的高亮,無法單獨指定,如下圖所示。
focusNodeAdjacency: "inEdges"("outEdges"效果類似)
focusNodeAdjacency: "allEdges"
- 思路:利用元素透明度等配置項模擬置灰效果;指定對照節點的名稱和流入、流出中間節點的值額外保存為中間節點的內容,用于鼠標hover展示。
- 方案:實現過程中發現手動設定透明度定值無法做到與focusNodeAdjacency屬性的置灰效果一致,從focusNodeAdjacency屬性入手閱讀ECharts源碼發現,需要一條公式計算透明度。
- 相關代碼片段:
生成的配置項見sankeyOptionExample5.js/* 模擬置灰效果 */ // centerNode: 中間節點,sideNode: 指定高亮節點 nodes = nodes.map(node => { const ret = { ...node, itemStyle: { opacity: node.name === centerNode || (sideNode === '無' || node.key === sideNode) ? 1 : .1 } } if (node.name === centerNode) { const flowInData = links.find(link => link.source.startsWith(sideNode) && link.target === centerNode) if (flowInData) { flowInData.valueShow = flowInData.value.length > 0 && flowInData.value[0] ret.flowInData = flowInData // 保存流入中間節點的關系 } const flowOutData = links.find(link => link.target.startsWith(sideNode) && link.source === centerNode) if (flowOutData) { flowOutData.valueShow = flowOutData.value.length > 0 && flowOutData.value[0] ret.flowOutData = flowOutData // 保存從中間節點流出的關系 } } return ret }) links = links.map(link => { const ret = { ...link, value: link.value[1], valueShow: link.value[0], lineStyle: { color: 'source', curveness: 0.6, opacity: .2 } } if (link.source === centerNode) { ret.lineStyle.color = 'target' } if (sideNode === '無') return ret const isSameNode = sideNode === centerNode const isDiffCompare = !isSameNode && !(link.source.startsWith(sideNode) || link.target.startsWith(sideNode)) const isSameCompare = isSameNode && !(link.source.startsWith(sideNode) && link.target.startsWith(sideNode)) if (isDiffCompare || isSameCompare) { // 不滿足選中品牌條件關系時 /* * 此計算規則參考了ECharts源碼中的focusNodeAdjacency配置項, * 詳見src/chart/sankey/SankeyView.js中的fadeOutItem函數 */ ret.lineStyle.opacity *= .1 } return ret }) /* 鼠標hover展示配置 */ tooltip: { trigger: 'item', triggerOn: 'mousemove', formatter: (params) => { const { name, data } = params if (name === centerNode) { let ret = name.trim() const { flowInData, flowOutData } = data if (flowInData && Object.keys(flowInData).length) { ret += `<br />${flowInData.source.trim()} --> ${flowInData.target.trim()} : ${flowInData.valueShow}` } if (flowOutData && Object.keys(flowOutData).length) { ret += `<br />${flowOutData.source.trim()} --> ${flowOutData.target.trim()} : ${flowOutData.valueShow}` } return ret } return data.name ? data.name.trim() : `${data.source.trim()} --> ${data.target.trim()} : ${data.valueShow}` } },
-
腦洞成果:
效果樣例
以上生成的配置項均可直接粘貼在https://echarts.apache.org/examples/zh/editor.html?c=line-simple查看效果。