{"id":11292,"date":"2026-07-28T15:15:09","date_gmt":"2026-07-28T07:15:09","guid":{"rendered":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/"},"modified":"2026-07-28T15:15:09","modified_gmt":"2026-07-28T07:15:09","slug":"from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts","status":"publish","type":"post","link":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/","title":{"rendered":"Du z\u00e9ro \u00e0 la ma\u00eetrise de la visualisation des donn\u00e9es : un guide pour d\u00e9butants sur la cr\u00e9ation de graphiques aliment\u00e9s par l&#8217;IA avec VPasCode et ECharts"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>Dans un monde de plus en plus ax\u00e9 sur les donn\u00e9es, la capacit\u00e9 \u00e0 transformer des chiffres bruts en r\u00e9cits visuels percutants est une comp\u00e9tence essentielle. Que vous soyez analyste commercial pr\u00e9sentant les r\u00e9sultats trimestriels, d\u00e9veloppeur surveillant les performances d&#8217;une application, ou \u00e9tudiant travaillant sur un projet de recherche, les graphiques et les diagrammes sont des outils puissants qui rendent les informations complexes accessibles et compr\u00e9hensibles.<\/p>\n<p>Cependant, les outils traditionnels de cr\u00e9ation de graphiques exigent souvent des travaux manuels importants, des comp\u00e9tences techniques ou des licences logicielles co\u00fbteuses. Et si vous pouviez cr\u00e9er des graphiques professionnels et interactifs \u00e0 partir de simples descriptions textuelles ? Et si l&#8217;intelligence artificielle pouvait g\u00e9n\u00e9rer votre premier brouillon, que vous pourriez affiner avec du code lorsque la pr\u00e9cision compte ?<\/p>\n<p>Ce guide complet vous pr\u00e9sente une approche r\u00e9volutionnaire de la visualisation des donn\u00e9es : combiner l&#8217;assistance aliment\u00e9e par l&#8217;IA<a href=\"https:\/\/www.visual-paradigm.com\/features\/ai-chatbot\/\">chatbot<\/a> avec la flexibilit\u00e9 de l&#8217;\u00e9dition de graphiques bas\u00e9e sur le code. Vous apprendrez \u00e0 utiliser le chatbot IA de Visual Paradigm pour g\u00e9n\u00e9rer instantan\u00e9ment des graphiques \u00e0 partir de descriptions en langage naturel, puis \u00e0 les affiner \u00e0 l&#8217;aide de Visual Paradigm<a href=\"https:\/\/www.visual-paradigm.com\/features\/vpascode\/\">VPasCode<\/a>\u2014une plateforme puissante de diagrammes en code qui prend en charge Apache ECharts, l&#8217;une des biblioth\u00e8ques de graphiques les plus polyvalentes disponibles aujourd&#8217;hui.<\/p>\n<p id=\"SuvJEWd\"><img alt=\"VP Chatbot + VPasCode: Revolutionizing Data Visualization using Echarf\" class=\"alignnone wp-image-13256 size-full\" decoding=\"async\" height=\"572\" loading=\"lazy\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png\" srcset=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png 1024w, https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335-300x168.png 300w, https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335-768x429.png 768w\" width=\"1024\"\/><\/p>\n<p>\u00c0 la fin de ce guide, vous aurez les connaissances et la confiance n\u00e9cessaires pour cr\u00e9er des visualisations impressionnantes dans n&#8217;importe quel contexte, allant des simples diagrammes en barres montrant les ventes mensuelles aux diagrammes de Sankey complexes suivant les flux d&#8217;\u00e9nergie \u00e0 travers plusieurs syst\u00e8mes.<\/p>\n<h2>Comprendre le flux de travail moderne de cr\u00e9ation de graphiques<\/h2>\n<h3>Le d\u00e9fi des g\u00e9n\u00e9rateurs traditionnels de graphiques par IA<\/h3>\n<p>Avez-vous d\u00e9j\u00e0 utilis\u00e9 un g\u00e9n\u00e9rateur de graphiques par IA pour cr\u00e9er une visualisation, pour ensuite vous rendre compte que les donn\u00e9es \u00e9taient l\u00e9g\u00e8rement erron\u00e9es ou que les couleurs ne correspondaient pas \u00e0 votre marque ? Bien que la g\u00e9n\u00e9ration de graphiques par IA soit incroyablement puissante pour le brainstorming et pour obtenir un d\u00e9part rapide, les r\u00e9sultats statiques de l&#8217;IA sont souvent insuffisants lorsque vient le moment de pr\u00e9senter \u00e0 votre \u00e9quipe ou \u00e0 vos clients. Dans le monde r\u00e9el, vous avez besoin de la flexibilit\u00e9 pour modifier, affiner et mettre \u00e0 jour vos donn\u00e9es afin de correspondre exactement \u00e0 votre sc\u00e9nario.<\/p>\n<h3>Le flux de travail complet : <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-chart-generation-create-with-chatbot-edit-with-vpascode\/\">Cr\u00e9ez avec le chatbot IA, \u00e9ditez avec VPasCode<\/a><\/h3>\n<p>Un g\u00e9n\u00e9rateur de graphiques par IA v\u00e9ritablement utile ne devrait pas simplement vous remettre une image statique et vous laisser coinc\u00e9. Gr\u00e2ce \u00e0 l&#8217;\u00e9cosyst\u00e8me tout-en-un de Visual Paradigm, vous obtenez un flux de travail de g\u00e9n\u00e9ration de graphiques par IA fluide et flexible, qui vous donne le meilleur des deux mondes :<\/p>\n<ol>\n<li><strong>Id\u00e9ation instantan\u00e9e :<\/strong>\u00a0Demandez au <a href=\"https:\/\/www.visual-paradigm.com\/features\/ai-chatbot\/\">chatbot IA<\/a> de g\u00e9n\u00e9rer le type de graphique dont vous avez besoin pour d\u00e9marrer votre conception.<\/li>\n<li><strong>Contr\u00f4le total :<\/strong>\u00a0Ouvrez instantan\u00e9ment le graphique g\u00e9n\u00e9r\u00e9 dans <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/vpascode-echarts-support-chart-maker\/\">VPasCode<\/a>, un \u00e9diteur de diagrammes en code. \u00c0 partir de l\u00e0, vous pouvez librement modifier les donn\u00e9es brutes, ajuster les valeurs et personnaliser enti\u00e8rement le style \u2014 par exemple en changeant les couleurs pour correspondre \u00e0 votre marque \u2014 afin de le rendre enti\u00e8rement personnel.<\/li>\n<\/ol>\n<p>Plut\u00f4t que de recr\u00e9er des graphiques depuis z\u00e9ro simplement parce qu&#8217;un seul chiffre a chang\u00e9, ce g\u00e9n\u00e9rateur de graphiques par IA vous donne le point de d\u00e9part id\u00e9al, ainsi que les outils exacts n\u00e9cessaires pour terminer le travail.<\/p>\n<h2>Mise en route avec VPasCode<\/h2>\n<h3>Qu&#8217;est-ce que VPasCode ?<\/h3>\n<p><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/vpascode-echarts-support-chart-maker\/\">VPasCode<\/a> est une plateforme unifi\u00e9e de conversion texte en diagramme con\u00e7ue pour \u00e9liminer les frictions li\u00e9es au passage entre plusieurs outils de dessin. En prenant en charge des syntaxes populaires comme Mermaid, PlantUML et Graphviz dans un seul environnement de d\u00e9veloppement int\u00e9gr\u00e9, VPasCode est rapidement devenu un \u00e9cosyst\u00e8me de pr\u00e9dilection pour le rendu rapide et pr\u00e9cis des diagrammes.<\/p>\n<p>R\u00e9cemment, <a href=\"https:\/\/www.visual-paradigm.com\/features\/vpascode\/\">VPasCode<\/a> a introduit une prise en charge native <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/vpascode-echarts-support-chart-maker\/\">prise en charge d&#8217;Apache ECharts<\/a>, transformant l&#8217;environnement de diagrammation en un g\u00e9n\u00e9rateur de graphiques hautement flexible et pilot\u00e9 par le code. Vous pouvez d\u00e9sormais transformer vos configurations JSON ou vos descriptions assist\u00e9es par l&#8217;IA en visualisations de donn\u00e9es riches et interactives en temps r\u00e9el.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55b06a06ebf.png\"\/><\/p>\n<p>Avec l&#8217;interface en regard, les m\u00e9canismes restent simples et intuitifs : saisissez votre objet de configuration ECharts dans le panneau de gauche, et vos composants de tableau de bord interactifs s&#8217;affichent sans heurt dans le panneau de droite.<\/p>\n<h3>Pourquoi choisir VPasCode comme g\u00e9n\u00e9rateur de graphiques ?<\/h3>\n<p>Alors que les logiciels standards de cr\u00e9ation de graphiques imposent de faire glisser, d\u00e9poser et ajuster manuellement chaque pixel, VPasCode repose enti\u00e8rement sur un code structur\u00e9. L&#8217;int\u00e9gration d&#8217;ECharts d\u00e9bloque des avantages distincts pour les \u00e9quipes techniques modernes :<\/p>\n<ul>\n<li><strong>Architecture unifi\u00e9e :<\/strong>\u00a0Passez sans effort entre les maquettes d&#8217;architecture d&#8217;application (via PlantUML\/Mermaid) et les tableaux de bord d&#8217;analyse de donn\u00e9es (via ECharts) dans la m\u00eame onglet.<\/li>\n<li><strong>Flux de travail pilot\u00e9s par l&#8217;IA :<\/strong>\u00a0Utilisez la plateforme comme g\u00e9n\u00e9rateur de graphiques intelligent bas\u00e9 sur l&#8217;IA. D\u00e9crivez vos besoins de donn\u00e9es de mani\u00e8re native (dans le chatbot de diagrammation IA), et observez des visualisations pr\u00e9cises cr\u00e9\u00e9es automatiquement sans style manuel.<\/li>\n<li><strong>\u00c9tats fortement partageables :<\/strong>\u00a0Chaque configuration de diagramme est compress\u00e9e en une URL unique et partageable, ce qui rend incroyablement facile la collaboration sur des revues de code, des documents wiki ou des pr\u00e9sentations client en direct.<\/li>\n<\/ul>\n<h2>Introduction \u00e0 ECharts<\/h2>\n<h3>Qu&#8217;est-ce qu&#8217;Apache ECharts ?<\/h3>\n<p>Apache ECharts est une biblioth\u00e8que de visualisation puissante et open source qui propose des graphiques intuitifs, interactifs et hautement personnalisables. Elle est construite sur JavaScript et utilise le Canvas HTML5 pour le rendu, ce qui signifie que vos graphiques seront fluides, rapides et fonctionneront sur tous les navigateurs modernes.<\/p>\n<h3>Concepts cl\u00e9s pour les d\u00e9butants<\/h3>\n<p><strong>1. L&#8217;objet Option<\/strong><br \/>\nChaque graphique ECharts est d\u00e9fini par un objet de configuration appel\u00e9\u00a0<code data-backticks=\"1\">option<\/code>. Cet objet JavaScript contient toutes les param\u00e8tres de votre graphique, notamment :<\/p>\n<ul>\n<li>Valeurs des donn\u00e9es<\/li>\n<li>Type de graphique<\/li>\n<li>Couleurs et styles<\/li>\n<li>Configuration des axes<\/li>\n<li>Infobulles et interactions<\/li>\n<\/ul>\n<p><strong>2. S\u00e9ries<\/strong><br \/>\nLa\u00a0<code data-backticks=\"1\">s\u00e9rie<\/code>\u00a0est le tableau o\u00f9 vous d\u00e9finissez le type de graphique souhait\u00e9 (barre, ligne, camembert, etc.) et fournissez les donn\u00e9es r\u00e9elles. Chaque s\u00e9rie peut avoir des propri\u00e9t\u00e9s diff\u00e9rentes telles que :<\/p>\n<ul>\n<li><code data-backticks=\"1\">type<\/code>: Le type de graphique (par exemple, \u00ab barre \u00bb, \u00ab ligne \u00bb, \u00ab camembert \u00bb)<\/li>\n<li><code data-backticks=\"1\">donn\u00e9es<\/code>: Votre jeu de donn\u00e9es<\/li>\n<li><code data-backticks=\"1\">nom<\/code>: Une \u00e9tiquette pour la l\u00e9gende<\/li>\n<\/ul>\n<p><strong>3. Axes<\/strong><br \/>\nPour la plupart des graphiques, vous allez configurer :<\/p>\n<ul>\n<li><code data-backticks=\"1\">axeX<\/code>: L&#8217;axe horizontal (cat\u00e9gories ou valeurs)<\/li>\n<li><code data-backticks=\"1\">axeY<\/code>: L&#8217;axe vertical (valeurs ou cat\u00e9gories)<\/li>\n<\/ul>\n<p><strong>4. Infobulle<\/strong><br \/>\nLes infobulles apparaissent lorsque les utilisateurs passent le curseur sur les \u00e9l\u00e9ments du graphique, affichant des informations d\u00e9taill\u00e9es sur des points de donn\u00e9es sp\u00e9cifiques.<\/p>\n<h2>Utilisation du chatbot IA pour la g\u00e9n\u00e9ration instantan\u00e9e de graphiques<\/h2>\n<h3>Acc\u00e8s au chatbot IA<\/h3>\n<p>Le chatbot IA est votre porte d&#8217;entr\u00e9e vers la cr\u00e9ation instantan\u00e9e de graphiques. Rendez-vous simplement sur l&#8217;outil IA et commencez par une simple demande. Aucune connaissance en programmation n&#8217;est requise \u2014 d\u00e9crivez simplement ce que vous souhaitez visualiser en langage courant.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/ai-toolbox.visual-paradigm.com_app_chatbot-v2_Windows-widescreen.png\"\/><\/p>\n<h3>R\u00e9daction de prompts efficaces<\/h3>\n<p>La cl\u00e9 pour obtenir de bons r\u00e9sultats avec le <a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-chatbot\/\">chatbot IA<\/a> est de r\u00e9diger des prompts clairs et pr\u00e9cis. Voici la formule :<\/p>\n<p><strong>Structure de base :<\/strong><br \/>\n\u00ab G\u00e9n\u00e9rez un [type de graphique] montrant [ce que vous mesurez] par [cat\u00e9gories\/p\u00e9riodes] \u00bb<\/p>\n<p><strong>Exemples :<\/strong><\/p>\n<ul>\n<li>\u00ab G\u00e9n\u00e9rez un graphique en barres pour le trafic mensuel du site web \u00bb<\/li>\n<li>\u00ab Cr\u00e9ez un graphique circulaire montrant la part de march\u00e9 des 5 marques de smartphones les plus populaires \u00bb<\/li>\n<li>\u00ab G\u00e9n\u00e9rez un graphique en ligne du nombre de visiteurs du site web par mois \u00bb<\/li>\n<\/ul>\n<h3>Workflow d&#8217;exemple<\/h3>\n<p>Examinons un exemple complet :<\/p>\n<p><strong>\u00c9tape 1 : Commencez par un prompt<\/strong><br \/>\nTapez : \u00ab G\u00e9n\u00e9rez un graphique en barres du trafic mensuel du site web \u00bb<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a59860e871a9.png\"\/><\/p>\n<p><strong>\u00c9tape 2 : Revue du graphique g\u00e9n\u00e9r\u00e9<\/strong><br \/>\nLe chatbot cr\u00e9era un graphique avec des donn\u00e9es d&#8217;exemple. Revoyez-le pour vous assurer qu&#8217;il a la bonne structure.<\/p>\n<p><strong>\u00c9tape 3 : Ouvrir dans VPasCode<\/strong><br \/>\nCliquez pour ouvrir le graphique dans le <a href=\"https:\/\/www.archimetric.com\/case-study-vpascode-revolutionizing-system-architecture-documentation-through-diagram-as-code-3\/\">\u00e9diteur VPasCode<\/a>o\u00f9 vous pouvez :<\/p>\n<ul>\n<li>Remplacer les donn\u00e9es d&#8217;exemple par vos chiffres r\u00e9els<\/li>\n<li>Changer les couleurs pour correspondre \u00e0 votre marque<\/li>\n<li>Ajuster les \u00e9tiquettes et le formatage<\/li>\n<li>Ajouter des fonctionnalit\u00e9s d&#8217;interactivit\u00e9<\/li>\n<\/ul>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/www.vpascode.com_Windows-widescreen.png\"\/><\/p>\n<p><strong>\u00c9tape 4 : Personnaliser et exporter<\/strong><br \/>\nApportez vos modifications et partagez le r\u00e9sultat final via un lien URL ou exportez-le pour des pr\u00e9sentations.<\/p>\n<h2>Types de graphiques et cas d&#8217;utilisation<\/h2>\n<p>Notre <a href=\"https:\/\/blog.visual-paradigm.com\/ai-chatbot-a-comprehensive-guide-to-visual-modeling\/\">outil de g\u00e9n\u00e9ration de graphiques par IA<\/a>peut d\u00e9sormais cr\u00e9er une vaste vari\u00e9t\u00e9 de mises en page directement \u00e0 partir de vos invites textuelles. Explorons les diff\u00e9rents types de graphiques et les moments o\u00f9 utiliser chacun.<\/p>\n<h3>Formats classiques<\/h3>\n<h4>Graphiques en lignes<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>\u00a0Afficher les tendances au fil du temps, suivre les changements, comparer plusieurs s\u00e9ries de donn\u00e9es<\/p>\n<p><strong>Invite d&#8217;exemple :<\/strong>\u00a0\u00ab G\u00e9n\u00e9rez un graphique en ligne du nombre de visiteurs du site web par mois \u00bb<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d83e0f1216.png\"\/><\/p>\n<p>Les graphiques en lignes excellent dans l&#8217;affichage des donn\u00e9es continues et sont parfaits pour montrer les sch\u00e9mas de croissance, les tendances saisonni\u00e8res ou les indicateurs de performance au fil du temps.<\/p>\n<h4>Graphiques \u00e0 aires<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>\u00a0Visualiser les totaux cumul\u00e9s, montrer les variations de volume, mettre en \u00e9vidence l&#8217;importance<\/p>\n<p><strong>Invite d&#8217;exemple :<\/strong>\u00a0\u00ab G\u00e9n\u00e9rez un graphique \u00e0 aires visualisant les ventes cumul\u00e9es par trimestre \u00bb<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d835d91117.png\"\/><\/p>\n<p>Les graphiques \u00e0 aires ressemblent aux graphiques en lignes, mais la zone situ\u00e9e sous la ligne est remplie, ce qui les rend id\u00e9aux pour montrer comment diff\u00e9rentes parties contribuent \u00e0 un tout au fil du temps.<\/p>\n<h4>Graphiques \u00e0 barres et graphiques en colonnes<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>Comparer des cat\u00e9gories, montrer des classements, afficher des donn\u00e9es discr\u00e8tes<\/p>\n<p><strong>Exemple de requ\u00eate :<\/strong>\u00ab G\u00e9n\u00e9rer un graphique \u00e0 barres empil\u00e9es montrant les ventes trimestrielles par r\u00e9gion \u00bb<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a598eaef341d.png\"\/><\/p>\n<p>Les graphiques \u00e0 barres (horizontaux) et les graphiques en colonnes (verticaux) sont les types de graphiques les plus polyvalents, id\u00e9aux pour comparer des valeurs entre diff\u00e9rentes cat\u00e9gories.<\/p>\n<h3>R\u00e9partition proportionnelle<\/h3>\n<h4>Graphiques circulaires<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>Montrer les parties d&#8217;un tout, afficher des pourcentages, compositions simples<\/p>\n<p><strong>Exemple de requ\u00eate :<\/strong>\u00ab Cr\u00e9er un graphique circulaire montrant la part de march\u00e9 des 5 marques de smartphones les plus populaires \u00bb<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d8446df1da.png\"\/><\/p>\n<p>Les graphiques circulaires fonctionnent le mieux lorsque vous avez un petit nombre de cat\u00e9gories (id\u00e9alement 5 \u00e0 7) et que vous souhaitez montrer la contribution de chacune \u00e0 100 %.<\/p>\n<h4>Graphiques en anneau<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>Similaires aux graphiques circulaires, mais avec un trou au centre pour des informations suppl\u00e9mentaires ou un aspect esth\u00e9tique<\/p>\n<p><strong>Exemple de requ\u00eate :<\/strong>\u00ab G\u00e9n\u00e9rer un graphique en anneau montrant la r\u00e9partition en pourcentage des d\u00e9penses d&#8217;une entreprise \u00bb<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d8471f2f21.png\"\/><\/p>\n<p>Les graphiques en anneau offrent les m\u00eames fonctionnalit\u00e9s que les graphiques circulaires, mais avec un aspect plus moderne et la possibilit\u00e9 d&#8217;afficher un total ou une \u00e9tiquette au centre.<\/p>\n<h4>Graphiques de rose de Nightingale<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>Comparer des donn\u00e9es cycliques, montrer des motifs p\u00e9riodiques, comparaisons radiales<\/p>\n<p>Ces graphiques sp\u00e9cialis\u00e9s affichent les donn\u00e9es sous une forme circulaire avec des rayons variables, ce qui les rend excellents pour montrer des motifs saisonniers ou des tendances cycliques.<\/p>\n<h4>Graphiques en soleil<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>Visualiser des donn\u00e9es hi\u00e9rarchiques, montrer des relations imbriqu\u00e9es, analyses multi-niveaux<\/p>\n<p><strong>Exemple de requ\u00eate :<\/strong>\u00ab G\u00e9n\u00e9rer un graphique en soleil visualisant la r\u00e9partition hi\u00e9rarchique du trafic d&#8217;un site web, depuis les canaux d&#8217;origine du trafic jusqu&#8217;aux pages d&#8217;atterrissage sp\u00e9cifiques \u00bb<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d80c3f0871.png\"\/><\/p>\n<p>Les graphiques en soleil affichent les donn\u00e9es hi\u00e9rarchiques sous forme d&#8217;anneaux concentriques, chaque anneau repr\u00e9sentant un niveau de la hi\u00e9rarchie.<\/p>\n<h3>Performance et suivi<\/h3>\n<h4>Graphiques radar<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>\u00a0Comparer plusieurs variables, montrer les points forts et faibles, profiler<\/p>\n<p><strong>\u00a0Exemple de commande :<\/strong>\u00a0\u00ab G\u00e9n\u00e9rer un graphique radar montrant les niveaux de comp\u00e9tences des employ\u00e9s dans une \u00e9quipe \u00bb<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-17-at-10.15.42-AM.png\"\/><\/p>\n<p>Les graphiques radar (appel\u00e9s aussi graphiques araign\u00e9e) affichent des donn\u00e9es multivari\u00e9es sur des axes partant du m\u00eame point, ce qui les rend parfaits pour comparer des profils ou des capacit\u00e9s.<\/p>\n<h4>Graphiques de dispersion<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>\u00a0Identifier des corr\u00e9lations, trouver des valeurs aberrantes, montrer les relations entre deux variables<\/p>\n<p>Les graphiques de dispersion utilisent des points pour repr\u00e9senter les valeurs de deux variables num\u00e9riques diff\u00e9rentes, vous aidant \u00e0 rep\u00e9rer des motifs, des regroupements et des anomalies dans vos donn\u00e9es.<\/p>\n<h4>Graphiques en entonnoir<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>\u00a0Visualiser les \u00e9tapes d&#8217;un processus, montrer les taux de conversion, suivre l&#8217;\u00e9volution<\/p>\n<p>Les graphiques en entonnoir sont id\u00e9aux pour les pipelines de ventes, les funnel marketing ou tout processus o\u00f9 les \u00e9l\u00e9ments passent par des \u00e9tapes s\u00e9quentielles avec des quantit\u00e9s d\u00e9croissantes.<\/p>\n<h4>Jauges<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>\u00a0Afficher des indicateurs uniques, montrer l&#8217;\u00e9volution vers des objectifs, tableaux de bord KPI<\/p>\n<p>Les graphiques de jauge imitent les compteurs de vitesse ou les jauges, fournissant un indicateur visuel imm\u00e9diat de la position d&#8217;une valeur dans une plage.<\/p>\n<h3>Flux et tendances avanc\u00e9s<\/h3>\n<h4>Diagrammes de Sankey<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>\u00a0Montrer les flux et les transferts, visualiser les flux d&#8217;\u00e9nergie ou de mati\u00e8re, suivre les conversions<\/p>\n<p><strong>\u00a0Exemple de commande :<\/strong>\u00a0\u00ab G\u00e9n\u00e9rer un diagramme de Sankey montrant le flux d&#8217;\u00e9nergie provenant des sources primaires jusqu&#8217;\u00e0 l&#8217;utilisation finale \u00bb<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a5d7d9b926de.png\"\/><\/p>\n<p>Les diagrammes de Sankey utilisent des lignes fluides aux largeurs variables pour montrer comment les quantit\u00e9s se d\u00e9placent entre diff\u00e9rents n\u0153uds, ce qui les rend parfaits pour visualiser les budgets, les flux d&#8217;\u00e9nergie ou les parcours des utilisateurs.<\/p>\n<h4>Rivi\u00e8res th\u00e9matiques<\/h4>\n<p><strong>Id\u00e9al pour :<\/strong>\u00a0Afficher les changements de composition au fil du temps, montrer l&#8217;\u00e9volution th\u00e9matique<\/p>\n<p>Les graphiques de rivi\u00e8res th\u00e9matiques sont des graphiques de surface sp\u00e9cialis\u00e9s qui montrent comment diff\u00e9rentes th\u00e9matiques ou cat\u00e9gories \u00e9voluent et changent en proportion au fil du temps.<\/p>\n<h2>\u00c9tape par \u00e9tape : Cr\u00e9er votre premier graphique<\/h2>\n<p>Examinons ensemble la cr\u00e9ation d&#8217;un graphique complet depuis le d\u00e9but en utilisant \u00e0 la fois le chatbot d&#8217;IA et VPasCode.<\/p>\n<h3>\u00c9tape 1 : D\u00e9finissez votre objectif<\/h3>\n<p>Avant de commencer, demandez-vous :<\/p>\n<ul>\n<li>Quelle histoire essaie-je de raconter ?<\/li>\n<li>Qui est mon public cible ?<\/li>\n<li>Quel type de graphique repr\u00e9sente le mieux ces donn\u00e9es ?<\/li>\n<li>Quelles sont les informations cl\u00e9s que je souhaite mettre en \u00e9vidence ?<\/li>\n<\/ul>\n<h3>\u00c9tape 2 : G\u00e9n\u00e9rez avec le chatbot d&#8217;IA<\/h3>\n<p>Rendez-vous sur le chatbot d&#8217;IA et saisissez votre requ\u00eate. Par exemple :<\/p>\n<p><strong>Requ\u00eate :<\/strong>\u00ab G\u00e9n\u00e9rer un graphique en barres montrant les ventes trimestrielles par r\u00e9gion \u00bb<\/p>\n<p>Le chatbot g\u00e9n\u00e9rera un graphique avec des donn\u00e9es d&#8217;exemple que vous pourrez utiliser comme point de d\u00e9part.<\/p>\n<h3>\u00c9tape 3 : Ouvrir dans VPasCode<\/h3>\n<p>Cliquez sur le lien pour ouvrir votre graphique dans VPasCode. Vous verrez :<\/p>\n<ul>\n<li><strong>Panneau gauche :<\/strong>\u00a0Le code de configuration ECharts<\/li>\n<li><strong>Panneau droit :<\/strong>\u00a0Aper\u00e7u en direct du graphique interactif<\/li>\n<\/ul>\n<h3>\u00c9tape 4 : Personnalisez vos donn\u00e9es<\/h3>\n<p>Remplacez les donn\u00e9es d&#8217;exemple par vos chiffres r\u00e9els. Par exemple :<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqNkbFug0AMQPdI+QcPlWglBgghaag6dOhalaRShyiDEyxy6pVDh0lBUf69PgptVGXIcPYZ7j37wJSsTAGPcByPAFixpgSOwNRwAl5ao2WyuoUVaqpg28KScgE8OPkdYIxmVXaIVXlOVihsVOX54NKrUQW7h\/K+LUXtVXvMzJfwvUFTTkXmDmTImMDaezGW98J7K1P\/bJ6xYpffSfKmB5sn8Z+JD6hrklMFfrpySQcqaoJbVcBN6AdBcDcM3f4jd8iUG9sKPMyQhq5fOuli1MXpb+eKrCIRrF0B4ulbDoP32i1aKSrG3YdUb4ZR\/3W4j30IJ4EPC7eJg8F9phuuf41uJpaF2MLQheiSrv+IV+mmopuLqZsyuGTrfsWVtkhMsayZrHksMufajEenh2+XTbPp\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqVkcFOg0AURfdN+g9vYTKasIBSWlvjwoVbTZQYTdMF0KeSwAwZhgbT9IP4Dn7MO4C2Jl3UxbyZF+aee+ehCpMqSbe0G4+ITGo0L2lHhmuDg3hhabgko9OcS1TOMrRFpEm3zQeUgvaOVabyXcUVvlr1pm2SjGXyyZUGJKpZOFSoFKxK39W9w1dhDVQeawZkwGSgstz0FCVl23C5pJV4UHoDhniuuu2+NHZ7rBBKrActbF6PyNsogxuuSZWjfeIty4ouWdKFR67rXomD7u1Il0QGIRTeCu1xhtCznuGkq35Xp7\/mZdtAYe\/ZjoDrbYfgAzuOtO5mkdpBiVCZKPvrch045E1chxb2ELg\/\/AOxH8HZwBk4C\/A8zxb\/BLAf5vnEKYhzwLqo7glg\/1v+g\/SBC7BmWPMARAtcj0f7m29TrslC\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = {\r\n  titre: { texte: 'Ventes trimestrielles par r\u00e9gion' },\r\n  infobulle: { d\u00e9clencheur: 'axe', pointeurAxe: { type: 'ombre' } },\r\n  l\u00e9gende: { donn\u00e9es: ['Nord', 'Sud', 'Est', 'Ouest'] },\r\n  axeX: { type: 'valeur', nom: 'Revenu (en $1 000)' },\r\n  axeY: { type: 'cat\u00e9gorie', donn\u00e9es: ['T1', 'T2', 'T3', 'T4'] },\r\n  s\u00e9ries: [\r\n    { nom: 'Nord', type: 'barre', pile: 'Total', donn\u00e9es: [85, 120, 95, 150] },\r\n    { nom: 'Sud', type: 'barre', pile: 'Total', donn\u00e9es: [65, 90, 110, 130] },\r\n    { nom: 'Est',  type: 'barre', pile: 'Total', donn\u00e9es: [45, 70, 85, 100] },\r\n    { nom: 'Ouest',  type: 'barre', pile: 'Total', donn\u00e9es: [30, 50, 60, 75] }\r\n  ]\r\n};\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqVkcFOg0AURfdN+g9vYTKasIBSWlvjwoVbTZQYTdMF0KeSwAwZhgbT9IP4Dn7MO4C2Jl3UxbyZF+aee+ehCpMqSbe0G4+ITGo0L2lHhmuDg3hhabgko9OcS1TOMrRFpEm3zQeUgvaOVabyXcUVvlr1pm2SjGXyyZUGJKpZOFSoFKxK39W9w1dhDVQeawZkwGSgstz0FCVl23C5pJV4UHoDhniuuu2+NHZ7rBBKrActbF6PyNsogxuuSZWjfeIty4ouWdKFR67rXomD7u1Il0QGIRTeCu1xhtCznuGkq35Xp7\/mZdtAYe\/ZjoDrbYfgAzuOtO5mkdpBiVCZKPvrch045E1chxb2ELg\/\/AOxH8HZwBk4C\/A8zxb\/BLAf5vnEKYhzwLqo7glg\/1v+g\/SBC7BmWPMARAtcj0f7m29TrslC\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqNkbFug0AMQPdI+QcPlWglBgghaag6dOhalaRShyiDEyxy6pVDh0lBUf69PgptVGXIcPYZ7j37wJSsTAGPcByPAFixpgSOwNRwAl5ao2WyuoUVaqpg28KScgE8OPkdYIxmVXaIVXlOVihsVOX54NKrUQW7h\/K+LUXtVXvMzJfwvUFTTkXmDmTImMDaezGW98J7K1P\/bJ6xYpffSfKmB5sn8Z+JD6hrklMFfrpySQcqaoJbVcBN6AdBcDcM3f4jd8iUG9sKPMyQhq5fOuli1MXpb+eKrCIRrF0B4ulbDoP32i1aKSrG3YdUb4ZR\/3W4j30IJ4EPC7eJg8F9phuuf41uJpaF2MLQheiSrv+IV+mmopuLqZsyuGTrfsWVtkhMsayZrHksMufajEenh2+XTbPp\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>\u00c9tape 5 : Formatez votre code<\/h3>\n<p>Si votre code devient encombr\u00e9 ou difficile \u00e0 lire, utilisez<a href=\"https:\/\/updates.visual-paradigm.com\/releases\/enhance-your-workflow-echarts-auto-formatting-now-live-in-vpascode\/\">la fonction <strong>Format<\/strong> fonctionnalit\u00e9<\/a>. Cliquez sur <code data-backticks=\"1\">&lt;\/&gt; Formater<\/code>bouton en haut de l&#8217;\u00e9diteur pour organiser instantan\u00e9ment votre script en indentations propres et standard.<\/p>\n<p><strong>Avant le formatage\u00a0:<\/strong><br \/>\n<img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/www.vpascode.com_Wordpress-3.png\"\/><\/p>\n<p><strong>Apr\u00e8s le formatage\u00a0:<\/strong><br \/>\n<img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/www.vpascode.com_Wordpress-1-3.png\"\/><\/p>\n<p>Chaque attribut est clairement list\u00e9 sur sa propre ligne, vous offrant une visibilit\u00e9 totale sur la structure de votre graphique et rendant facile la localisation et la mise \u00e0 jour des \u00e9tiquettes, des donn\u00e9es de s\u00e9rie ou des r\u00e8gles de style.<\/p>\n<h3>\u00c9tape 6\u00a0: Personnaliser le style<\/h3>\n<p>Modifiez les couleurs, les polices et d&#8217;autres \u00e9l\u00e9ments visuels\u00a0:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNp9jsEKgzAMhu+C7xDYwYuM1g6ZfQ1hl+GhusgKaqXNDkV897V1eNwlhC9f\/sSh1egkPLc8A1jUjBKKh3aaXFFGRH6NaNILHsDNxtBbAtkPJvBSpELAvWIlNKIKhfHY3UrgVRMgF4J1SVUWVUt+CokbRAAwmMnYcOAyjnVf98cNALOqQZOXwK4imXsaxDfOgHMVmeCCFz9HE85\/nDzbuy9vOUC2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNp9jsEKgzAQRO+C\/7DQgxcpiSlS8xtCL8VDtCsNqJFkewjivzeJxWMvy\/J2dmYcWo1OwnPLM4BFzSiheGinCV1RRkZ+jWzSCx7AzcbQWwLZDybwUqSCw71iJTSiCoPxuN1K4FUTIBeCdUmqLKqW\/BQcN4gAYDCTsSHgMo51X\/dHBoBZ1aDJS2BXkZR7OsQap8H5ikxwwYufJnSf\/2jybO++zq5BGw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">series: [{\r\n  name: 'Visites',\r\n  type: 'line',\r\n  smooth: true,\r\n  data: [820, 932, 901, 934, 1290, 1330],\r\n  areaStyle: { \r\n    color: '#ff6b6b',\r\n    opacity: 0.3 \r\n  },\r\n  lineStyle: { color: '#e03131' },\r\n  itemStyle: { color: '#e03131' }\r\n}]\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNp9jsEKgzAQRO+C\/7DQgxcpiSlS8xtCL8VDtCsNqJFkewjivzeJxWMvy\/J2dmYcWo1OwnPLM4BFzSiheGinCV1RRkZ+jWzSCx7AzcbQWwLZDybwUqSCw71iJTSiCoPxuN1K4FUTIBeCdUmqLKqW\/BQcN4gAYDCTsSHgMo51X\/dHBoBZ1aDJS2BXkZR7OsQap8H5ikxwwYufJnSf\/2jybO++zq5BGw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNp9jsEKgzAMhu+C7xDYwYuM1g6ZfQ1hl+GhusgKaqXNDkV897V1eNwlhC9f\/sSh1egkPLc8A1jUjBKKh3aaXFFGRH6NaNILHsDNxtBbAtkPJvBSpELAvWIlNKIKhfHY3UrgVRMgF4J1SVUWVUt+CokbRAAwmMnYcOAyjnVf98cNALOqQZOXwK4imXsaxDfOgHMVmeCCFz9HE85\/nDzbuy9vOUC2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>\u00c9tape 7\u00a0: Partager ou exporter<\/h3>\n<p>Une fois satisfait, copiez l&#8217;URL partageable ou exportez votre graphique pour l&#8217;utiliser dans des pr\u00e9sentations, des rapports ou des applications web.<\/p>\n<h2>\u00c9dition et personnalisation des graphiques dans VPasCode<\/h2>\n<h3>Comprendre la structure de configuration d&#8217;ECharts<\/h3>\n<p>Chaque graphique dans VPasCode suit une structure standard. Voyons ensemble les composants cl\u00e9s\u00a0:<\/p>\n<p><strong>1. Configuration du titre<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNorySzJSbVSqFbg5VJQKEmtKLFSUI\/MLy1ScM5ILCpRCAFJq+uAJHNS00CSyal5JalF6goK+voKAfnFmSWZ+XlAYZCsug5cGsgqykzPKFHn5aoFANy4HeM=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNo9ijEKgDAQBPuAf9juGsE+r7CyFz31ICQaVxDEv5s0NsuwMzQG9XjQOIB600OGxKyg1Z0Vax73zY5Lpa1R0KVGk0ZqFqDr0KfTaCmi\/FVL+\/tC2daN0rj3AzPuIUc=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">title: { \r\n  text: 'Votre titre de graphique',\r\n  left: 'center'  \/\/ Position : 'left', 'center', 'right'\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNo9ijEKgDAQBPuAf9juGsE+r7CyFz31ICQaVxDEv5s0NsuwMzQG9XjQOIB600OGxKyg1Z0Vax73zY5Lpa1R0KVGk0ZqFqDr0KfTaCmi\/FVL+\/tC2daN0rj3AzPuIUc=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNorySzJSbVSqFbg5VJQKEmtKLFSUI\/MLy1ScM5ILCpRCAFJq+uAJHNS00CSyal5JalF6goK+voKAfnFmSWZ+XlAYZCsug5cGsgqykzPKFHn5aoFANy4HeM=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>2. Param\u00e8tres de l&#8217;info-bulle<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNoryc\/PKckssFKoVuDlUlAoKcpMT08tslJQT6zILFbXUYACfX0F9cyS1FygCExGPS8\/L1UdpAkkEJCfmVcC0ggxB2hSZUEq0JjijMSU\/HJ1ZHNyMoH6dOBSyCbV8nLVAgC0xieY\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNoryc\/PKckssFKoVuDlUlAoKcpMT08tslJQT6zILFbXUYACfX0F9cyS1FygCExGPS8\/L1UdpAkkEJCfmVcC0ggxB2hSZUEq0JjijMSU\/HJ1ZHNyMoH6dOBSyCbV8nLVAgC0xieY\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">tooltip: { \r\n  trigger: 'axis',        \/\/ 'item', 'axis', 'none'\r\n  axisPointer: { \r\n    type: 'shadow'        \/\/ 'line', 'shadow', 'none'\r\n  }\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNoryc\/PKckssFKoVuDlUlAoKcpMT08tslJQT6zILFbXUYACfX0F9cyS1FygCExGPS8\/L1UdpAkkEJCfmVcC0ggxB2hSZUEq0JjijMSU\/HJ1ZHNyMoH6dOBSyCbV8nLVAgC0xieY\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNoryc\/PKckssFKoVuDlUlAoKcpMT08tslJQT6zILFbXUYACfX0F9cyS1FygCExGPS8\/L1UdpAkkEJCfmVcC0ggxB2hSZUEq0JjijMSU\/HJ1ZHNyMoH6dOBSyCbV8nLVAgC0xieY\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>3. Configuration de la l\u00e9gende<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNrLSU1PzUuxUqhW4OVSUEhJLEm0UohWD04tykwtVjBU11GAsY3UY3VASpLyS0ryc60UDA0UFPT1FQLyizNLMvPzrBTUS\/ILQOohCkCsnNS0EhBdlJmeUaLOy1ULALffH2o=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNrLSU1PzUuxUqhW4OVSUEhJLEm0UohWDz68sigzVcFQXUcBxjZSj9UBKUnKLynJz7VSMDRQUNDXVwjIL84syczPU7BSUC\/JLwBpgKgAsXJS00pAdFFmekaJOi9XLQAuyyCy\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">legend: { \r\n  data: ['S\u00e9rie 1', 'S\u00e9rie 2'],\r\n  bottom: 10  \/\/ Position : 'top', 'bottom', 'left', 'right'\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNrLSU1PzUuxUqhW4OVSUEhJLEm0UohWDz68sigzVcFQXUcBxjZSj9UBKUnKLynJz7VSMDRQUNDXVwjIL84syczPU7BSUC\/JLwBpgKgAsXJS00pAdFFmekaJOi9XLQAuyyCy\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNrLSU1PzUuxUqhW4OVSUEhJLEm0UohWD04tykwtVjBU11GAsY3UY3VASpLyS0ryc60UDA0UFPT1FQLyizNLMvPzrBTUS\/ILQOohCkCsnNS0EhBdlJmeUaLOy1ULALffH2o=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>4. Configuration des axes<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqrcKzILLZSqFbg5VJQKKksSLVSUE9OLElNzy+qVNdRgAB9fRRB9bLEnNJUEKMkMzdVHaQzJbEk0UohWt0rMQ8k7paaBKJ8E4vUY3VA8nmJuSCTffPzSjKAGmqBgpVYbIYajKQjKLUsNa8UZEktANt2Luc=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqrcKzILLZSqFbg5VJQKKksSLVSUE9OLElNzy+qVNdRgAB9fRRB9bLEnNJUEKMkMzdVHaQzJbEk0UohWt0rMQ8k7nZ4ZRmI9k0sUo\/VASnIS8wFGe2bn1kM1FALFKvEYjPUYCQNQallqXmlIC0A564vLw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">xAxis: { \r\n  type: 'category',       \/\/ 'category', 'value', 'time'\r\n  data: ['Jan', 'F\u00e9v', 'Mar'],\r\n  name: 'Mois'\r\n},\r\nyAxis: { \r\n  type: 'value',\r\n  name: 'Revenu'\r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqrcKzILLZSqFbg5VJQKKksSLVSUE9OLElNzy+qVNdRgAB9fRRB9bLEnNJUEKMkMzdVHaQzJbEk0UohWt0rMQ8k7nZ4ZRmI9k0sUo\/VASnIS8wFGe2bn1kM1FALFKvEYjPUYCQNQallqXmlIC0A564vLw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqrcKzILLZSqFbg5VJQKKksSLVSUE9OLElNzy+qVNdRgAB9fRRB9bLEnNJUEKMkMzdVHaQzJbEk0UohWt0rMQ8k7paaBKJ8E4vUY3VA8nmJuSCTffPzSjKAGmqBgpVYbIYajKQjKLUsNa8UZEktANt2Luc=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>5. D\u00e9finition des s\u00e9ries<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpNjjEKwzAMRfdC76DNS0iclC4+QC+QbCWD6ghq6sbB1mJC7l6rpSEaJPjSeyhRdJQM3NfzCWDGNxlQPXpKqpKE8yLJA6Oq4FBN8w+VdzPJXJwMYlsLOCFj0badrqDTpbVXPX6VidG+inMIjP5gLcpbiL81TWCfGDkJgJGw5+zLIyuEBa3jbEDXF9h2Sm52ZBs\/b885zg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNp1jrEKwjAQhvdC3+G2LKVNKy59CkFxkQ5nPDWYtjG5DqX0XVx9jr6YiSB08Yb7jw\/+j\/PkNPkaTlOaAHTYUg3iSB2TF1lEPNqIzuhEBqspih8URncU0+oYxCqPxQsyBm9ZyQwqGVa5lc1X6RnVIzgPPaNZWYNy1w8ODHm4ObR3\/RzCSa3VZnn7WEVHuOfRhJcm6C0qzWMNMt\/A\/Le\/vMAP7oqK0mRuPoNlRWM=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">series: [{\r\n  name: 'Ventes',\r\n  type: 'bar',            \/\/ 'bar', 'line', 'pie', etc.\r\n  data: [120, 200, 150],\r\n  stack: 'Total',         \/\/ Pour les graphiques empil\u00e9s\r\n  areaStyle: { opacity: 0.3 }  \/\/ Pour les graphiques \u00e0 surface\r\n}]\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNp1jrEKwjAQhvdC3+G2LKVNKy59CkFxkQ5nPDWYtjG5DqX0XVx9jr6YiSB08Yb7jw\/+j\/PkNPkaTlOaAHTYUg3iSB2TF1lEPNqIzuhEBqspih8URncU0+oYxCqPxQsyBm9ZyQwqGVa5lc1X6RnVIzgPPaNZWYNy1w8ODHm4ObR3\/RzCSa3VZnn7WEVHuOfRhJcm6C0qzWMNMt\/A\/Le\/vMAP7oqK0mRuPoNlRWM=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpNjjEKwzAMRfdC76DNS0iclC4+QC+QbCWD6ghq6sbB1mJC7l6rpSEaJPjSeyhRdJQM3NfzCWDGNxlQPXpKqpKE8yLJA6Oq4FBN8w+VdzPJXJwMYlsLOCFj0badrqDTpbVXPX6VidG+inMIjP5gLcpbiL81TWCfGDkJgJGw5+zLIyuEBa3jbEDXF9h2Sm52ZBs\/b885zg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>Techniques avanc\u00e9es de personnalisation<\/h3>\n<p><strong>Ajout de contr\u00f4les de grille<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpLL8pMsVKoVuDlUlDISU0rsVIwMdAB84oy0zOAXCMotyS\/wErBFMpJyi8pyc+1UjCG8pPz80oSM\/N8EpNSc6wUSopKU4HCtQAiqBfA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNpLL8pMsVKoVuDlUlDISU0rsVIwMdAB84oy0zOAXCMotyS\/wErBFMpJyi8pyc+1UjCG8pPz80oSM\/N8EpNSc6wUSopKU4HCtQAiqBfA\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">grid: { \r\n  left: 40, \r\n  right: 20, \r\n  top: 50, \r\n  bottom: 30, \r\n  containLabel: true \r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNpLL8pMsVKoVuDlUlDISU0rsVIwMdAB84oy0zOAXCMotyS\/wErBFMpJyi8pyc+1UjCG8pPz80oSM\/N8EpNSc6wUSopKU4HCtQAiqBfA\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpLL8pMsVKoVuDlUlDISU0rsVIwMdAB84oy0zOAXCMotyS\/wErBFMpJyi8pyc+1UjCG8pPz80oSM\/N8EpNSc6wUSopKU4HCtQAiqBfA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Personnalisation des couleurs<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpLzs\/JL7JSiFZXTkszSzJLUtdRUFc2SU1OSTaBME2TzFMMwUxLs+TUJBP1WABsCg0x\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNpLzs\/JL7JSiFZXTkszSzJLUtdRUFc2SU1OSTaBME2TzFMMwUxLs+TUJBP1WABsCg0x\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">color: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4']\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNpLzs\/JL7JSiFZXTkszSzJLUtdRUFc2SU1OSTaBME2TzFMMwUxLs+TUJBP1WABsCg0x\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNpLzs\/JL7JSiFZXTkszSzJLUtdRUFc2SU1OSTaBME2TzFMMwUxLs+TUJBP1WABsCg0x\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Ajout de cartes visuelles<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNoryywuTczxTSywUqhW4OVSUMjNzLNSMNCBsBMrrBSMoZySyoJUKwX15Py8ksy80vzSYnWIeH5RZmpeCVAmA8iqAsom5kBlclLTQOLJQOnUIqhYUn5JSX4uUNTQVFUdKFILACiWI5M=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNoryywuTczxTSywUqhW4OVSUMjNzLNSMNCBsBMrrBSMoZySyoJUKwX15Py8ksy80lR1iGh+UWZqXglQPAPIqgLKJeZAZXJS00DiyUDp1CKoWFJ+SUl+LlDU0FRVHShSCwDFZCKh\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">visualMap: { \r\n  min: 0, \r\n  max: 30, \r\n  type: 'continue', \r\n  orient: 'horizontal', \r\n  left: 'center', \r\n  bottom: '15%' \r\n}\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNoryywuTczxTSywUqhW4OVSUMjNzLNSMNCBsBMrrBSMoZySyoJUKwX15Py8ksy80lR1iGh+UWZqXglQPAPIqgLKJeZAZXJS00DiyUDp1CKoWFJ+SUl+LlDU0FRVHShSCwDFZCKh\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNoryywuTczxTSywUqhW4OVSUMjNzLNSMNCBsBMrrBSMoZySyoJUKwX15Py8ksy80vzSYnWIeH5RZmpeCVAmA8iqAsom5kBlclLTQOLJQOnUIqhYUn5JSX4uUNTQVFUdKFILACiWI5M=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h2>Exemples et mod\u00e8les du monde r\u00e9el<\/h2>\n<p>Pour vous aider \u00e0 commencer rapidement, voici des exemples pr\u00eats \u00e0 l&#8217;emploi pour des sc\u00e9narios courants :<\/p>\n<h3>1. Analyse des ventes r\u00e9gionales (graphique \u00e0 barres empil\u00e9es)<\/h3>\n<p>Parfait pour examiner les totaux absolus entre les groupes tout en analysant simultan\u00e9ment les distributions cat\u00e9gorielles.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55af7c83297.png\"\/><\/p>\n<p>Ce graphique montre les performances trimestrielles selon diff\u00e9rentes r\u00e9gions, chaque barre \u00e9tant empil\u00e9e pour illustrer les contributions individuelles.<\/p>\n<h3>2. Croissance mensuelle du site web (graphique en courbes avec zone ombr\u00e9e)<\/h3>\n<p>Con\u00e7u pour suivre les \u00e9volutions chronologiques gr\u00e2ce \u00e0 des interpolations fluides et des alignements de grille propres.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55af9111db3.png\"\/><\/p>\n<p>La zone ombr\u00e9e met en \u00e9vidence le volume et rend les tendances plus visiblement apparentes.<\/p>\n<h3>3. R\u00e9partition du trafic provenant des r\u00e9f\u00e9rences (graphique circulaire interactif)<\/h3>\n<p>Un agencement classique pour calculer la part de march\u00e9 relative ou les sources de trafic, accompagn\u00e9 d&#8217;un conteneur de l\u00e9gende propre en bas.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55afd092eaa.png\"\/><\/p>\n<p>Ce graphique vous aide \u00e0 identifier rapidement les canaux qui g\u00e9n\u00e8rent le plus de trafic.<\/p>\n<h3>4. Comparaison de l&#8217;architecture du service mesh (graphique en radar)<\/h3>\n<p>Une structure de graphique multivari\u00e9e souvent utilis\u00e9e pour \u00e9valuer les capacit\u00e9s techniques, les benchmarks logiciels ou les crit\u00e8res complexes d&#8217;architecture en parall\u00e8le.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55b17647e8f.png\"\/><\/p>\n<p>Comparez plusieurs syst\u00e8mes selon diverses dimensions de performance en un seul aper\u00e7u.<\/p>\n<h3>5. Profil de m\u00e9trique de latence d&#8217;inf\u00e9rence (graphique en nuage de points)<\/h3>\n<p>Id\u00e9al pour identifier les pics anormaux, les seuils de taille des charges utiles et les goulets d&#8217;\u00e9tranglement des applications dans des infrastructures distribu\u00e9es.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55afdea74d3.png\"\/><\/p>\n<p>Chaque point repr\u00e9sente un point de donn\u00e9es, ce qui facilite la d\u00e9tection des corr\u00e9lations et des anomalies.<\/p>\n<h3>6. Licence du code source \u00e0 plusieurs niveaux (graphique en soleil)<\/h3>\n<p>Visualisez les relations hi\u00e9rarchiques \u00e0 l&#8217;aide d&#8217;anneaux concentriques. Ce g\u00e9n\u00e9rateur de graphiques simplifie les configurations de donn\u00e9es complexes et imbriqu\u00e9es.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55afed2221b.png\"\/><\/p>\n<p>Voyez comment les diff\u00e9rents types de licences se r\u00e9partissent au sein de votre hi\u00e9rarchie de code source.<\/p>\n<h3>7. Analyseur de flux des co\u00fbts d&#8217;infrastructure (diagramme de Sankey)<\/h3>\n<p>Suivez la cartographie des ressources op\u00e9rationnelles ou les variables financi\u00e8res \u00e0 travers les \u00e9tapes de calcul \u00e0 l&#8217;aide de liens de poids de n\u0153uds fluides.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55aff8ee208.png\"\/><\/p>\n<p>Suivez comment le budget circule de l&#8217;allocation totale vers des services et des composants sp\u00e9cifiques.<\/p>\n<h3>8. Grille de vitesse de d\u00e9ploiement horaire (carte de chaleur)<\/h3>\n<p>Surveillez facilement les densit\u00e9s syst\u00e9miques, les volumes de d\u00e9ploiement ou les changements continus du trafic \u00e0 travers des matrices de p\u00e9riodes personnalis\u00e9es.<\/p>\n<p><img alt=\"\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a55b13325ddf.png\"\/><\/p>\n<p>Identifiez les motifs de fr\u00e9quence de d\u00e9ploiement \u00e0 travers diff\u00e9rentes journ\u00e9es et heures.<\/p>\n<h2>Meilleures pratiques de mise en forme du code<\/h2>\n<h3>Pourquoi la mise en forme est importante<\/h3>\n<p>Lorsque vous travaillez avec des scripts de graphiques complexes, la lisibilit\u00e9 est essentielle. R\u00e9duire plusieurs attributs sur une seule ligne rend facile de manquer des d\u00e9tails ou de commettre des erreurs de modification. Avec l&#8217;outil de mise en forme de VPasCode, votre structure de code est transform\u00e9e instantan\u00e9ment :<\/p>\n<ul>\n<li><strong>Rien de cach\u00e9 :<\/strong>\u00a0Chaque attribut est clairement indiqu\u00e9 sur sa propre ligne, vous offrant une visibilit\u00e9 totale sur la structure de votre graphique.<\/li>\n<li><strong>\u00c9dition sans effort :<\/strong>\u00a0Localisez rapidement et mettez \u00e0 jour les \u00e9tiquettes, les donn\u00e9es de s\u00e9rie ou les r\u00e8gles de style sans chercher \u00e0 travers des lignes de code serr\u00e9es.<\/li>\n<li><strong>Nettoyage en un clic :<\/strong>\u00a0Cliquez simplement sur le bouton\u00a0<strong><code data-backticks=\"1\">&lt;\/&gt; Formater<\/code><\/strong>\u00a0en haut de l&#8217;\u00e9diteur pour organiser instantan\u00e9ment votre script en indentations propres et standard.<\/li>\n<\/ul>\n<h3>Exemple de mise en forme<\/h3>\n<p><strong>Avant (compress\u00e9) :<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqNjz1PwzAQQPdK\/Q83IBmkDElLEQ1iYGBFpEViqBiuzSm1MHZkX0qiiv\/OOWmgYkKy7sP2e2e7mrWzcA9HYM2G8lhQyzmookHP5E0HazQUYNvBiiq5reArmU7YOcO67gGvq4q8MNjqoBKI6dlpy3FTzrtaxCrssXSfQgsP04mhimwZz0tkzGGjnpznveBq7ZqheMTAMb+S5LeBax\/EfqY9oGlILln8iO2KDmQbgktt4SJL0jS9UgPY\/QF3yFQ53wk7vqDI4rRi1sd5H6\/HuYG8JuE3x3HU+N6Tb4temsC4e5fuxTGaX\/XtIoFsliawjMUiPUl\/XOOX\/+O6EcVSVFkWwzy6ZN19Ay7GiKM=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqNkMFKw0AQhu+FvsMchFXIIWmt2IoHEa8qGLwUD9NmEhe32TA7kZTiA\/kcvpizSVvFk7D8M8Pyf\/Pv+kasr+EadiBWHC1iQ50swDxTLRRA2G4oqJJzOjbIwF+flboMfCTjkXjvxDa9kW1VEasXOzIJYGfDo7eK4f562yjf+M2KSb3qhvHIUUV1Ea8LFFzA0tx7LtRsntq+3AWJ5aHVEOZlMHU3Sv6FfEfXxoU1buJ4+2rLkgkKg2WJljX2KdVwkkGapmdmYGz\/MNYoVHneKuaQJM\/i5nzS67TX80OEQPoj6l\/uDlv3ufe4FTLHSEFw\/aZz7gXdD\/tylkA2SROYx2aW7qlH2PD4\/7EuFDFXVJZFmUaWnqtvH\/2Otw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = { title: { text: 'Ventes trimestrielles par r\u00e9gion' },\r\ntooltip: { trigger: 'axe', axisPointer: { type: 'ombre' } }, \r\nlegend: { data: ['Nord', 'Sud', 'Est', 'Ouest'] }, \r\nxAxis: { type: 'value', name: 'Chiffre d'affaires (en $1 000)' }, \r\nyAxis: { type: 'category', data: ['T1', 'T2', 'T3', 'T4'] }, \r\nseries: [{ name: 'Nord', type: 'barre', stack: 'Total', data: [85, 120, 95, 150] }, \r\n{ name: 'Sud', type: 'barre', stack: 'Total', data: [65, 90, 110, 130] }] };<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqNkMFKw0AQhu+FvsMchFXIIWmt2IoHEa8qGLwUD9NmEhe32TA7kZTiA\/kcvpizSVvFk7D8M8Pyf\/Pv+kasr+EadiBWHC1iQ50swDxTLRRA2G4oqJJzOjbIwF+flboMfCTjkXjvxDa9kW1VEasXOzIJYGfDo7eK4f562yjf+M2KSb3qhvHIUUV1Ea8LFFzA0tx7LtRsntq+3AWJ5aHVEOZlMHU3Sv6FfEfXxoU1buJ4+2rLkgkKg2WJljX2KdVwkkGapmdmYGz\/MNYoVHneKuaQJM\/i5nzS67TX80OEQPoj6l\/uDlv3ufe4FTLHSEFw\/aZz7gXdD\/tylkA2SROYx2aW7qlH2PD4\/7EuFDFXVJZFmUaWnqtvH\/2Otw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqNjz1PwzAQQPdK\/Q83IBmkDElLEQ1iYGBFpEViqBiuzSm1MHZkX0qiiv\/OOWmgYkKy7sP2e2e7mrWzcA9HYM2G8lhQyzmookHP5E0HazQUYNvBiiq5reArmU7YOcO67gGvq4q8MNjqoBKI6dlpy3FTzrtaxCrssXSfQgsP04mhimwZz0tkzGGjnpznveBq7ZqheMTAMb+S5LeBax\/EfqY9oGlILln8iO2KDmQbgktt4SJL0jS9UgPY\/QF3yFQ53wk7vqDI4rRi1sd5H6\/HuYG8JuE3x3HU+N6Tb4temsC4e5fuxTGaX\/XtIoFsliawjMUiPUl\/XOOX\/+O6EcVSVFkWwzy6ZN19Ay7GiKM=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Apr\u00e8s (mise en forme) :<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">ECharts<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqlUEtPg0AQvjfpf5iDyWrCAVprLMaDB69GWhMPDYdpmdCNK0uWoUIM\/91dHgUfNy8zOx\/zPRids9QZ3MMnzGcALFlR2A92pIpDEFGJhsmoGraoqIB9DRtKLU+0e43XUrVWLPMJ2cg0JWP5WMlCeD3shmctM3afhl27XefWWBRHTPSH6OGm12+bopSyZOQkyBjCTjxpw0crL7a67B6PWLDrr2R7PNWoHqz7JGJnekJV0jlghu8O3NCJspLgUmZwEXi+71+JqVT9p9QBmVJt6rPakDIKXKJo0dZlW6+\/ZyvISLKKu444nqYPNPznj4vt0UzAgvHwZtEXzagmeB\/jduVBsPA9WLvHyo+HQw+bv1yHo\/7H9caara1pELiyHF1di+ez5u4L4fSbXg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqlUMtOw0AMvFfqP\/iAtCDlkLQU0SAOCHEFJCouVQ9u44QVm2zkbFAq1A\/iO\/gxnHTbhMeNi70e2TOzY0unbQHX8A7jEYDTzlDsBxmpcTGoZyocVeBY51RJJWNkLJGBPz8yuVfd\/i7oKKw1TpcDEtZZRiw82JAKPIqNrh6tFmLuV2V5W4q+svmaSXl059m7ZiijIulPEnQYw1LdW06EXD3VXburXNseajGsVkOC5kaUB+72gm9o6t5cgXkL3r7oNGWCRGGaomb59CkVcBJBGIZnasi6\/ZN1g44yy9sj8cHtImrdLSZdnXb1\/LvNiiRnYVzuD\/uEvDf\/3x+5rZGZBnDlcPMq+MI6NAPc+7icBRBNwgDm7WMWrg6JHzZ\/ye7j\/Z\/qhYjNRTSK2jLtVdu2Go92V1+MRqFy\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code class=\"language-echarts\" data-language=\"echarts\" class=\"language-echarts\">option = { \r\n  title: { \r\n    text: 'Ventes trimestrielles par r\u00e9gion' \r\n  },\r\n  tooltip: { \r\n    trigger: 'axe', \r\n    axisPointer: { \r\n      type: 'ombre' \r\n    } \r\n  }, \r\n  legend: { \r\n    data: ['Nord', 'Sud', 'Est', 'Ouest'] \r\n  }, \r\n  xAxis: { \r\n    type: 'value', \r\n    name: 'Chiffre d'affaires (en $1 000)' \r\n  }, \r\n  yAxis: { \r\n    type: 'category', \r\n    data: ['T1', 'T2', 'T3', 'T4'] \r\n  }, \r\n  series: [\r\n    { \r\n      name: 'Nord', \r\n      type: 'barre', \r\n      stack: 'Total', \r\n      data: [85, 120, 95, 150] \r\n    }, \r\n    { \r\n      name: 'Sud', \r\n      type: 'barre', \r\n      stack: 'Total', \r\n      data: [65, 90, 110, 130] \r\n    }\r\n  ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqlUMtOw0AMvFfqP\/iAtCDlkLQU0SAOCHEFJCouVQ9u44QVm2zkbFAq1A\/iO\/gxnHTbhMeNi70e2TOzY0unbQHX8A7jEYDTzlDsBxmpcTGoZyocVeBY51RJJWNkLJGBPz8yuVfd\/i7oKKw1TpcDEtZZRiw82JAKPIqNrh6tFmLuV2V5W4q+svmaSXl059m7ZiijIulPEnQYw1LdW06EXD3VXburXNseajGsVkOC5kaUB+72gm9o6t5cgXkL3r7oNGWCRGGaomb59CkVcBJBGIZnasi6\/ZN1g44yy9sj8cHtImrdLSZdnXb1\/LvNiiRnYVzuD\/uEvDf\/3x+5rZGZBnDlcPMq+MI6NAPc+7icBRBNwgDm7WMWrg6JHzZ\/ye7j\/Z\/qhYjNRTSK2jLtVdu2Go92V1+MRqFy\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#echarts:eNqlUEtPg0AQvjfpf5iDyWrCAVprLMaDB69GWhMPDYdpmdCNK0uWoUIM\/91dHgUfNy8zOx\/zPRids9QZ3MMnzGcALFlR2A92pIpDEFGJhsmoGraoqIB9DRtKLU+0e43XUrVWLPMJ2cg0JWP5WMlCeD3shmctM3afhl27XefWWBRHTPSH6OGm12+bopSyZOQkyBjCTjxpw0crL7a67B6PWLDrr2R7PNWoHqz7JGJnekJV0jlghu8O3NCJspLgUmZwEXi+71+JqVT9p9QBmVJt6rPakDIKXKJo0dZlW6+\/ZyvISLKKu444nqYPNPznj4vt0UzAgvHwZtEXzagmeB\/jduVBsPA9WLvHyo+HQw+bv1yHo\/7H9caara1pELiyHF1di+ez5u4L4fSbXg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Modifier ECharts dans VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p>Voyez \u00e0 quel point le code mis en forme est plus facile \u00e0 manipuler ? Chaque objet et tableau imbriqu\u00e9s sont correctement indent\u00e9s, ce qui permet de comprendre rapidement la structure.<\/p>\n<h2>Conseils pour r\u00e9ussir<\/h2>\n<h3>1. Commencez par le simple<\/h3>\n<p>Commencez par des types de graphiques basiques comme les diagrammes en barres ou les graphiques lin\u00e9aires avant de passer aux visualisations complexes comme les diagrammes de Sankey ou les graphiques en couronne.<\/p>\n<h3>2. Utilisez des invites descriptives<\/h3>\n<p>Plus vous \u00eates pr\u00e9cis avec le chatbot IA, meilleurs seront vos r\u00e9sultats. Incluez :<\/p>\n<ul>\n<li>Type de graphique<\/li>\n<li>Cat\u00e9gories de donn\u00e9es<\/li>\n<li>P\u00e9riodes temporelles<\/li>\n<li>Indicateurs sp\u00e9cifiques<\/li>\n<\/ul>\n<h3>3. Validez vos donn\u00e9es<\/h3>\n<p>V\u00e9rifiez toujours que vos chiffres sont exacts et que les cat\u00e9gories correspondent \u00e0 vos \u00e9tiquettes de donn\u00e9es.<\/p>\n<h3>4. Pensez \u00e0 votre public<\/h3>\n<p>Choisissez des types de graphiques que votre public comprendra. Tous ne sont pas familiers avec les graphiques radar ou les diagrammes de Sankey.<\/p>\n<h3>5. Gardez-le propre<\/h3>\n<p>\u00c9vitez de surcharger les graphiques avec trop d&#8217;informations. Si vous avez plusieurs histoires \u00e0 raconter, cr\u00e9ez plusieurs graphiques.<\/p>\n<h3>6. Utilisez les couleurs de mani\u00e8re intentionnelle<\/h3>\n<p>Les couleurs doivent am\u00e9liorer la compr\u00e9hension, pas distraire. Utilisez des couleurs coh\u00e9rentes pour les m\u00eames cat\u00e9gories sur diff\u00e9rents graphiques.<\/p>\n<h3>7. Testez l&#8217;interactivit\u00e9<\/h3>\n<p>Si vous cr\u00e9ez des graphiques interactifs, testez tous les \u00e9tats au survol, les infobulles et les comportements au clic pour vous assurer qu&#8217;ils fonctionnent comme pr\u00e9vu.<\/p>\n<h3>8. Enregistrez votre travail<\/h3>\n<p>Utilisez la fonctionnalit\u00e9 d&#8217;URL partageable pour enregistrer diff\u00e9rentes versions de vos graphiques. Cela facilite le retour aux it\u00e9rations pr\u00e9c\u00e9dentes ou le partage de versions sp\u00e9cifiques avec vos collaborateurs.<\/p>\n<h2>D\u00e9pannage des probl\u00e8mes courants<\/h2>\n<h3>Le graphique ne s&#8217;affiche pas<\/h3>\n<ul>\n<li>V\u00e9rifiez les erreurs de syntaxe dans votre configuration JSON<\/li>\n<li>Assurez-vous que toutes les accolades et virgules sont correctement plac\u00e9es<\/li>\n<li>V\u00e9rifiez que vos tableaux de donn\u00e9es correspondent au format attendu<\/li>\n<\/ul>\n<h3>Les donn\u00e9es ne s&#8217;affichent pas correctement<\/h3>\n<ul>\n<li>Confirmez que les types de vos axes x et y correspondent \u00e0 vos donn\u00e9es<\/li>\n<li>V\u00e9rifiez que les tableaux de donn\u00e9es des s\u00e9ries contiennent le bon nombre de valeurs<\/li>\n<li>V\u00e9rifiez que les noms de cat\u00e9gorie correspondent exactement (respect de la casse)<\/li>\n<\/ul>\n<h3>Les couleurs ne s&#8217;appliquent pas<\/h3>\n<ul>\n<li>Assurez-vous que les valeurs de couleur sont au bon format (#hex, rgb() ou noms de couleurs)<\/li>\n<li>V\u00e9rifiez que vous appliquez les couleurs aux bonnes propri\u00e9t\u00e9s (itemStyle, lineStyle, areaStyle)<\/li>\n<\/ul>\n<h3>Les infobulles ne fonctionnent pas<\/h3>\n<ul>\n<li>V\u00e9rifiez que le d\u00e9clencheur de l&#8217;infobulle est correctement configur\u00e9 (\u2018item\u2019 pour les diagrammes en secteurs, \u2018axis\u2019 pour les diagrammes en barres\/lin\u00e9aires)<\/li>\n<li>Assurez-vous que vos s\u00e9ries ont des propri\u00e9t\u00e9s de nom d\u00e9finies<\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>La cr\u00e9ation de graphiques professionnels et interactifs n&#8217;exige plus de logiciels co\u00fbteux ni de comp\u00e9tences avanc\u00e9es en programmation. Gr\u00e2ce \u00e0 la combinaison du chatbot IA de Visual Paradigm et de l&#8217;int\u00e9gration puissante d&#8217;ECharts de VPasCode, vous disposez de tout ce qu&#8217;il vous faut pour transformer des donn\u00e9es brutes en r\u00e9cits visuels percutants.<\/p>\n<p>Le flux de travail est simple mais puissant :<\/p>\n<ol>\n<li><strong>Commencez par l&#8217;IA :<\/strong>\u00a0Utilisez un langage naturel pour g\u00e9n\u00e9rer instantan\u00e9ment votre graphique initial<\/li>\n<li><strong>Affinez avec le code :<\/strong>\u00a0Ouvrez dans VPasCode pour personnaliser les donn\u00e9es, le style et le comportement<\/li>\n<li><strong>Formatez pour la clart\u00e9<\/strong>Utilisez l&#8217;outil de formatage en un clic pour garder votre code propre et maintenable<\/li>\n<li><strong>Partager et collaborer :<\/strong>G\u00e9n\u00e9rez des URL partageables pour une collaboration et une pr\u00e9sentation facilit\u00e9es<\/li>\n<\/ol>\n<p>Que vous ayez besoin de cr\u00e9er un simple diagramme en barres montrant les tendances mensuelles des ventes, un diagramme Sankey complexe suivant les flux d&#8217;\u00e9nergie, ou un diagramme radar interactif comparant les performances d&#8217;\u00e9quipes, ce g\u00e9n\u00e9rateur de graphiques aliment\u00e9 par l&#8217;IA vous offre la flexibilit\u00e9 n\u00e9cessaire pour cr\u00e9er exactement ce dont vous avez besoin.<\/p>\n<p>Les exemples et mod\u00e8les fournis dans ce guide ne montrent qu&#8217;une infime partie de ce qui est possible. Des cartes de chaleur illustrant la vitesse de d\u00e9ploiement aux diagrammes en soleil visualisant des structures de donn\u00e9es hi\u00e9rarchiques, ECharts combin\u00e9 \u00e0 VPasCode ouvre des perspectives infinies pour la visualisation des donn\u00e9es.<\/p>\n<p>Cessez de vous contenter d&#8217;images AI rigides et non modifiables, ou de passer des heures \u00e0 ajuster manuellement les pixels dans des outils traditionnels de cr\u00e9ation de graphiques. D\u00e9couvrez la puissance d&#8217;un g\u00e9n\u00e9rateur de graphiques flexible qui s&#8217;adapte \u00e0 vos besoins r\u00e9els. Donnez vie \u00e0 vos id\u00e9es instantan\u00e9ment gr\u00e2ce \u00e0 la g\u00e9n\u00e9ration de graphiques par chatbot IA, et modifiez librement les donn\u00e9es et le style \u00e0 l&#8217;aide de VPasCode.<\/p>\n<p>Vos donn\u00e9es ont une histoire \u00e0 raconter. Maintenant, vous disposez des outils pour la raconter magnifiquement.<\/p>\n<h2>R\u00e9f\u00e9rences<\/h2>\n<ol>\n<li><a href=\"https:\/\/ai-toolbox.visual-paradigm.com\/app\/chatbot-v2\/\"><strong>G\u00e9n\u00e9ration de graphiques par IA : cr\u00e9ez avec le chatbot, \u00e9ditez avec VPasCode<\/strong><\/a>: D\u00e9couvrez comment combiner la cr\u00e9ation instantan\u00e9e de graphiques aliment\u00e9e par l&#8217;IA avec la flexibilit\u00e9 d&#8217;\u00e9dition bas\u00e9e sur le code pour un contr\u00f4le total de vos visualisations de donn\u00e9es.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/overview\/\"><strong>Aper\u00e7u de VPasCode<\/strong><\/a>: Explorez la plateforme unifi\u00e9e textes-vers-diagrammes qui prend en charge Mermaid, PlantUML, Graphviz et ECharts dans un environnement int\u00e9gr\u00e9 unique.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/diagram-as-code-tool\/\"><strong>Outil Diagramme-en-Code<\/strong><\/a>: D\u00e9couvrez l&#8217;approche innovante de Visual Paradigm pour cr\u00e9er des diagrammes et des graphiques par code, afin d&#8217;assurer pr\u00e9cision et contr\u00f4le de version.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/\"><strong>\u00c9diteur en direct VPasCode<\/strong><\/a>: Acc\u00e9dez \u00e0 l&#8217;\u00e9diteur interactif pour cr\u00e9er, personnaliser et partager des visualisations ECharts avec aper\u00e7u en temps r\u00e9el et formatage en un clic.<\/li>\n<li><a href=\"https:\/\/ai-toolbox.visual-paradigm.com\/app\/chatbot-v2\/share\/9c2809f5-cc0c-4935-81e0-ae081f4652b5\"><strong>Chatbot de la bo\u00eete \u00e0 outils IA<\/strong><\/a>: Essayez des sessions de chat exemples qui montrent comment g\u00e9n\u00e9rer des diagrammes en barres, des diagrammes en lignes, des diagrammes circulaires et bien plus encore \u00e0 l&#8217;aide de commandes en langage naturel.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Dans un monde de plus en plus ax\u00e9 sur les donn\u00e9es, la capacit\u00e9 \u00e0 transformer des chiffres bruts en<\/p>\n","protected":false},"author":3482,"featured_media":11293,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","fifu_image_url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png","fifu_image_alt":"","footnotes":""},"categories":[144,145,162],"tags":[],"class_list":["post-11292","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","category-ai-chatbot","category-vpascode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Du z\u00e9ro \u00e0 la ma\u00eetrise de la visualisation des donn\u00e9es : un guide pour d\u00e9butants sur la cr\u00e9ation de graphiques aliment\u00e9s par l&#039;IA avec VPasCode et ECharts - ArchiMetric French<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Du z\u00e9ro \u00e0 la ma\u00eetrise de la visualisation des donn\u00e9es : un guide pour d\u00e9butants sur la cr\u00e9ation de graphiques aliment\u00e9s par l&#039;IA avec VPasCode et ECharts - ArchiMetric French\" \/>\n<meta property=\"og:description\" content=\"Introduction Dans un monde de plus en plus ax\u00e9 sur les donn\u00e9es, la capacit\u00e9 \u00e0 transformer des chiffres bruts en\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\" \/>\n<meta property=\"og:site_name\" content=\"ArchiMetric French\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-28T07:15:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"572\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.archimetric.com\/fr\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba\"},\"headline\":\"Du z\u00e9ro \u00e0 la ma\u00eetrise de la visualisation des donn\u00e9es : un guide pour d\u00e9butants sur la cr\u00e9ation de graphiques aliment\u00e9s par l&#8217;IA avec VPasCode et ECharts\",\"datePublished\":\"2026-07-28T07:15:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\"},\"wordCount\":4518,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.archimetric.com\/fr\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a68577788335.png\",\"articleSection\":[\"AI\",\"AI Chatbot\",\"VPasCode\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\",\"url\":\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\",\"name\":\"Du z\u00e9ro \u00e0 la ma\u00eetrise de la visualisation des donn\u00e9es : un guide pour d\u00e9butants sur la cr\u00e9ation de graphiques aliment\u00e9s par l'IA avec VPasCode et ECharts - ArchiMetric French\",\"isPartOf\":{\"@id\":\"https:\/\/www.archimetric.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.archimetric.com\/fr\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a68577788335.png\",\"datePublished\":\"2026-07-28T07:15:09+00:00\",\"author\":{\"@id\":\"https:\/\/www.archimetric.com\/fr\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage\",\"url\":\"https:\/\/www.archimetric.com\/fr\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a68577788335.png\",\"contentUrl\":\"https:\/\/www.archimetric.com\/fr\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a68577788335.png\",\"width\":1024,\"height\":572},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.archimetric.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Du z\u00e9ro \u00e0 la ma\u00eetrise de la visualisation des donn\u00e9es : un guide pour d\u00e9butants sur la cr\u00e9ation de graphiques aliment\u00e9s par l&#8217;IA avec VPasCode et ECharts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.archimetric.com\/fr\/#website\",\"url\":\"https:\/\/www.archimetric.com\/fr\/\",\"name\":\"ArchiMetric French\",\"description\":\"EA, Dev Ops, Scrum, Agile and More\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.archimetric.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.archimetric.com\/fr\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.archimetric.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.archimetric.com\/fr\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Du z\u00e9ro \u00e0 la ma\u00eetrise de la visualisation des donn\u00e9es : un guide pour d\u00e9butants sur la cr\u00e9ation de graphiques aliment\u00e9s par l'IA avec VPasCode et ECharts - ArchiMetric French","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/","og_locale":"fr_FR","og_type":"article","og_title":"Du z\u00e9ro \u00e0 la ma\u00eetrise de la visualisation des donn\u00e9es : un guide pour d\u00e9butants sur la cr\u00e9ation de graphiques aliment\u00e9s par l'IA avec VPasCode et ECharts - ArchiMetric French","og_description":"Introduction Dans un monde de plus en plus ax\u00e9 sur les donn\u00e9es, la capacit\u00e9 \u00e0 transformer des chiffres bruts en","og_url":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/","og_site_name":"ArchiMetric French","article_published_time":"2026-07-28T07:15:09+00:00","og_image":[{"url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png","type":"","width":"","height":""},{"width":1024,"height":572,"url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/07\/img_6a68577788335.png","twitter_misc":{"\u00c9crit par":"curtis","Dur\u00e9e de lecture estim\u00e9e":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#article","isPartOf":{"@id":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/"},"author":{"name":"curtis","@id":"https:\/\/www.archimetric.com\/fr\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba"},"headline":"Du z\u00e9ro \u00e0 la ma\u00eetrise de la visualisation des donn\u00e9es : un guide pour d\u00e9butants sur la cr\u00e9ation de graphiques aliment\u00e9s par l&#8217;IA avec VPasCode et ECharts","datePublished":"2026-07-28T07:15:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/"},"wordCount":4518,"commentCount":0,"image":{"@id":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.archimetric.com\/fr\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a68577788335.png","articleSection":["AI","AI Chatbot","VPasCode"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/","url":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/","name":"Du z\u00e9ro \u00e0 la ma\u00eetrise de la visualisation des donn\u00e9es : un guide pour d\u00e9butants sur la cr\u00e9ation de graphiques aliment\u00e9s par l'IA avec VPasCode et ECharts - ArchiMetric French","isPartOf":{"@id":"https:\/\/www.archimetric.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage"},"image":{"@id":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.archimetric.com\/fr\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a68577788335.png","datePublished":"2026-07-28T07:15:09+00:00","author":{"@id":"https:\/\/www.archimetric.com\/fr\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba"},"breadcrumb":{"@id":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#primaryimage","url":"https:\/\/www.archimetric.com\/fr\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a68577788335.png","contentUrl":"https:\/\/www.archimetric.com\/fr\/wp-content\/uploads\/sites\/8\/2026\/07\/img_6a68577788335.png","width":1024,"height":572},{"@type":"BreadcrumbList","@id":"https:\/\/www.archimetric.com\/fr\/from-zero-to-data-visualization-mastery-a-beginners-guide-to-ai-powered-chart-creation-with-vpascode-and-echarts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.archimetric.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Du z\u00e9ro \u00e0 la ma\u00eetrise de la visualisation des donn\u00e9es : un guide pour d\u00e9butants sur la cr\u00e9ation de graphiques aliment\u00e9s par l&#8217;IA avec VPasCode et ECharts"}]},{"@type":"WebSite","@id":"https:\/\/www.archimetric.com\/fr\/#website","url":"https:\/\/www.archimetric.com\/fr\/","name":"ArchiMetric French","description":"EA, Dev Ops, Scrum, Agile and More","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.archimetric.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/www.archimetric.com\/fr\/#\/schema\/person\/71e6318556cda44457a5b68e284bedba","name":"curtis","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.archimetric.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.archimetric.com\/fr\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.archimetric.com\/fr\/wp-json\/wp\/v2\/posts\/11292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.archimetric.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.archimetric.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.archimetric.com\/fr\/wp-json\/wp\/v2\/users\/3482"}],"replies":[{"embeddable":true,"href":"https:\/\/www.archimetric.com\/fr\/wp-json\/wp\/v2\/comments?post=11292"}],"version-history":[{"count":0,"href":"https:\/\/www.archimetric.com\/fr\/wp-json\/wp\/v2\/posts\/11292\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.archimetric.com\/fr\/wp-json\/wp\/v2\/media\/11293"}],"wp:attachment":[{"href":"https:\/\/www.archimetric.com\/fr\/wp-json\/wp\/v2\/media?parent=11292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.archimetric.com\/fr\/wp-json\/wp\/v2\/categories?post=11292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.archimetric.com\/fr\/wp-json\/wp\/v2\/tags?post=11292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}