<div style="width:100%;text-align:center;">
  <div id="{{id}}" style="width:92%;height:0;padding-bottom:60%;margin:auto;"></div>
{{#if subtext}}
  <p>{{title}} - {{subtext}}</p>
{{else}}  
  <p>{{title}}</p>
{{/if}}
  <p></p>
</div>
<script type="text/javascript">
  var pdret_{{id}} = adarender.buildAllPieData(adadata_{{ datasetname }}, '{{ bval }}', '{{ cval }}', '{{sort}}');

  var option = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      top: 20,
      bottom: 20,
      data: pdret_{{id}}.ds.{{ bval }},
    },
    series: [
      {
        name: '{{adachart.a}}',
        type: 'pie',
        radius: '55%',
        center: ['40%', '50%'],
        data: pdret_{{id}}.piedata,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  var chart_{{ id }} = adarender.initChart(document.getElementById('{{id}}'), option);
</script>