JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<html>
  <head>
    <title>ECharts Bar Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 500px;height:400px;background-color:#000000;"></div>
    <script type="text/javascript">
    // Based on prepared DOM, initialize echarts instance
    var myChart = echarts.init(document.getElementById('main'));

    // Specify chart configuration item and data
    var option = {
        title: {
            text: 'ECharts Bar Chart',
            textStyle: {
                color: '#ffffff'
            }
        },
        tooltip: {},
        legend: {
            data:['Sales']
        },
        xAxis: {
            data: ["Shirt","Cardigan","Chiffon Shirt","Pants","Heels","Socks"],
            axisLabel: {
              color: '#ffffff'
            }
        },
        yAxis: {
            axisLabel: {
              color: '#ffffff'
            }
        },
        series: [{
            name: 'Sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            itemStyle: {
              color: '#FF00FF'
            }
        }]
    };

    // Use configuration item and data specified to show chart
    myChart.setOption(option);
    </script>
  </body>
</html>