G2 - The Grammar Of Graphics

饼图 / 玫瑰饼图

源码

<!DOCTYPE html>
                                    <html>

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

GM.Global.pixelRatio = 2;
var data = [
    {"tem":7,"city":"tokyo"},
    {"tem":4,"city":"newYork"},
    {"tem":3,"city":"berlin"}
  ];
var chart = new GM.Chart({
  id: 'c1'
});

chart.source(data, {
  tem: {
    min: 0,
    nice: false
  }
});

chart.coord('polar', {
  inner: 0
});

chart.axis(false);
chart.interval().position('city*tem').color('city');
chart.render();

</script>

</body>

</html>