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

JavaScript

var barChart = 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, data = [], unit = null /*'Ед.Изм.'*/ , title = '') {
       var dom = document.getElementById(dom_id);
       var myChart = echarts.init(dom);
       var sum = 0;

       for (let i = 0; i < data.length; i++) {
         sum += parseFloat(data[i].value)
       }

       var option = {
         title: {
           text: title,
           textStyle: {
             color: '#235894'
           },
           left: 'center'
         },
         legend: {
           orient: 'vertical',
           x: 'right',
           top: 'top',//'top', 'middle', or 'bottom'
           //left: '100%',
         },
         tooltip: {
           trigger: 'item',
           formatter: `{a} <br/>{b}: {c} ${unit?unit:''} ({d}%)`
         },
         series: [{
           name: title,
           radius: ['40%', '75%'],
           center: ['50%', '50%'],
           type: 'pie',
           selectedMode: 'multiple',
           selectedOffset: 1,
           //hoverOffset : 130,
           //legendHoverLink : false, 
           //hoverAnimation: false,
           //roseType : true,
           label: {
             normal: {
               color: 'black',
               show: true,
               position: 'center',
               fontSize: '15',
               fontWeight: 'bold',
               formatter: `${sum}${unit? ' '+unit: ''}`,
             	itemStyle: {
              	color:'green'
              }               
               
             },
             emphasis:{
             	itemStyle: {
              	color:'red'
              }
             }
             /*
             emphasis: {
               show: true,
               textStyle: {
                 fontSize: '15',
    ...