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;
      
      var option = {
        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: {
        show: false,
        ///4selectedMode : false,
         // orient: 'vertical',
          //x: 'left',
          top: 'bottom', //'top', 'middle', or 'bottom'
          //left: '100%',
        },
        tooltip: {
          trigger: 'item',
          formatter: `{a} <br/>{b}: {c} ${services_result.ebitda.unit?services_result.ebitda.unit:''} ({d}%)`
        },
        series: [{
            name: 'EBITDA 2019',//services_result.ebitda.title,
            radius: ['20%', '35%'],
            center: ['50%', '35%'],
            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'
                }
              } 
           ...