G2 - 环图

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>环图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script>
  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}
  ];

  var Stat = G2.Stat;

  var chart = new G2.Chart({
    id: 'c1',
    forceFit: true,
    height: 450,
    plotCfg: {
      margin: 80
    }
  });
  chart.source(data);

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


      </body>
    </html>
          

环图

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

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>环图</title>
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js"></script>
        <script src="https://unpkg.com/g2-react@1.2.0/dist/index.js"></script>
        <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/babel">
    const Chart = createG2(chart => {
      var Stat = G2.Stat;
      // 以 year 为维度划分分面
      chart.facet(['year'], {
        margin: 50,
        facetTitle: {
          colDimTitle: {
            title: null
          },
          colTitle: {
            title: {
              fontSize: 18,
              textAlign: 'center',
              fill: '#999'
            }
          }
        }
      });
      chart.legend({
        position: 'bottom'
      });
      chart.coord('theta', {
        radius: 1,
        inner: 0.35
      });
      chart.tooltip({
        title: null
      });
      chart.intervalStack().position(Stat.summary.percent('profit'))
        .color('area')
        .label('..percent', {
          offset: -2
        })
        .style({
          lineWidth: 1
        });
      chart.render();
    });

const MyComponent = React.createClass({
      getInitialState() {
        return {
          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}
          ],
          forceFit: true,
          width: 500,
          height: 450,
          plotCfg: {
            margin: 80
          },
        };
      },
      render() {
        return (
          <div>
            <Chart
              data={this.state.data}
              width={this.state.width}
              height={this.state.height}
              plotCfg={this.state.plotCfg}
              forceFit={this.state.forceFit} />
          </div>
        );
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script>

</body>
    </html>