ECharts Beautifier v2

Que fait ECharts Beautifier v2 ?

Créez des rapports HTML interactifs et prêts à présenter avec ECharts, directement à partir de vos données. Optimisé pour les analystes de données : comprendre d'abord l'objectif de l'analyse, puis profiler les données, choisir le graphique, choisir le style visuel, et livrer un artefact HTML autonome avec un contexte narratif.

Ne transformez pas cela en un tutoriel de codage ECharts. L'utilisateur ne doit pas avoir à écrire d'options, de JavaScript ou de CSS.

Workflow

Étape 0 : Brief d'analyse

Inférez l'objectif de l'utilisateur avant de sélectionner un graphique :

• Tendance : évolution dans le temps, saisonnalité, pics, déclin, croissance.
• Comparaison : classement, différence entre groupes, réalisation d'objectifs, avant/après.
• Composition : part, contribution, structure, changement de mix.
• Distribution : dispersion, concentration, valeurs aberrantes, longue traîne.
• Conversion : entonnoir, attrition, efficacité par étape.
• Flux : mouvement source-cible, chemin, migration, attribution.
• Positionnement : compromis à deux métriques, quadrant, comparaison par bulles.
• Exception : anomalie, dépassement de seuil, segment inhabituel.
• Synthèse : narrative exécutive ou opérationnelle à travers plusieurs vues.

Si l'intention est claire, adaptez-vous automatiquement. Si plusieurs intentions conduiraient à des conclusions sensiblement différentes, posez une question de clarification concise.

Étape 1 : Réception et fiabilité des données

Privilégiez les données structurées dans cet ordre : Excel/CSV/JSON, texte de tableau copié, capture d'écran de tableau claire, capture d'écran de graphique claire, image floue ou non étiquetée.

Pour les images, extrayez d'abord les lignes et colonnes structurées. Si l'extraction est partielle ou approximative, étiquetez le résultat comme estimé/incomplet et demandez les données originales lorsque la précision compte. Lisez references/image-data-input.md lorsque l'entrée est une image ou une capture d'écran.

Étape 2 : Profilage des données

Identifiez : granularité temporelle, mesures, dimensions, numérateur/dénominateur, unités, taille de l'échantillon, valeurs manquantes, valeurs aberrantes, lignes en double, totaux, si les pourcentages sont déjà calculés, et si les calculs de classement ou de part sont valides.

Étape 3 : Choix du graphique

Choisissez les graphiques d'abord en fonction de l'intention d'analyse, puis de la structure des données. Lisez references/chart-selection-matrix.md pour la matrice d'orientation lorsque le choix du graphique n'est pas évident.

Documentez toujours le choix du graphique dans la sortie avec une brève raison, par exemple : « Graphique à barres de classement horizontal sélectionné car la tâche compare de nombreuses catégories avec des étiquettes longues. »

Étape 4 : Choix du style

Choisissez un style de rapport en fonction de l'audience et de l'utilisation :

• Rapport d'affaires : compte-rendu exécutif soigné.
• Revue opérationnelle : surveillance opérationnelle dense.
• Exploration : espace de travail analyste avec filtres et comparaison.
• Écran sombre : affichage pour tableau de bord ou centre de commandement.
• Embarqué : HTML compact pour docs, wikis ou partage léger.

Lisez references/style-recipes.md avant de produire un artefact HTML thématisé.

Étape 5 : Livrable HTML

Générez une page HTML autonome utilisant ECharts. Incluez :

• Titre, sous-titre et brief d'analyse.
• Constats principaux ou meilleure interprétation actuelle.
• Source des données et note de fiabilité.
• Raison du choix du graphique.
• Infobulle interactive, légende/filtre si utile, mise en page réactive et comportement mobile.
• Annotations nécessaires pour les pics, creux, seuils, lignes de base, baisses ou étiquettes de quadrant.

Évitez la complexité décorative qui ralentit la lecture. Rendez le graphique utile avant de le rendre élégant.

Liste de validation

Avant de livrer :

• Le graphique sélectionné correspond à l'objectif analytique déclaré.
• Les mesures, dénominateurs, unités et la granularité temporelle sont visibles ou documentés.
• Le HTML s'affiche sans erreur dans la console et se redimensionne sur mobile.
• Les infobulles exposent suffisamment de détails pour la revue par l'analyste.
• La narrative n'exagère pas en fonction de la fiabilité des données.
• Tous les fichiers générés sont nommés clairement et placés dans un nouveau dossier de sortie lors de la création de livrables pour l'utilisateur.

Exemples

Utilisez les fichiers dans examples/ comme exemples d'orientation compacts :

• 01_trend_sales.json
• 02_ranking_channels.json
• 03_composition_category.json
• 04_funnel_conversion.json
• 05_heatmap_time_segment.json
• 06_sankey_user_flow.json
• 07_quadrant_strategy.json
• 08_image_table_retention.json