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 = [
  {value:335,type:'直达',name:'直达'},
  {value:310,type:'营销广告',name:'邮件营销'},
  {value:234,type:'营销广告',name:'联盟广告'},
  {value:135,type:'营销广告',name:'视频广告'},
  {value:1048,type:'搜索引擎',name:'百度'},
  {value:251,type:'搜索引擎',name:'谷歌'},
  {value:147,type:'搜索引擎',name:'必应'},
  {value:102,type:'搜索引擎',name:'其他'}
];
var Stat = G2.Stat;
var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 450,
  plotCfg: {
    margin: 35
  }
});
chart.legend(false);

var viewBack = chart.createView();
viewBack.source(data);

viewBack.coord('theta', {
  radius: 0.5 // 设置饼图的大小
});
// 绘制内部的饼图
viewBack.intervalStack()
  .position(Stat.summary.percent('value'))
  .color('type',['#4E7CCC', '#36B3C3', '#F9815C'])
  .label('type', {
  offset: -10,
  label: {
    fontSize: 12
  }
});

// 绘制外圈饼图
var view = chart.createView();
view.source(data);
view.coord('theta', {
  inner: 0.75 // 设置空心部分的大小
});
view.intervalStack()
  .position(Stat.summary.percent('value'))
  .color('name')
  .label('name*type')
  .selected({
    mode: 'multiple' // 设置 geom 的选择模式
  });
chart.render();
// 交互，内部饼图某个部分被点击触发外圈饼图选中
chart.on('plotclick', function(ev) {
  var chartGeom = viewBack.get('geoms')[0];
  var viewGeom = view.get('geoms')[0];
  viewGeom.clearSelected();
  var selected = chartGeom.getSelected();
  if (selected) {
    var data = selected['_origin'];
    var selectedType = data.type;
    var items = viewGeom.getData();
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (item['_origin'].type === selectedType) {
        viewGeom.setSelected(item);
      }
    }
  }
});
</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 data = chart.get('data');
      var Stat = G2.Stat;
      chart.legend(false);
      chart.coord('theta', {
        radius: 0.5 // 设置饼图的大小
      });
      // 绘制内部的饼图
      chart.intervalStack()
        .position(Stat.summary.percent('value'))
        .color('type',['#4E7CCC', '#36B3C3', '#F9815C'])
        .label('type', {
          offset: -10,
          label: {
            fontSize: 12
          }
        });
      // 绘制外圈饼图
      var view = chart.createView();
      view.source(data);
      view.coord('theta', {
        inner: 0.75 // 设置空心部分的大小
      });
      view.intervalStack()
        .position(Stat.summary.percent('value'))
        .color('name')
        .label('name*type')
        .selected({
          mode: 'multiple' // 设置 geom 的选择模式
        });
      chart.render();
      // 交互，内部饼图某个部分被点击触发外圈饼图选中
      chart.on('plotclick', function(ev) {
        var chartGeom = chart.get('geoms')[0];
        var viewGeom = view.get('geoms')[0];
        viewGeom.clearSelected();
        var selected = chartGeom.getSelected();
        if (selected) {
          var data = selected['_origin'];
          var selectedType = data.type;
          var items = viewGeom.getData();
          for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item['_origin'].type === selectedType) {
              viewGeom.setSelected(item);
            }
          }
        }
      });
    });

const MyComponent = React.createClass({
      getInitialState() {
        return {
          data: [
            {value:335,type:'直达',name:'直达'},
            {value:310,type:'营销广告',name:'邮件营销'},
            {value:234,type:'营销广告',name:'联盟广告'},
            {value:135,type:'营销广告',name:'视频广告'},
            {value:1048,type:'搜索引擎',name:'百度'},
            {value:251,type:'搜索引擎',name:'谷歌'},
            {value:147,type:'搜索引擎',name:'必应'},
            {value:102,type:'搜索引擎',name:'其他'}
          ],
          forceFit: true,
          width: 500,
          height: 450,
          plotCfg: {
            margin: 35
          },
        };
      },
      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>