<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 sunburstData_{{id}} = {
      {{#each treemap}}
        data:{{{this.jsondata}}}
      {{/each}}
  };
  var legendSelectedData = '{{legenddata}}';
  var sunburst_option_{{id}} = {
    title: {
      text: '{{title}}',
      subtext: '{{subtext}}',
      textStyle: {
            fontSize: 14,
            align: 'center'
      },
      subtextStyle: {
            align: 'center'
      }

    },
    tooltip: {
        trigger: 'item',
        formatter:function(params) { 
            if(params.treePathInfo.length === 2) {
                return params.treePathInfo[1].name + ':' + params.treePathInfo[1].value + '(' + ((params.treePathInfo[1].value)/(params.treePathInfo[0].value)*100).toFixed(1) + '%)' 
            } else if(params.treePathInfo.length === 3)
            {   
                return params.treePathInfo[1].name + ' / ' + params.treePathInfo[2].name + ' : ' +  params.treePathInfo[2].value + '(' + ((params.treePathInfo[2].value)/(params.treePathInfo[1].value)*100).toFixed(1) + '%)' 
            } else if(params.treePathInfo.length === 4) {
                return params.treePathInfo[1].name + ' / ' + params.treePathInfo[2].name + ' / ' + params.treePathInfo[3].name + ' : ' + params.treePathInfo[3].value +'(' + ((params.treePathInfo[3].value)/(params.treePathInfo[2].value)*100).toFixed(1) + '%)' 
            }
        }
    },
    series: [{
        {{#each treemap}} 
                type: 'sunburst',
                data: []
                
        {{/each}}    
        }]
  };
  var chart_{{ id }} = adarender.initChart(document.getElementById('{{id}}'), sunburst_option_{{id}});
  var sunburstLegendColor_{{id}} = [];
  var sunburstLegend_{{id}} = [];
  var sunburstCommonSeries = {
      type: 'sunburst',
      data:[],
      radius: [0, '95%'],
      sort: null,
      levels: [{}, {
          r0: '15%',
          r: '35%',
          itemStyle: {
              borderWidth: 2
          },
          label: {
              rotate: 'tangential'
          }
      }, {
          r0: '35%',
          r: '70%',
          label: {
              align: 'right'
          }
      }, {
          r0: '70%',
          r: '72%',
          label: {
              position: 'outside',
              padding: 3,
              silent: false
          },
          itemStyle: {
              borderWidth: 3,
          }
      }]
  } 
  var sunburst_bak_data_{{id}}  = JSON.parse(JSON.stringify(sunburstData_{{id}}.data));
  for(let i= 0;i< sunburst_bak_data_{{id}}.length;i++) {
      sunburstLegend_{{id}}.push((sunburst_bak_data_{{id}}[i]).name);      
      sunburst_option_{{id}}.series.push(JSON.parse(JSON.stringify(sunburstCommonSeries)));            
      sunburst_option_{{id}}.series[i].name = (sunburst_bak_data_{{id}}[i]).name
      sunburstLegendColor_{{id}}.push((sunburst_bak_data_{{id}}[i]).itemStyle.color);
  } 
  sunburst_option_{{id}}.legend = {
      type:'scroll',
      left:10,
      top:20,
      data:sunburstLegend_{{id}},
      selected:{}
  };
  sunburst_option_{{id}}.color = sunburstLegendColor_{{id}};
  var sunburst_series_length_{{id}} = sunburst_option_{{id}}.series.length;
  sunburst_option_{{id}}.series[sunburst_series_length_{{id}}-1].data = sunburst_bak_data_{{id}};
  chart_{{id}}.setOption(sunburst_option_{{id}});
  chart_{{id}}.on('click', (ele) => {
    if (ele && ele.componentSubType == 'sunburst' && 
      ele.componentType == 'series' && ele.seriesType == 'sunburst') {      
      if (ele.data) {
        if (typeof ele.data.url === 'string' && 
          ele.data.url != '') {

          window.open(ele.data.url, '_blank');
        }
      }
    }
  });
  chart_{{id}}.on('legendselectchanged',function(obj) {
      var selected = obj.selected;
      var legend = obj.name;
      var copyData = JSON.parse(JSON.stringify(sunburstData_{{id}}.data));;
      chart_{{id}}.clear();
      var new_chart_{{id}} = echarts.init(document.getElementById('{{id}}'));     
      if(selected[legend] == false) {
          (sunburst_option_{{id}}.legend.selected)[legend] = false;
          for(var i=0;i<sunburstLegend_{{id}}.length;i++) {
              if(!(sunburstLegend_{{id}}[i].indexOf(legend))) {
                  (sunburst_option_{{id}}.series)[sunburst_series_length_{{id}}-1].data[i].value = 0;
                  (sunburst_option_{{id}}.series)[sunburst_series_length_{{id}}-1].data[i].children = [];
              }
          }
      }else {
          (sunburst_option_{{id}}.legend.selected)[legend] = true;
          for(var i=0;i<sunburstLegend_{{id}}.length;i++) {
              if(!(sunburstLegend_{{id}}[i].indexOf(legend))) {
                  (sunburst_option_{{id}}.series)[sunburst_series_length_{{id}}-1].data[i] = copyData[i]
              }
          }
      } 
     chart_{{id}}.setOption(sunburst_option_{{id}});
     var excessDOm = document.getElementById('{{id}}');
     if(excessDOm.childNodes.length > 3) {
         excessDOm.removeChild(excessDOm.lastChild.previousSibling)
     }
  })
</script>