JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
<div id="main">
  
</div>

CSS

#main {
  width: 600px;
  height: 400px;
}

JavaScript

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var builderJson = {
  "all": 10887,
  "charts": {
    "map": 3237,
    "lines": 2164,
    "bar": 7561,
    "line": 7778,
    "pie": 7355,
    "scatter": 2405,
    "candlestick": 1842,
    "radar": 2090,
    "heatmap": 1762,
    "treemap": 1593,
    "graph": 2060,
    "boxplot": 1537,
    "parallel": 1908,
    "gauge": 2107,
    "funnel": 1692,
    "sankey": 1568
  },
  "components": {
    "geo": 2788,
    "title": 9575,
    "legend": 9400,
    "tooltip": 9466,
    "grid": 9266,
    "markPoint": 3419,
    "markLine": 2984,
    "timeline": 2739,
    "dataZoom": 2744,
    "visualMap": 2466,
    "toolbox": 3034,
    "polar": 1945
  },
  "ie": 9743
};


option = {
    xAxis: [{
        type: 'value',
        max: builderJson.all,
    }],
    yAxis: [{
        data: Object.keys(builderJson.charts),
        axisLabel: {
            show: false,
        },
    },
    {
        data: Object.keys(builderJson.charts),
        axisLabel: {
            show: true,
        },
    },
    ],
    series: [{
        type: 'bar',
        data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
        })
    }]
};

option && myChart.setOption(option);