Sankey图初体验 - 水星的随笔

Sankey图初体验

2022-10-27 | 0 评论 | 0 浏览

背景

桑基图(Sankey)图，是一种呈现用户访问交互路径图。

前端数据格式

antv

[1]

const DemoSankey = () => {
  const DATA = [
    {
      source: '首次打开',
      target: '首页 UV',
      value: 160,
    },
    {
      source: '结果页',
      target: '首页 UV',
      value: 40,
    },
    {
      source: '验证页',
      target: '首页 UV',
      value: 10,
    },
    {
      source: '我的',
      target: '首页 UV',
      value: 10,
    },
    {
      source: '朋友',
      target: '首页 UV',
      value: 8,
    },
    {
      source: '其他来源',
      target: '首页 UV',
      value: 27,
    },
    {
      source: '首页 UV',
      target: '理财',
      value: 30,
    },
    {
      source: '首页 UV',
      target: '扫一扫',
      value: 40,
    },
    {
      source: '首页 UV',
      target: '服务',
      value: 35,
    },
    {
      source: '首页 UV',
      target: '蚂蚁森林',
      value: 25,
    },
    {
      source: '首页 UV',
      target: '跳失',
      value: 10,
    },
    {
      source: '首页 UV',
      target: '借呗',
      value: 30,
    },
    {
      source: '首页 UV',
      target: '花呗',
      value: 40,
    },
    {
      source: '首页 UV',
      target: '其他流向',
      value: 45,
    },
  ];

echarts

{
    source: 'a',
    target: 'a1',
    value: 5
  },
  {
    source: 'a',
    target: 'a2',
    value: 3
  },
  {
    source: 'b',
    target: 'b1',
    value: 8
  },
  {
    source: 'a',
    target: 'b1',
    value: 3
  },
  {
    source: 'b1',
    target: 'a1',
    value: 1
  },
  {
    source: 'b1',
    target: 'c',
    value: 2
  }

参考