国产精品女视频一区二区,在桌下含她的花蒂和舌头h视频,男人把j伸进女人的p免费

應用場景

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

圖形說明

一期：圖形中間為分析主品牌；左側為流入品牌，曲線粗細=換機數大小（流入量）；右側為流向品牌信息，曲線粗細=換機數大小（流出量）；

二期：為降低信息復雜度，中間品牌支持切換為單個品牌（觀察品牌）。

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

一期

展示品牌過多，線條過密，信息復雜度較高
二期

中間品牌支持切換為單個品牌

增加對照品牌篩選

實現

確定使用的基本圖表類型及數據格式：使用桑基圖，數據格式編碼為節點列表和邊列表。

確定節點和邊的樣式、交互效果：不同品牌的節點和邊需要明顯的顏色區分；鼠標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查看效果。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

ECharts繪圖解決方案——流動關系圖（桑基圖）

ECharts繪圖解決方案——流動關系圖（桑基圖）

應用場景

實現

問題及解決方案

問題一：流入、中間、流出的品牌存在同名情況，而ECharts桑基圖只支持有向無環圖。

問題二：位于不同列的同品牌節點顏色需保持一致。

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

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

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

效果樣例

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

ECharts繪圖解決方案——流動關系圖（桑基圖）

應用場景

實現

問題及解決方案

問題一：流入、中間、流出的品牌存在同名情況，而ECharts桑基圖只支持有向無環圖。

問題二：位于不同列的同品牌節點顏色需保持一致。

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

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

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

效果樣例

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频