61-design/echarts-beautifier-v2

ECharts Beautifier v2

Créez des pages HTML ECharts interactives et prêtes pour le reporting à partir de données. Optimisé pour les analystes de données : comprendre d'abord l'objectif d'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 tutoriel de codage ECharts. L'utilisateur ne doit pas avoir à écrire d'options, de JavaScript ou de CSS.

Flux de travail

Étape 0 : Brief d'analyse

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

• Tendance : changement dans le temps, saisonnalité, pics, baisse, croissance.
• Comparaison : classement, différence de groupe, achèvement d'objectif, avant/après.
• Composition : part, contribution, structure, changement de mix.
• Distribution : dispersion, concentration, valeurs aberrantes, longue traîne.
• Conversion : entonnoir, abandon, efficacité d'é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.
• Résumé : récit exécutif ou opérationnel à travers plusieurs vues.

Si l'intention est claire, adaptez automatiquement. Si plusieurs intentions mènent à 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 d'origine lorsque la précision est importante. 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 d'é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 : Route du graphique

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

Documentez toujours le choix du graphique dans la sortie avec une courte 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 : Route de style

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

• Rapport professionnel : lecture exécutive soignée.
• Revue opérationnelle : surveillance opérationnelle dense.
• Exploration : espace de travail d'analyste avec filtres et comparaison.
• Écran sombre : tableau de bord ou affichage de centre de commandement.
• Intégré : 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.
• Principales conclusions ou meilleure interprétation actuelle.
• Source de données et note de fiabilité.
• Raison du choix du graphique.
• Infobulle interactive, légende/filtre là où c'est utile, mise en page réactive et comportement mobile.
• Annotations nécessaires pour les pics, les creux, les seuils, les lignes de base, les abandons ou les étiquettes de quadrant.

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

Liste de validation

Avant de livrer :

• Le graphique sélectionné correspond à l'objectif analytique énoncé.
• Les mesures, dénominateurs, unités et granularité temporelle sont visibles ou documentés.
• Le HTML s'affiche sans erreur console et se redimensionne sur mobile.
• Les infobulles exposent suffisamment de détails pour la révision par un analyste.
• Le récit ne dépasse pas 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 des livrables utilisateur.

Exemples

Utilisez les fichiers dans examples/ comme exemples de routage 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