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
        {a: '1', b: 0.3, c: '1'},
16
        {a: '1', b: 0.3, c: '2'},
17
        {a: '1', b: 0.4, c: '3'}
18
      ];
19
      var chart = new GM.Chart({
20
        id: 'c1'
21
      });
22
      chart.source(data);
23
      chart.coord('polar', {
24
        transposed: true,
25
        inner: 0
26
      });
27
      chart.axis(false);
28
      chart.intervalStack().position('a*b').color('c');
29
      chart.render();
30
    </script>
31
  </body>
32
</html>
33
​

饼图

饼图广泛得应用在各个领域，用于表示不同分类的占比情况，通过弧度大小来对比各种分类。 了解更多