JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body >
       <div id="container"  ></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
 
 
 
       <script type="text/javascript">
   </body>
</html>

CSS

#container{
  background-color: grey;
  height: 470px;
  width: 390px;
  
  /* 390*470 */
}

JavaScript

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

option = null;
option = {
    title: {
        text: 'Заголовок',
        subtext: 'подзоголовок',
        left: 'center'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
 
    grid: {
        left: '3%',
        right: '3%',
        bottom: '15%',
        containLabel: true
    },
    xAxis:  {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['2014' ]
    },
    legend: {
        // 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',
        ...