G2 - The Grammar Of Graphics

饼图 / 带平铺动画的环形饼图

源码

<!DOCTYPE html>
                                    <html>

<head>
                                        <meta charset="utf-8">
                                        <title>带平铺动画的环形饼图</title>
                                        <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
                                        
                                        <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.7/index.js "></script>
                                    </head>

GM.Global.pixelRatio = 2;
var  data = [
  {a: '1', b: 0.3, c: '1'},
  {a: '1', b: 0.3, c: '2'},
  {a: '1', b: 0.4, c: '3'}
];

var chart = new GM.Chart({
  id: 'c1'
});

chart.source(data);

chart.coord('polar', {
  transposed: true,
  inner: 0.6
});

chart.axis(false);
chart.intervalStack().position('a*b').color('c');
chart.animate().wavec();
chart.render();

</script>

</body>

</html>