JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<meta charset="utf-8">
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
 <div>
   <HR>
   <button id="btn">BTN</button>
   <HR>
 </div>
 <div id="container" style=" height: 510px; width:820px">
 </div>

CSS

#container {
  background-color: rgba(255, 0, 0, 0.2);
}

JavaScript

var nestingBarChart = function() {
  var sum = 0

  function cb_test_fomat(params) {
    console.warn(params)
    sum += parseFloat(params.data[1]);
    return sum
  }
  var selected_values = []
  return {
    getSelectedValues: function() {
      return selected_values
    },
    setChart: function(dom_id, services_result, callback_click, callback_legendselectchanged) {
      var dom = document.getElementById(dom_id);
      var myChart = echarts.init(dom);
 

 			
      var legend_array = [];
      var series_array = [];
  		var dataInnerPie = [];
      var dataOuterPie = [];
      services_result.data.forEach(element => {
 				legend_array.push(element.cost_grp)
        dataInnerPie.push({
        	name:  element.cost_grp,
          value: element.cost_per_ha,
        })
        element.cost_elemnts.forEach(inner_elem => {
        	dataOuterPie.push({
          	name:  inner_elem.cost_elemnt,
          	value: inner_elem.cost_per_ha,
          })
        })
      })
	
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          top: 'bottom',
          data: legend_array,
        },
        series: [{
            name: 'Группы затрат',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '25%'],
            center: ['50%', '40%'],
            label: {
              formatter: '{c}',
              normal: {
                color: 'rgba(130,130,130,1)',
                show: true,
                fontSize: '13',
                fontWeight: 'bold',
                formatter: `{c}`
              },
            },
            labelLine: {
              show: true
            },
            data:  dataInnerPie,
          },
          {
            name: 'Подгруппы',
            type: 'pie',
            radius: ['70%', '90%'],
            center: ['50%', '40%'],
            label: {
              formatter:...