G2 - tooltip 内展示饼图

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>tooltip 内展示饼图</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>
 <style type="text/css">
  .pie-container{
    position:absolute;
    visibility:hidden;
    border : 1px solid #efefef;
    background-color: white;
    opacity: .8;
    padding: 5px;
    transition: top 200ms,left 200ms;
    -moz-transition:  top 200ms,left 200ms;  /* Firefox 4 */
    -webkit-transition:  top 200ms,left 200ms; /* Safari 和 Chrome */
    -o-transition:  top 200ms,left 200ms;
  }
</style>

<script>
$('<div style="display:none"><div id="p1" class="pie-container ac-tooltip"><span>细节分步图</span><div id="c4"></div></div></div>').appendTo('#c1');

var Stat = G2.Stat;
var data = [{name:'类别1',value:10,children:[{name:'类别11',value:18},{name:'类别12',value:10},{name:'类别13',value:7},{name:'类别14',value:12}]},{name:'类别2',value:8,children:[{name:'类别21',value:28},{name:'类别22',value:20},{name:'类别23',value:7},{name:'类别24',value:2}]},{name:'类别3',value:4,children:[{name:'类别31',value:14},{name:'类别32',value:12},{name:'类别33',value:6},{name:'类别34',value:1}]},{name:'类别4',value:9,children:[{name:'类别41',value:38},{name:'类别42',value:10},{name:'类别43',value:17},{name:'类别44',value:22}]}];

var chart = new G2.Chart({
  id: 'c1',
  animate: false,
  forceFit: true,
  height: 450
});
var defs = {
  'value': {
    min: 0
  }
};
chart.source(data, defs);
chart.tooltip(true, {
  offset: 50,
  custom: true,
  html: '#p1'
});
chart.interval().position('name*value').color('name'); // 绘制柱状图
chart.render();

// 绘制 tooltip 中显示的饼图
var chart2 = new G2.Chart({
  id: 'c4',
  animate: false,
  width: 150,
  height: 150,
  plotCfg: {
    margin: [0, 0, 35]
  }
});
chart2.coord('theta');
chart2.legend('bottom', {
  title: null
});
// 查找对应的数据
function findObj(name) {
  var rst = null
  data.forEach(function(item) {
    if (item.name === name) {
      rst = item;
    }
  });
  return rst;
}
// 监听 tooltip 改变事件
chart.on('tooltipchange', function(ev) {
  var item = ev.items[0]; // 获取tooltip要显示的内容
  var name = item.name;
  var obj = findObj(name);
  if (obj) {
    chart2.clear();
    chart2.source(obj.children);
    chart2.intervalStack().position(Stat.summary.percent('value')).color('name');
    chart2.render();
  }
});
</script>


      </body>
    </html>
          
tooltip 内展示饼图