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>
 
   <HR><button id="btn">BTN</button>
 <HR>
<div id="papa" style="display: table; height: 500px; width: 100%">
 <div id="container0" style="display: table-cell; height: 500px; width: 25%"></div>
 </div>

JavaScript

var ebitdaBarChart = function() {
  const GOOD = 'green' // 'rgb(30,220,10)'   
  const BAD = 'rgb(255,100,0)'

  function calkYCoord(sr) {
  //debugger
    for (var key in sr) {
      if (key === 'params') continue;
      var positive = 0
      var negeative = 0
      for (var i = 0; i < sr[key].data.length; i++) {
        var val = sr[key].data[i]
        if (parseFloat(val.value) > 0) {
          val.OY = positive + (parseFloat(val.value) / 2);
          positive += parseFloat(val.value)
        }
        if (parseFloat(val.value) < 0) {
          val.OY = negeative - Math.abs((parseFloat(val.value)) / 2);
          negeative += parseFloat(val.value)
        }
      }
      sr[key].topOY = positive
    }
    return sr
  }

  var crop_color = [
    ["0019", "RGBA(155,194,230,1)", "Сидеральные пары"],
    ["0011", "rgba(135, 175, 212, 1)", "Подсолнечник"],
    ["0012", "RGBA(114,156,194,1)", "Пшеница озимая"],
    ["0013", "RGBA(93,136,175,1)", "Пшеница яровая"],
    ["0017", "RGBA(73,117,157,1)", "Сахарная свекла"],
    ["0022", "RGBA(52,98,139,1)", "Соя"],
    ["0025", "RGBA(31,78,120,1)", "Ячмень"],
    ["0015", "RGBA(31,63,171,1)", "Горох"],
    ["0009", "RGBA(116,44,163,1)", "Гречиха"],
    ["0001", "RGBA(40,61,31,1)", "Кукуруза на зерно"],
    ["0008", "RGBA(171,171,171,1)", "Горчица"],
    ["0000", "rgb(255, 255, 255, 1)", "Нет  в  севообороте"],
    ["0004", "RGBA(79,79,79,1)", "Многолетние травы"],
    ["0010", "RGBA(79,79,79,1)", "Пар"],
    ["0020", "RGBA(79,79,79,1)", "Сидеральный пар под"],
    ["0031", "rgb(204, 0, 102)", "Залужение"],
    ["9999", "rgb(0, 255, 255)", "Отказ (после 2018 г.)"]
  ]
  var colorsMap = new Map()
  var namesMap = new Map()
  crop_color.forEach(e => {
    colorsMap.set(e[0], e[1])
    namesMap.set(e[0], e[2])
  })

  function cb_test_fomat(params) {
    sum += parseFloat(params.data[1]);
    return sum
  }

  function calkDelta(before, after) {
    after.percent = Math.round(((after.summ - before.summ) /...