G2 图表示例
源码
g2-react
​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/as/g/datavis/g2/2.3.13/index.js"></script>
8
  </head>
9
  <body>
10
    <div id="c1"></div>
11
    <script>
12
      // 重定义 G2 的全局样式
13
      G2.Global.axis.circle.grid = {
14
        line: {
15
          stroke: '#d9d9d9',
16
          lineWidth: 1,
17
          lineDash: [0, 0]
18
        }
19
      };
20
      var data = [
21
        {name: 'Allocated Budget', Sales: 43000, Marketing: 19000, Development: 60000, 'Customer Support': 35000, 'Information Technology': 17000, Administration: 10000},
22
        {name: 'Actual Spending', Sales: 50000, Marketing: 39000, Development: 42000, 'Customer Support': 31000, 'Information Technology': 26000, Administration: 14000}
23
      ];
24
      var chart = new G2.Chart({
25
        id: 'c1',
26
        forceFit: true,
27
        height: 450,
28
        plotCfg: {
29
          margin: [20, 140, 80, 80]
30
        }
31
      });
32
      var Frame = G2.Frame;
33
      var frame = new Frame(data);
34
      frame = Frame.combinColumns(frame, ['Sales', 'Marketing', 'Development', 'Customer Support',
35
                                          'Information Technology', 'Administration'], 'value', 'categories', 'name');
36
      chart.source(frame, {
37
        'value': {
38
          min: 0,
39
          max: 65000,
40
          nice: false,
41
          tickInterval: 15000
42
        }
43
      });
44
      chart.coord('polar');
45
      chart.legend('name', {
46
        position: 'bottom'
47
      });
48
      chart.axis('categories', { // 设置坐标系栅格样式
49
        line: null
50
      });
51
      chart.axis('value',{
52
        line: {
53
          lineWidth: 2
54
        },
55
        grid: {
56
          line: {
57
            lineDash: [0, 0],
58
            lineWidth: 1
59
          },
60
          odd: {
61
            fill: '#ccc',
62
            opacity: 0.3
63
          } // 交替的背景设置，索引值为奇数的 gird
64
        }// 设置坐标系栅格样式
65
      });
66
      chart.line().position('categories*value').color('name').size(2);
67
      chart.point().position('categories*value').color('name').shape('name', ['square', 'triangle']).size(4);
68
      chart.render();
69
    </script>
70
  </body>
71
</html>
72
​

雷达图（线）

雷达又叫戴布拉图、蜘蛛网图。 了解更多