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:420px">
 </div>

CSS

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

JavaScript

var singleBarChart = 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 legend_array = []
      var series_array = [];
      services_result.data.sort((a, b) => a.value - b.value)
      var i = 0
      services_result.data.map(e => {
      		e.percent = parseFloat(( e.value/services_result.summ ).toFixed(2))
        })
      console.warn(services_result.data)
      var legend_array = []
      services_result.data.forEach(element => {
        console.warn(element)
        if(element.percent > 0.02){
          series_array.push({
            name: element.name,
            type: 'bar',
            stack: '1',
            //stack: i,
            label: {
              normal: {
                formatter: '{a}:\t{c} руб.',
                show: true
              }
            },
            data: [element.value]
          })
        }else{
        	legend_array.push(element.name);
          series_array.push({
            name: element.name,
            type: 'bar',
            stack: '1',
            //stack: i,
            label: {
              normal: {
                formatter: '{a}',
                show: false
              }
            },
            data: [element.value]
          })        
        }        
      })

      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a}\n<br> {c}'
        },
        legend: {
          show: true,
          data: legend_array,
          top: 'bottom'
        },
       ...