JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<html style="height: 100%">

  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <HR><button id="btn">ТЕСТ</button>
    <HR>
    <div id="chart-container">
      <div id="chart-container-upper">
      </div>
      <div id="chart-container-botom">
      </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  </body>

</html>

CSS

#chart-container {
  height: 470px;
  width: 390px;
}
#chart-container-upper {
  background-color: rgba(255, 0, 0, 0.2);
  height: 80%;
}
#chart-container-botom {
  background-color: grey;
  background-color: rgba(0, 255, 0, 0.2);
  height: 20%;
}

JavaScript

var dom = document.getElementById("botomChart");
 //var myChart = echarts.init(dom);

 option = null;
 option = {
   title: {
     show: false,
     text: 'Заголовок',
     subtext: 'подзоголовок',
     left: 'center'
   },
   tooltip: {
     trigger: 'axis',
     axisPointer: { // 坐标轴指示器，坐标轴触发有效
       type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
     }
   },


   xAxis: {
     type: 'value'
   },
   yAxis: {
     type: 'category',
     //data: ['2014' ]
   },
   legend: {
     show: false,
     // orient: 'vertical',
     // top: 'middle',
     bottom: 10,
     left: 'center',
     data: ['серия 1', 'серия 2', 'серия 3', 'серия 4', 'серия 5']
   },
   series: [{
       name: 'серия 1',
       type: 'bar',
       stack: 'стек 1',
       label: {
         normal: {
           show: true,
           position: 'insideRight'
         }
       },
       data: [320]
     },
     {
       name: 'серия 3',
       type: 'bar',
       stack: 'стек 1',
       label: {
         normal: {
           show: true,
           position: 'insideRight'
         }
       },
       data: [120]
     },
     {
       name: 'серия 3',
       type: 'bar',
       stack: 'стек 1',
       label: {
         normal: {
           show: true,
           position: 'insideRight'
         }
       },
       data: [220]
     },
     {
       name: 'серия 4',
       type: 'bar',
       stack: 'стек 1',
       label: {
         normal: {
           show: true,
           position: 'insideRight'
         }
       },
       data: [150]
     },
     {
       name: 'серия 5',
       type: 'bar',
       stack: 'стек 1',
       label: {
         normal: {
           show: true,
           position: 'insideRight'
         }
       },
       data: [820]
     }
   ]
 }
 /*
 if (option && typeof option === "object") {
   myChart.setOption(option, true);
 }

 myChart.on('click', function(params) {
   console.warn(params)
 })*/



 var splitChart = function() {
   var upperList = new Map()
   var bottomList =...