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/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <script>
$('<div style="position: absolute;width: 100px;top: 150px;left: 235px;text-align: center;color: #444;"><p>2007年总额（亿美元）</p><p style="font-size:22px;font-weight:bold;">7860</p>').appendTo('#c1');
$('<div style="position: absolute;width: 100px;top: 150px;left: 615px;text-align: center;color: #444;"><p>2011年总额（亿美元）</p><p style="font-size:22px;font-weight:bold;">7620</p>').appendTo('#c1');

var data = [
    {year:2007, area:'亚太地区', profit: 7860*0.189},
    {year:2007, area:'非洲及中东', profit: 7860*0.042},
    {year:2007, area:'拉丁美洲', profit: 7860*0.025},
    {year:2007, area:'中欧和东欧', profit: 7860*0.018},
    {year:2007, area:'西欧', profit: 7860*0.462},
    {year:2007, area:'北美', profit: 7860*0.265},
    {year:2011, area:'亚太地区', profit: 7620*0.539},
    {year:2011, area:'非洲及中东', profit: 7620*0.065},
    {year:2011, area:'拉丁美洲', profit: 7620*0.065},
    {year:2011, area:'中欧和东欧', profit: 7620*0.034},
    {year:2011, area:'西欧', profit: 7620*0.063},
    {year:2011, area:'北美', profit: 7620*0.234}
  ];

function formatter(text,item){
      var point = item.point; // 每个弧度对应的点
      var percent = point['..percent']; // ..proportion 字段由Stat.summary.proportion统计函数生成
      percent = (percent * 100).toFixed(2) + '%';
      return percent;
  }
  var Stat = G2.Stat;

var chart = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 450,
    plotCfg: {
      margin: [80, 120]
    }
  });
  chart.source(data);

// 以 year 为维度划分分面
  chart.facet(['year'], {
    margin: 50,
    facetTitle: {
      colDimTitle: {
        title: null
      },
      colTitle: {
        title: null
      }
    }
  }); 
  chart.legend('bottom');
  chart.coord('theta', {
    radius: 1,
    inner: 0.6
  });
  chart.tooltip({
    title: null
  });
  chart.intervalStack().position(Stat.summary.percent('profit'))
    .color('area')
    .label('..percent')
    .style({
      lineWidth: 1
    });
  chart.render();
</script>

</body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <script>
$('<div style="position: absolute;width: 100px;top: 150px;left: 235px;text-align: center;color: #444;"><p>2007年总额（亿美元）</p><p style="font-size:22px;font-weight:bold;">7860</p>').appendTo('#c1');
$('<div style="position: absolute;width: 100px;top: 150px;left: 615px;text-align: center;color: #444;"><p>2011年总额（亿美元）</p><p style="font-size:22px;font-weight:bold;">7620</p>').appendTo('#c1');

var chart = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 450,
    plotCfg: {
      margin: [80, 120]
    }
  });
  chart.source(data);

</body>
  </html>

var chart = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 450,
    plotCfg: {
      margin: [80, 120]
    }
  });
  chart.source(data);

环图

环图（又叫做甜甜圈图），其本质是饼图将中间区域挖空。了解更多