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: 300px; width: 100%">
 </div>

JavaScript

var dubleDonutChart = 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 sum = 5;

      //for (let i = 0; i < data.length; i++) {
      //  sum += parseFloat(data[i].value)
      //} 
      var option = {
        title: {
          //text: `\t\t${services_result.ebitda.title}\t\t${services_result.ebitda_avg.title}`,
          text: `EBITDA`,
          textStyle: {
            color: 'rgba(130,130,130,1)',
          },
     subtext: `2019                                                                          2020-2026`,
          subtextStyle: {
            color: 'rgba(130,130,130,1)',
            fontWeight: 'bold',
            fontSize: '13',
            verticalAlign: 'bottom'
          },
          left: 'center'
        },
        legend: { 
          top: 'bottom', 
        },
        tooltip: {
          trigger: 'item',
          formatter: `{a} <br/>{b}: {c} ${services_result.ebitda.unit?services_result.ebitda.unit:''} ({d}%)`
        },
        series: [{
            name: 'EBITDA 2019',
            radius: ['25%', '40%'],
            center: ['25%', '50%'],
            type: 'pie',
            selectedMode: 'single',
            selectedOffset: 7, 
            label: {
              normal: {
                color: 'rgba(130,130,130,1)',
                show: true, 
                fontSize: '13',                
                formatter: `{c}`,
                itemStyle: {
                  color: 'green'
                } 
              },
              emphasis: { 
                itemStyle: {
                  color: 'red'
                }
            ...