G2-mobile 图表示例
源码
x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>雷达图</title>
6
    <script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.22/index.js"></script>
7
  </head>
8
  <body>
9
    <div style="width:416px;height:218px;margin:0 auto">
10
      <canvas id="c1" style="width:416px;height:218px;"></canvas>
11
    </div>
12
    <script>
13
      GM.Global.pixelRatio = 2;
14
      var data = [
15
        {name: '张飞',props: '智力', value: 65},
16
        {name: '张飞',props: '武力', value: 97},
17
        {name: '张飞',props: '政治', value: 50},
18
        {name: '张飞',props: '统帅', value: 92},
19
        {name: '张飞',props: '忠诚', value: 100},
20
        {name: '关羽',props: '智力', value: 80},
21
        {name: '关羽',props: '武力', value: 94},
22
        {name: '关羽',props: '政治', value: 70},
23
        {name: '关羽',props: '统帅', value: 95},
24
        {name: '关羽',props: '忠诚', value: 99}
25
      ];
26
      var chart = new GM.Chart({
27
        id: 'c1'
28
      });
29
      chart.coord('polar');
30
      chart.source(data, {
31
        value: {
32
          min: 0,
33
          tickInterval: 20
34
        }
35
      });
36
      //配置刻度文字大小,供PC端显示用(移动端可以使用默认值20px)
37
      chart.axis('props', {
38
        label: {
39
          fontSize: 14
40
        },
41
        line: null
42
      });
43
      chart.axis('value', {
44
        label: {
45
          fontSize: 14
46
        }
47
      });
48
      chart.line().position('props*value').color('name');
49
      chart.render();
50
    </script>
51
  </body>
52
</html>
53

雷达图

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