應(yīng)用場(chǎng)景
用流動(dòng)關(guān)系圖來映射品牌之間的有效換機(jī)數(shù)量黔州，從而幫助運(yùn)營(yíng)對(duì)手機(jī)品牌的行情做分析和預(yù)測(cè)。
- 圖形說明
- 一期：圖形中間為分析主品牌阔籽；左側(cè)為流入品牌流妻，曲線粗細(xì)=換機(jī)數(shù)大小（流入量）笆制；右側(cè)為流向品牌信息绅这，曲線粗細(xì)=換機(jī)數(shù)大小（流出量）在辆；
- 二期：為降低信息復(fù)雜度证薇，中間品牌支持切換為單個(gè)品牌（觀察品牌）度苔。
最終實(shí)現(xiàn)效果如下圖所示：
-
一期 展示品牌過多，線條過密浑度，信息復(fù)雜度較高
-
二期 中間品牌支持切換為單個(gè)品牌增加對(duì)照品牌篩選
實(shí)現(xiàn)
- 確定使用的基本圖表類型及數(shù)據(jù)格式：使用煽芤ぃ基圖，數(shù)據(jù)格式編碼為節(jié)點(diǎn)列表和邊列表箩张。
- 確定節(jié)點(diǎn)和邊的樣式甩骏、交互效果：不同品牌的節(jié)點(diǎn)和邊需要明顯的顏色區(qū)分；鼠標(biāo)hover到邊上時(shí)顯示對(duì)應(yīng)的品牌流向關(guān)系和有效換機(jī)數(shù)量先慷。
- 中間品牌支持切換為單個(gè)品牌（觀察品牌）饮笛。
- 支持觀察品牌兩邊的顏色與兩側(cè)對(duì)照品牌顏色一致。
- 支持鼠標(biāo)hover到中間品牌時(shí)论熙，單獨(dú)查看其中一個(gè)對(duì)照品牌與觀察品牌的流動(dòng)關(guān)系缎浇，其他品牌圖形信息置灰。
問題及解決方案
-
后臺(tái)返回的brand_flow_relation的數(shù)據(jù)格式如下圖所示：
- 為了更容易看清后續(xù)的處理邏輯赴肚，在這里先給出主要用到的變量類型定義：
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桑基圖只支持有向無環(huán)圖刊愚。
展示的品牌流動(dòng)關(guān)系需要明確分為三列：流入品牌踊跟、中間品牌和流出品牌，而這三列存在名稱重復(fù)的情況鸥诽，即需要查看品牌A流入/流出品牌A自身（持機(jī)）的數(shù)量商玫，然而根據(jù)series-sankey.links的配置規(guī)則，赡到瑁基圖只支持有向無環(huán)圖拳昌，“自身流向自身”顯然是有環(huán)的，因此不支持直接輸入所有流向關(guān)系钠龙。
思路：在數(shù)據(jù)處理階段炬藤，將流入、中間碴里、流出的節(jié)點(diǎn)和表示邊的相應(yīng)兩端節(jié)點(diǎn)名稱均加以特定標(biāo)記處理（如針對(duì)名稱為A的節(jié)點(diǎn)沈矿，流入、中間咬腋、流出分別處理為：A(流入)羹膳、A、A(流出)）根竿，目的是讓ECharts將這些節(jié)點(diǎn)都識(shí)別為唯一的陵像；在實(shí)際的展示和交互上就珠，再將對(duì)應(yīng)標(biāo)記去掉，還原實(shí)際名稱蠢壹。
方案：這里可以簡(jiǎn)單的用“加空格”處理做區(qū)分嗓违，在還原時(shí)簡(jiǎn)單地“去掉空格”，比較省事图贸。
-
相關(guān)代碼片段（節(jié)點(diǎn)蹂季、邊初始化處理，重點(diǎn)看注釋）：
// 節(jié)點(diǎn)初始化處理疏日，從中間節(jié)點(diǎn)入手 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} `), // 流入結(jié)點(diǎn)名稱加1個(gè)空格 ...centerNodes, // 中間結(jié)點(diǎn)不加空格 ...brandOutNodes.map(name => `${name} `) // 流出結(jié)點(diǎn)名稱加2個(gè)空格 ] // 節(jié)點(diǎn)去重 nodes = [...new Set(nodes)] // 節(jié)點(diǎn)數(shù)據(jù)統(tǒng)一處理成ECharts規(guī)范格式 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} `, // 流入節(jié)點(diǎn) target: k, // 中間節(jié)點(diǎn) value: val } }) const brandOuts = Object.entries(v.brand_out).map(([key, val]) => { return { source: k, // 中間節(jié)點(diǎn) target: `${key} `, // 流出節(jié)點(diǎn) value: val } }) return [...acc, ...brandIns, ...brandOuts] }, [])生成的配置項(xiàng)見# sankeyOptionExample1.js
-
腦洞成果：
問題二：位于不同列的同品牌節(jié)點(diǎn)顏色需保持一致偿洁。
然而基于問題1的解決方案，對(duì)所有節(jié)點(diǎn)加入特定標(biāo)記處理后沟优，ECharts已將所有節(jié)點(diǎn)識(shí)別為互不關(guān)聯(lián)的不同節(jié)點(diǎn)涕滋，因此均會(huì)會(huì)默認(rèn)按不同節(jié)點(diǎn)來處理。
- 思路：由于各品牌名稱均為大類挠阁，即不存在名稱重合度較高（如iPhone7宾肺、iPhone8）的情況，因此問題一的“加空格”處理方式仍然可行侵俗；否則需要結(jié)合實(shí)際情況做更復(fù)雜的處理锨用。此時(shí)只需要將節(jié)點(diǎn)名稱還原出原名稱作為一個(gè)新字段作為“同名標(biāo)識(shí)”，從調(diào)色盤顏色列表給不同的“同名標(biāo)識(shí)”手動(dòng)分配顏色隘谣。
- 方案：“去掉空格”增拥，取出節(jié)點(diǎn)的“同名標(biāo)識(shí)”key，根據(jù)不同key給節(jié)點(diǎn)分配不同顏色寻歧。
- 相關(guān)代碼片段：
生成的配置項(xiàng)見# sankeyOptionExample2.jsconst colors: Array<string> = [] // ['#3583FF', '#FB7962', '#A5D33E', ...] let nodeKeys: Array<string> = [] // 節(jié)點(diǎn)key（“同名標(biāo)識(shí)”）列表 nodes.forEach(elm => { const trimedElmName = elm.name.trim() // 取key nodeKeys.push(trimedElmName) if (elm.name.startsWith(trimedElmName)) { elm.key = trimedElmName // 節(jié)點(diǎn)保存對(duì)應(yīng)的key } }) nodeKeys = [...new Set(nodeKeys)] // 去重 const nodeKeyColorMap: {[index: string]: string} = {} // key-顏色映射表 nodeKeys.forEach((key, index) => { nodeKeyColorMap[key] = colors[index % colors.length] }) // 設(shè)置節(jié)點(diǎn)顏色 nodes = nodes.map(node => ({ ...node, itemStyle: { color: nodeKeyColorMap[node.key], } })) -
腦洞成果：
問題三：中間節(jié)點(diǎn)為單一節(jié)點(diǎn)時(shí)掌栅，邊的顏色配置問題。
需要支持觀察品牌兩邊的顏色與兩側(cè)對(duì)照品牌顏色一致码泛。
而根據(jù)series-sankey.lineStyle的配置猾封，lineStyle.color僅支持設(shè)置'source'或者'target'特殊值，或者一個(gè)單獨(dú)的顏色值如'#314656'弟晚，那么如果僅在外層lineStyle設(shè)置color: 'source'或'target'忘衍，會(huì)導(dǎo)致有一側(cè)的所有邊顏色為單一顏色，如下圖所示卿城。
- 思路：links是否支持對(duì)每個(gè)子項(xiàng)單獨(dú)設(shè)置lineStyle枚钓？支持的值選項(xiàng)是否與外層一致？答案是肯定的瑟押。關(guān)鍵點(diǎn)在于流出邊的source均為中間節(jié)點(diǎn)搀捷，此時(shí)只需處理這部分的邊，將其lineStyle.color的值調(diào)換為'target'即可。
- 方案：去掉外部統(tǒng)一的lineStyle配置項(xiàng)嫩舟，只在links內(nèi)部處理氢烘。
- 相關(guān)代碼片段：
生成的配置項(xiàng)見sankeyOptionExample3-2.jslinks = links.map(link => { const ret = { ...link, lineStyle: { color: 'source', } } if (link.source === centerNode) { ret.lineStyle.color = 'target' } return ret } -
腦洞成果：
問題四：數(shù)據(jù)量級(jí)差異過大導(dǎo)致的交互體驗(yàn)問題。
在二期改造中家厌，中間節(jié)點(diǎn)固定為一個(gè)時(shí)播玖，放大了一個(gè)因?yàn)閿?shù)據(jù)量級(jí)差異過大導(dǎo)致的交互體驗(yàn)問題：其中一邊的線條過細(xì)且較密，交互區(qū)域過小且容易與其他邊互相影響饭于，如下圖所示蜀踏。
由于存在數(shù)據(jù)量級(jí)相差至少十倍的情況，導(dǎo)致部分線條過細(xì)
經(jīng)對(duì)多組數(shù)據(jù)的觀察掰吕，發(fā)現(xiàn)出現(xiàn)這種情況的原因是某些品牌的流入/流出其中一邊的數(shù)據(jù)量級(jí)普遍是另一邊的數(shù)十上百倍果覆，邊的粗細(xì)問題也因按比例渲染而受量級(jí)影響。
- 思路：(1)首先想到的是在基于“單邊數(shù)據(jù)較均勻（例如相差小于10倍）殖熟，且其中一邊的量級(jí)普遍與另一邊相差一個(gè)相對(duì)定值”的前提下局待，可以考慮取兩邊各自的中位數(shù)，取其倍數(shù)菱属，將量級(jí)小的一邊乘以倍數(shù)處理钳榨；但與后臺(tái)確認(rèn)此前提不能確保成立，此方案廢棄纽门。
(2)最終約定由后臺(tái)做歸一化處理重绷，將原數(shù)據(jù)和歸一化后的數(shù)據(jù)一起返回給前端。 - 方案：取歸一化的值用于圖表渲染膜毁，增加一個(gè)字段保存實(shí)際值用于交互展示。
- 相關(guān)代碼片段：
生成的配置項(xiàng)見sankeyOptionExample4-2.js// 給links加入額外屬性valueShow links = links.map(link => ({ ...link, value: link.value[1], // 歸一化后的值愤钾，用于渲染圖表 valueShow: link.value[0], // 真實(shí)值瘟滨，用于交互展示 })) // tooltip設(shè)置 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配置不支持鼠標(biāo)hover到一個(gè)節(jié)點(diǎn)時(shí)，指定特定的相鄰邊高亮或置灰能颁。
需要支持鼠標(biāo)hover到中間品牌時(shí)杂瘸，單獨(dú)查看其中一個(gè)對(duì)照品牌與中間品牌的流動(dòng)關(guān)系，其他品牌信息置灰伙菊。
而ECharts4.x開始支持的focusNodeAdjacency屬性只支持批量設(shè)定相鄰的一側(cè)或所有邊败玉、節(jié)點(diǎn)的高亮，無法單獨(dú)指定镜硕，如下圖所示运翼。
focusNodeAdjacency: "inEdges"（"outEdges"效果類似）
focusNodeAdjacency: "allEdges"
- 思路：利用元素透明度等配置項(xiàng)模擬置灰效果；指定對(duì)照節(jié)點(diǎn)的名稱和流入兴枯、流出中間節(jié)點(diǎn)的值額外保存為中間節(jié)點(diǎn)的內(nèi)容血淌，用于鼠標(biāo)hover展示。
- 方案：實(shí)現(xiàn)過程中發(fā)現(xiàn)手動(dòng)設(shè)定透明度定值無法做到與focusNodeAdjacency屬性的置灰效果一致，從focusNodeAdjacency屬性入手閱讀ECharts源碼發(fā)現(xiàn)悠夯，需要一條公式計(jì)算透明度癌淮。
- 相關(guān)代碼片段：
生成的配置項(xiàng)見sankeyOptionExample5.js/* 模擬置灰效果 */ // centerNode: 中間節(jié)點(diǎn)，sideNode: 指定高亮節(jié)點(diǎn) 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 // 保存流入中間節(jié)點(diǎn)的關(guān)系 } 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 // 保存從中間節(jié)點(diǎn)流出的關(guān)系 } } 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) { // 不滿足選中品牌條件關(guān)系時(shí) /* * 此計(jì)算規(guī)則參考了ECharts源碼中的focusNodeAdjacency配置項(xiàng)沦补， * 詳見src/chart/sankey/SankeyView.js中的fadeOutItem函數(shù) */ ret.lineStyle.opacity *= .1 } return ret }) /* 鼠標(biāo)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}` } }, -
腦洞成果：
效果樣例
以上生成的配置項(xiàng)均可直接粘貼在https://echarts.apache.org/examples/zh/editor.html?c=line-simple查看效果乳蓄。
