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 = [
  {name: 'Microsoft Internet Explorer', value: 56.33 },
  {name: 'Chrome', value: 24.03},
  {name: 'Firefox', value: 10.38},
  {name: 'Safari',  value: 4.77},
  {name: 'Opera', value: 0.91},
  {name: 'Proprietary or Undetectable', value: 0.2}
];
var Stat = G2.Stat;
var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 450
});
chart.source(data);

// 重要：绘制饼图时，必须声明 theta 坐标系
chart.coord('theta', {
  radius: 0.8 // 设置饼图的大小
});
chart.legend('name', {
  position: 'bottom',
  itemWrap: true,
  formatter: function(val) {
    for(var i = 0, len = data.length; i < len; i++) {
      var obj = data[i];
      if (obj.name === val) {
        return val + ': ' + obj.value + '%';
      }
    }
  }
});
chart.tooltip({
  title: null,
  map: {
    value: 'value'
  }
});
chart.intervalStack()
  .position(Stat.summary.percent('value'))
  .color('name')
  .label('name*..percent',function(name, percent){
    percent = (percent * 100).toFixed(2) + '%';
    return name + ' ' + percent;
  });

chart.render();

// 设置默认选中
var geom = chart.getGeoms()[0]; // 获取所有的图形
var items = geom.getData(); // 获取图形对应的数据
geom.setSelected(items[1]); // 设置选中
</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;

// 重要：绘制饼图时，必须声明 theta 坐标系
      chart.coord('theta', {
        radius: 0.8 // 设置饼图的大小
      });
      chart.legend('name', {
        position: 'bottom',
        itemWrap: true,
        formatter: function(val) {
          for(var i = 0, len = data.length; i < len; i++) {
            var obj = data[i];
            if (obj.name === val) {
              return val + ': ' + obj.value + '%';
            }
          }
        }
      });
      chart.tooltip({
        title: null,
        map: {
          value: 'value'
        }
      });
      chart.intervalStack()
        .position(Stat.summary.percent('value'))
        .color('name')
        .label('name*..percent',function(name, percent){
          percent = (percent * 100).toFixed(2) + '%';
          return name + ' ' + percent;
        });

chart.render();

// 设置默认选中
      var geom = chart.getGeoms()[0]; // 获取所有的图形
      var items = geom.getData(); // 获取图形对应的数据
      geom.setSelected(items[1]); // 设置选中
    });

const MyComponent = React.createClass({
      getInitialState() {
        return {
          data: [
            {name: 'Microsoft Internet Explorer', value: 56.33 },
            {name: 'Chrome', value: 24.03},
            {name: 'Firefox', value: 10.38},
            {name: 'Safari',  value: 4.77},
            {name: 'Opera', value: 0.91},
            {name: 'Proprietary or Undetectable', value: 0.2}
          ],
          forceFit: true,
          width: 500,
          height: 450
        };
      },
      render() {
        return (
          <div>
            <Chart
              data={this.state.data}
              width={this.state.width}
              height={this.state.height}
              forceFit={this.state.forceFit} />
          </div>
        );
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script>

</body>
    </html>