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
      $('#c1').append("<button id='restore'>还原</button>");
13
      $('#c1').append("<button id='tl'>tl</button>");
14
      $('#c1').append("<button id='lc'>lc</button>");
15
      $('#c1').append("<button id='bl'>bl</button>");
16
      $('#c1').append("<button id='cc'>cc</button>");
17
      $('#c1').append("<button id='tc'>tc</button>");
18
      $('#c1').append("<button id='tr'>tr</button>");
19
      $('#c1').append("<button id='rc'>rc</button>");
20
      $('#c1').append("<button id='br'>br</button>");
21
      $('#c1').append("<button id='bc'>bc</button>");
22
      $('#c1').append("<button id='autoZoom'>autoZoom</button>");
23
      $('#c1').append("<button id='autoSize'>autoSize</button>");
24
      var Matrix = G6.Matrix.Matrix3;
25
      var tl = $('#tl');
26
      var lc = $('#lc');
27
      var bl = $('#bl');
28
      var cc = $('#cc');
29
      var tc = $('#tc');
30
      var tr = $('#tr');
31
      var rc = $('#rc');
32
      var br = $('#br');
33
      var bc = $('#bc');
34
      var autoZoom = $('#autoZoom');
35
      var autoSize = $('#autoSize');
36
      var restore = $('#restore');
37
      var net = createNet();
38
      autoZoom.on('click', function(){
39
        net.destroy();
40
        net = createNet('autoZoom');
41
      });
42
      autoSize.on('click', function(){
43
        net.destroy();
44
        net = createNet('autoSize');
45
      });
46
      tl.on('click', function(){
47
        net.destroy();
48
        net = createNet('tl');
49
      });
50
      lc.on('click', function(){
51
        net.destroy();
52
        net = createNet('lc');
53
      });
54
      bl.on('click', function(){
55
        net.destroy();
56
        net = createNet('bl');
57
      });
58
      cc.on('click', function(){
59
        net.destroy();
60
        net = createNet('cc');
61
      });
62
      tc.on('click', function(){
63
        net.destroy();
64
        net = createNet('tc');
65
      });
66
      tr.on('click', function(){
67
        net.destroy();
68
        net = createNet('tr');
69
      });
70
      rc.on('click', function(){
71
        net.destroy();
72
        net = createNet('rc');
73
      });
74
      br.on('click', function(){
75
        net.destroy();
76
        net = createNet('br');
77
      });
78
      bc.on('click', function(){
79
        net.destroy();
80
        net = createNet('bc');
81
      });
82
      restore.on('click', function(){
83
        net.destroy();
84
        net = createNet();
85
      });
86
      function createNet(fitView){
87
        // 第三步：设置数据
88
        var data = {
89
          "nodes": [
90
            {
91
              "x": 100,
92
              "y": 130,
93
              "id": "node1"
94
            },
95
            {
96
              "x": 230,
97
              "y": 130,
98
              "id": "node2"
99
            }
100
          ],
101
          "edges": [
102
            {
103
              "source": "node1",
104
              "id": "edge1",
105
              "target": "node2"
106
            }
107
          ]
108
        };
109
        // 第四步：配置G6画布
110
        var net = new G6.Net({
111
          id: 'c1', // 容器ID
112
          fitView: fitView,
113
          width: 430,    // 画布宽
114
          height: 430    // 画布高
115
        });
116
        // 第五步：载入数据
117
        net.source(data.nodes, data.edges);
118
        // 第六步：渲染关系图
119
        net.render();
120
        return net;
121
      }
122
    </script>
123
  </body>
124
</html>
125
​

视口自适应