G6 图表示例
源码
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>扫码业务</title>
6
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
7
    <script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
8
  </head>
9
  <body>
10
    <div id="c1"></div>
11
    <script type="text/javascript">
12
      function afterDrawEdge(cfg, group, keyShape){
13
        var start = keyShape.getPoint(0);
14
        var center = keyShape.getPoint(0.5);
15
        var end = keyShape.getPoint(1);
16
        var labelPadding = 6;
17
        var labelShape;
18
        var labelBox;
19
        // 文本
20
        labelShape = group.addShape('text', {
21
          attrs: {
22
            x: center.x,
23
            y: center.y,
24
            text: cfg.label,
25
            fill: 'white',
26
            textBaseline: 'middle',
27
            textAlign: 'center'
28
          },
29
          zIndex: 4
30
        });
31
        labelBox = labelShape.getBBox();
32
        // 文本框
33
        group.addShape('rect', {
34
          attrs: {
35
            x: labelBox.minX - labelPadding,
36
            y: labelBox.minY - labelPadding,
37
            width: labelBox.maxX - labelBox.minX + 2 * labelPadding,
38
            height: labelBox.maxY - labelBox.minY + 2 * labelPadding,
39
            fill: 'black',
40
            radius: 8
41
          },
42
          zIndex: 3
43
        });
44
        // 起始点圆
45
        group.addShape('circle', {
46
          attrs: {
47
            x: start.x,
48
            y: start.y,
49
            r: 5,
50
            fill: 'black'
51
          },
52
          zIndex: 3
53
        });
54
        return keyShape;
55
      };
56
      function drawCard(cfg, group){
57
        var model = cfg.model;
58
        var width = 200;
59
        var height = 80;
60
        var upRectHeight = 50;
61
        var x = cfg.x - width/2; // 左上角x
62
        var y = cfg.y - height/2; // 左上角y
63
        var color = cfg.color;
64
        var padding = 10;
65
        var count = model.count;
66
        var keyShape;
67
        keyShape = group.addShape('rect', {
68
          attrs: {
69
            x: x,
70
            y: y,
71
            width: width,
72
            height: height,
73
            stroke: '#999',
74
            radius: 10,
75
            fill: 'white'
76
          }
77
        });
78
        group.addShape('rect', {
79
          attrs: {
80
            x: x,
81
            y: y,
82
            width: width,
83
            height: upRectHeight,
84
            fill: color,
85
            clip: keyShape
86
          }
87
        });
88
        // 标题
89
        group.addShape('text', {
90
          attrs: {
91
            x: x + padding,
92
            y: y + padding,
93
            text: cfg.label,
94
            textBaseline: 'top',
95
            textAlign: 'left',
96
            fontSize: 18,
97
            fill: 'white'
98
          }
99
        });
100
        // 请求数名
101
        group.addShape('text', {
102
          attrs: {
103
            x: x + padding,
104
            y: y + upRectHeight + padding,
105
            text: '数目：',
106
            textBaseline: 'top',
107
            textAlign: 'left',
108
            fontSize: 14,
109
            fill: 'black'
110
          }
111
        });
112
        // 请求数
113
        group.addShape('text', {
114
          attrs: {
115
            x: cfg.x + width/2 - padding,
116
            y: y + upRectHeight + padding,
117
            text: count + ' 笔',
118
            textBaseline: 'top',
119
            textAlign: 'right',
120
            fontSize: 14,
121
            fill: 'red'
122
          }
123
        });
124
        return keyShape;
125
      }
126
      // 第一步：获取数据
127
      var data = {
128
        "nodes": [
129
          {
130
            "id": "扫码请求成功数",
131
            "count": 222190,
132
            "x": 200,
133
            "y": 160,
134
            "success": true
135
          },
136
          {
137
            "id": "扫码请求数",
138
            "count": 2221902,
139
            "x": 590,
140
            "y": 160,
141
            "success": true
142
          },
143
          {
144
            "id": "请求创建交易总数",
145
            "count": 221231,
146
            "x": 580,
147
            "y": 380,
148
            "success": false
149
          }
150
        ],
151
        "edges": [
152
          {
153
            "shape": "customLine",
154
            "source": "扫码请求数",
155
            "id": "d952611b",
156
            "precent": 100,
157
            "target": "扫码请求成功数"
158
          },
159
          {
160
            "shape": "customCurve",
161
            "source": "扫码请求成功数",
162
            "id": "a893c28f",
163
            "precent": 80,
164
            "target": "请求创建交易总数",
165
            "sourceAnchor": 2,
166
            "targetAnchor": 3
167
          }
168
        ]
169
      };
170
      // 第二步：注册节点
171
      G6.registNode('customNode', {
172
        draw: function(cfg, group){
173
          return drawCard(cfg, group);
174
        }
175
      });
176
      G6.registEdge('customLine', {
177
        afterDraw: function(cfg , group, keyShape){
178
          return afterDrawEdge(cfg, group, keyShape);
179
        }
180
      }, 'line');
181
      G6.registEdge('customCurve', {
182
        afterDraw: function(cfg, group, keyShape){
183
          return afterDrawEdge(cfg, group, keyShape);
184
        }
185
      }, 'smooth');
186
      // 第三步：初始化图
187
      var net = new G6.Net({
188
        id: 'c1',            // 容器ID
189
        height: 450,         // 画布高
190
        fitView: 'autoZoom', // 自动缩放
191
      });
192
      // 第四步：数据映射
193
      net.node()
194
        .color('success', function(val){
195
        var rst;
196
        if(val){
197
          rst = '#3B89CF';
198
        }else{
199
          rst = '#F90426';
200
        }
201
        return rst;
202
      })
203
        .label('id')
204
        .shape('customNode');
205
      net.edge()
206
        .label('precent');
207
      // 第五步：载入数据
208
      net.source(data.nodes, data.edges);
209
      // 第六步：数据映射
210
      net.edge().style({
211
        stroke: 'black',
212
        lineWidth: 4,
213
        arrow: true
214
      });
215
      // 第七步：渲染关系图
216
      net.render();
217
    </script>
218
  </body>
219
</html>
220
​

扫码业务

该图展示了扫码页面之间的流量流转。该示例主要向大家展示如何利用自定义图形，制作高度定制化的流程图。（数据纯属虚构）