G6 - 页面流量分析（一）

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>页面流量分析（一）</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/javascript">
// 第一步：获取数据
var data = {
  "nodes": [
    {
      "shape": "rect",
      "label": "首页",
      "keep": 90,
      "runoff": 30,
      "id": "add1174b"
    },
    {
      "shape": "rect",
      "label": "页面1",
      "keep": 70,
      "runoff": 30,
      "id": "fbc69eaa"
    },
    {
      "shape": "rect",
      "label": "页面2",
      "keep": 10,
      "runoff": 90,
      "id": "6d0df4b8"
    },
    {
      "shape": "rect",
      "label": "页面3",
      "keep": 40,
      "runoff": 60,
      "id": "fcaedf74"
    },
    {
      "shape": "rect",
      "label": "页面4",
      "keep": 1,
      "runoff": 99,
      "id": "0ce831a6"
    },
    {
      "shape": "rect",
      "label": "页面5",
      "keep": 15,
      "runoff": 85,
      "id": "46c87dc5"
    },
    {
      "shape": "rect",
      "label": "页面6",
      "keep": 1,
      "runoff": 99,
      "id": "a7ae06e1"
    },
    {
      "shape": "rect",
      "label": "页面7",
      "keep": 1,
      "runoff": 99,
      "id": "97d725aa"
    },
    {
      "shape": "rect",
      "label": "页面8",
      "keep": 1,
      "runoff": 99,
      "id": "1009d1ce"
    }
  ],
  "edges": [
    {
      "source": "add1174b",
      "target": "fbc69eaa",
      "val": 80,
      "id": "ae85ce02"
    },
    {
      "source": "add1174b",
      "target": "6d0df4b8",
      "val": 40,
      "id": "4f2a272a"
    },
    {
      "source": "add1174b",
      "target": "fcaedf74",
      "val": 47,
      "id": "e1d27d5d"
    },
    {
      "source": "fbc69eaa",
      "target": "0ce831a6",
      "val": 70,
      "id": "ebb1bb90"
    },
    {
      "source": "fbc69eaa",
      "target": "46c87dc5",
      "val": 60,
      "id": "de5483e7"
    },
    {
      "source": "fcaedf74",
      "target": "a7ae06e1",
      "val": 50,
      "id": "38631f93"
    },
    {
      "source": "6d0df4b8",
      "target": "97d725aa",
      "val": 40,
      "id": "ca7e320d"
    },
    {
      "source": "46c87dc5",
      "target": "1009d1ce",
      "val": 30,
      "id": "7dc8fe14"
    },
    {
      "source": "fbc69eaa",
      "target": "a7ae06e1",
      "val": 20,
      "id": "a0318c7b"
    }
  ]
};

// 第二步：注册图形
G6.registNode('rect', {
  // 设置锚点
  getAnchorPoints: function(){
    return [
      [1, 0.5], // 右边边的中点
      [0, 0.5] // 左边边的中点
    ];
  }
});

// 第三步：进行布局
var Layout = G6.Layout;
var margin = 60;
var height = 800 - 2 * margin;
var width = 500 - 2 * margin;
var nodes = data.nodes;
var edges = data.edges;
var layout = new Layout.Flow({
  nodes: nodes,
  edges: edges
});
nodes = layout.getNodes();
nodes.map(function(node) {
  var x = node.x * width + margin;
  var y = node.y * height + margin;
  node.x = y;
  node.y = x;
});

// 第四步：初始化图
var net = new G6.Net({
  id: "c1",            // 此处替换容器id
  height: 450,         // 此处替换高度
  fitView: 'autoZoom', // 自动缩放
});

// 第五步：载入数据
net.source(nodes, edges);

// 第六步：数据映射
net.node()
  .style(function(obj){
    var domain = 100;
    var keep = obj.keep;
    var runoff = obj.runoff;
    var keepRatio = keep/domain;
    var runoffRatio = runoff/domain;
    var attrs = {};
    if(keep && runoff){
      attrs.fill = 'l (0) 0:#00A263 ' + keepRatio + ':#00A263 ' + keepRatio + ':#E6504A';
    }
    attrs.fillOpacity = 0.4;
    return attrs;
  });
net.edge()
  .size(function(obj){
    return obj.val/100 * 6;
  })
  .shape('smooth')
  .style({
    stroke: "#00A263",
    strokeOpacity: 0.6,
    arrow: true
  });

// 第七步：添加图例
net.add('node', {
  "shape": "circle",
  "label": "留存",
  "x": 370,
  "y": 500,
  "size": 40,
  "color": "#00A263",
  "id": "2ff55156"
});

net.add('node', {
  "shape": "circle",
  "label": "流失",
  "x": 440,
  "y": 500,
  "size": 40,
  "color": "#E54E48",
  "id": "0c134755"
});

// 第八步：渲染关系图
net.render();
</script>

      </body>
    </html>
          
页面流量分析（一）
该图展示了页面之间的流量流转。该示例主要向大家展示，利用 fill 的技法，可简易的实现分层色块。