JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px"></div>
  </body>
</html>

JavaScript

echarts.registerLocale("FR", {
        time: {
          month: [
            "Janvier",
            "Février",
            "Mars",
            "Avril",
            "Mai",
            "Juin",
            "Juillet",
            "Août",
            "Septembre",
            "Octobre",
            "Novembre",
            "Décembre",
          ],
          monthAbbr: [
            "Jan",
            "Fév",
            "Mars",
            "Avr",
            "Mai",
            "Juin",
            "Juil",
            "Août",
            "Sept",
            "Oct",
            "Nov",
            "Déc",
          ],
          dayOfWeek: [
            "Dimanche",
            "Lundi",
            "Mardi",
            "Mercredi",
            "Jeudi",
            "Vendredi",
            "Samedi",
          ],
          dayOfWeekAbbr: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
        },
        legend: {
          selector: {
            all: "Tout",
            inverse: "Inverse",
          },
        },
        toolbox: {
          brush: {
            title: {
              rect: "Sélection rectangulaire",
              polygon: "Sélection au lasso",
              lineX: "Sélectionner horizontalement",
              lineY: "Sélectionner verticalement",
              keep: "Garder la sélection",
              clear: "Effacer la sélection",
            },
          },
          dataView: {
            title: "Visualisation des données",
            lang: ["Visualisation des données", "Fermer", "Rafraîchir"],
          },
          dataZoom: {
            title: {
              zoom: "Zoom",
              back: "Zoom Remise à zéro",
            },
          },
          magicType: {
            title: {
              line: "Changer pour Ligne",
              bar: "Changer pour Histogramme",
              stack: "Superposition",
              tiled: "Tuile",
            },
          },
          restore: {
            title: "Restaurer",
          },
         ...