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



 <!--

{
    "crop_color": [
        ["0012", "RGBA(28,117,16,1)", "Пшеница озимая"],
        ["0017", "RGBA(194,23,17,1)", "Сахарная свекла"],
        ["0025", "RGBA(75,169,227,1)", "Ячмень"],
        ["0013", "RGBA(98,179,104,1)", "Пшеница яровая"],
        ["0022", "RGBA(230,230,44,1)", "Соя"],
        ["0015", "RGBA(31,63,171,1)", "Горох"],
        ["0009", "RGBA(116,44,163,1)", "Гречиха"],
        ["0001", "RGBA(40,61,31,1)", "Кукуруза на зерно"],
        ["0011", "rgba(135, 82, 0, 1)", "Подсолнечник"],
        ["0008", "RGBA(171,171,171,1)", "Горчица"],
        ["0000", "rgb(255, 255, 255, 1)", "Нет  в  севообороте"],
        ["0004", "RGBA(79,79,79,1)", "Многолетние травы"],
        ["0019", "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 г.)"]
    ]
}
-->

JavaScript

var ebitdaBarChart = function() {
  var crop_color = [
    ["0012", "RGBA(28,117,16,1)", "Пшеница озимая"],
    ["0017", "RGBA(194,23,17,1)", "Сахарная свекла"],
    ["0025", "RGBA(75,169,227,1)", "Ячмень"],
    ["0013", "RGBA(98,179,104,1)", "Пшеница яровая"],
    ["0022", "RGBA(230,230,44,1)", "Соя"],
    ["0015", "RGBA(31,63,171,1)", "Горох"],
    ["0009", "RGBA(116,44,163,1)", "Гречиха"],
    ["0001", "RGBA(40,61,31,1)", "Кукуруза на зерно"],
    ["0011", "rgba(135, 82, 0, 1)", "Подсолнечник"],
    ["0008", "RGBA(171,171,171,1)", "Горчица"],
    ["0000", "rgb(255, 255, 255, 1)", "Нет  в  севообороте"],
    ["0004", "RGBA(79,79,79,1)", "Многолетние травы"],
    ["0019", "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) {
    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 xAxisData = []
      var seriesData = new Map()
      for (let key in services_result) {
        console.log(key)
        if (key !== 'params') {
          xAxisData.push(services_result[key].series_name + '\n' + services_result[key].summ + ' млн. руб')
          services_result[key].data.forEach(e => {
            if (seriesData.has(e.crop_id)) {
              let t = seriesData.get(e.crop_id)
              seriesData.set(e.crop_id, [...t, {
              name: namesMap.get(e.crop_id),
 ...