ECharts繪圖解決方案——流動關系圖(桑基圖)

應用場景

用流動關系圖來映射品牌之間的有效換機數量,從而幫助運營對手機品牌的行情做分析和預測。

  • 圖形說明
    • 一期:圖形中間為分析主品牌;左側為流入品牌,曲線粗細=換機數大小(流入量);右側為流向品牌信息,曲線粗細=換機數大小(流出量);
    • 二期:為降低信息復雜度,中間品牌支持切換為單個品牌(觀察品牌)。

最終實現效果如下圖所示:

  • 一期
    展示品牌過多,線條過密,信息復雜度較高
  • 二期
    中間品牌支持切換為單個品牌

    增加對照品牌篩選

實現

  • 確定使用的基本圖表類型及數據格式:使用桑基圖,數據格式編碼為節點列表和邊列表。
  • 確定節點和邊的樣式、交互效果:不同品牌的節點和邊需要明顯的顏色區分;鼠標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給節點分配不同顏色。
  • 相關代碼片段:
    const 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],
      }
    }))
    
    生成的配置項見# sankeyOptionExample2.js
  • 腦洞成果:

問題三:中間節點為單一節點時,邊的顏色配置問題。

需要支持觀察品牌兩邊的顏色與兩側對照品牌顏色一致。
而根據series-sankey.lineStyle的配置,lineStyle.color僅支持設置'source'或者'target'特殊值,或者一個單獨的顏色值如'#314656',那么如果僅在外層lineStyle設置color: 'source'或'target',會導致有一側的所有邊顏色為單一顏色,如下圖所示。

  • 思路:links是否支持對每個子項單獨設置lineStyle?支持的值選項是否與外層一致?答案是肯定的。關鍵點在于流出邊的source均為中間節點,此時只需處理這部分的邊,將其lineStyle.color的值調換為'target'即可。
  • 方案:去掉外部統一的lineStyle配置項,只在links內部處理。
  • 相關代碼片段:
    links = links.map(link => {
      const ret = {
        ...link,
        lineStyle: {
          color: 'source',
        }
      }
      if (link.source === centerNode) {
        ret.lineStyle.color = 'target'
      }
      return ret
    }
    
    生成的配置項見sankeyOptionExample3-2.js
  • 腦洞成果:

問題四:數據量級差異過大導致的交互體驗問題。

在二期改造中,中間節點固定為一個時,放大了一個因為數據量級差異過大導致的交互體驗問題:其中一邊的線條過細且較密,交互區域過小且容易與其他邊互相影響,如下圖所示。


由于存在數據量級相差至少十倍的情況,導致部分線條過細

經對多組數據的觀察,發現出現這種情況的原因是某些品牌的流入/流出其中一邊的數據量級普遍是另一邊的數十上百倍,邊的粗細問題也因按比例渲染而受量級影響。

  • 思路:(1)首先想到的是在基于“單邊數據較均勻(例如相差小于10倍),且其中一邊的量級普遍與另一邊相差一個相對定值”的前提下,可以考慮取兩邊各自的中位數,取其倍數,將量級小的一邊乘以倍數處理;但與后臺確認此前提不能確保成立,此方案廢棄。
    (2)最終約定由后臺做歸一化處理,將原數據和歸一化后的數據一起返回給前端。
  • 方案:取歸一化的值用于圖表渲染,增加一個字段保存實際值用于交互展示。
  • 相關代碼片段:
    // 給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}`
      }
    },
    
    生成的配置項見sankeyOptionExample4-2.js
  • 腦洞成果:

問題五:ECharts配置不支持鼠標hover到一個節點時,指定特定的相鄰邊高亮或置灰。

需要支持鼠標hover到中間品牌時,單獨查看其中一個對照品牌與中間品牌的流動關系,其他品牌信息置灰。
而ECharts4.x開始支持的focusNodeAdjacency屬性只支持批量設定相鄰的一側或所有邊、節點的高亮,無法單獨指定,如下圖所示。

focusNodeAdjacency: "inEdges"("outEdges"效果類似)

focusNodeAdjacency: "allEdges"

  • 思路:利用元素透明度等配置項模擬置灰效果;指定對照節點名稱流入、流出中間節點的值額外保存為中間節點的內容,用于鼠標hover展示。
  • 方案:實現過程中發現手動設定透明度定值無法做到與focusNodeAdjacency屬性的置灰效果一致,從focusNodeAdjacency屬性入手閱讀ECharts源碼發現,需要一條公式計算透明度。
  • 相關代碼片段:
    /* 模擬置灰效果 */
    // 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}`
      }
    },
    
    生成的配置項見sankeyOptionExample5.js
  • 腦洞成果:

效果樣例

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容