# Comment intégrer des graphiques interactifs dans NoteRich Les données ne valent rien tant qu’elles ne sont pas bien comprises. Dans le domaine de la gestion du savoir personnel, il est crucial de transformer les chiffres bruts et les données structurées en informations visuelles. **NoteRich** crée un lien entre le texte et les données, en supportant nativement **Apache ECharts**, permettant ainsi d’intégrer des graphiques interactifs prêts à être publiés directement dans vos notes. Contrairement aux outils basés sur le cloud qui envoient vos données vers des serveurs externes pour leur affichage, **NoteRich** traite et affichage ECharts directement sur votre appareil local. Cela assure que vos données restent 100% privées tout en offrant une expérience de visualisation interactive et fluide. --- ## Pourquoi ECharts dans NoteRich ? Apache ECharts est une bibliothèque de visualisation open-source réputée pour sa fluidité, sa profondeur et sa compatibilité avec plusieurs plateformes. En intégrant ECharts de manière native, **NoteRich** offre plusieurs avantages distincts : - **Affichage sans code** : Écrivez une configuration JSON standard dans un bloc de code Markdown, et **NoteRich** l’affichera instantanément sous forme de graphique interactif. - **100% local et privé** : Le moteur d’affichage fonctionne localement dans votre navigateur. Vos données ne quittent jamais votre appareil. - **Interaction riche** : Profitez de la zoomage, du panage, des informations sur les outils et du changement de l’illustration sans avoir à écrire une seule ligne de JavaScript. - ** génération automatique par l’IA** : Laissez l’IA locale de **NoteRich** analyser vos tableaux ou vos instructions en langage naturel pour générer automatiquement la configuration JSON d’ECharts. --- ## Les bases : intégrer votre premier graphique Intégrer un graphique dans **NoteRich** est aussi simple que d’écrire un bloc de code Markdown. Il suffit de spécifier `echarts` comme identifiant de langage et de fournir une configuration JSON valide pour ECharts. ```echarts { "title": { "text": "Croissance des notes locales", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], "axisLabel": { "color": "#666" } }, "yAxis": { "type": "value", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, "series": [ { "data": [120, 200, 150, 80, 70, 110], "type": "bar", "itemStyle": { "color": "#000", "borderRadius": [4, 4, 0, 0] } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` Lorsque vous passez en mode de prévisualisation ou que vous lisez la note, le moteur d’affichage de **NoteRich** intercepte le bloc `echarts`, initialise l’instance ECharts et l’associe au DOM avec la capacité de réajuster automatiquement la taille. --- ## En détail : configurations avancées de graphiques Une fois que vous maîtrisez les bases, vous pouvez exploiter toute la puissance d’ECharts pour créer des visualisations complexes et multidimensionnelles. ### 1. Plusieurs séries et graphiques mixtes Vous pouvez facilement combiner différents types de graphiques, comme l’ajout d’un graphique de ligne sur un graphique de barre, en définissant plusieurs objets dans la liste `series` et en utilisant des axes Y doubles. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Notes Créées", "Total Cumulatif"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Jour", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Total", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Notes Créées", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Total Cumulatif", "type": "line", "yAxisIndex": 1, "smooth": true, "data": [120, 138, 147, 169, 184, 214, 239], "lineStyle": { "color": "#000", "width": 3 }, "itemStyle": { "color": "#000" } } ], "grid": { "left": "10%", "right": "10%", "bottom": "15%" } } ``` ### 2. Graphiques en forme de cercle et de donut pour la composition Visualiser les proportions est facile avec la série `pie` d’ECharts. Vous pouvez personnaliser le rayon pour créer des graphiques en forme de donut qui correspondent à l’esthétique minimaliste de **NoteRich**. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Utilisation de l’espace de stockage", "type": "pie", "radius": ["40%", "70%"], "avoidLabelOverlap": false, "itemStyle": { "borderRadius": 10, "borderColor": "#fff", "borderWidth": 2 }, "label": { "show": false, "position": "center" }, "emphasis": { "label": { "show": true, "fontSize": 20, "fontWeight": "bold", "color": "#000" } }, "data": [ { "value": 1048, "name": "Notes Textuelles", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Attachments", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Bases de données", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## Visualisation alimentée par l’IA : du texte aux graphiques Écrire manuellement des JSON est puissant, mais **NoteRich** va encore plus loin avec son **moteur de visualisation IA local**. Vous n’avez pas toujours besoin de écrire la configuration vous-même. ### Du langage naturel au graphique Vous pouvez simplement décrire le graphique que vous souhaitez en anglais simple. L’IA locale de **NoteRich** générera automatiquement la configuration JSON d’ECharts pour vous. *Exemple de commande : "Créez un graphique radar comparant les caractéristiques de NoteRich, Notion et Obsidian en termes de confidentialité, vitesse, support hors ligne et extensibilité."* ### Détection automatique des tableaux Si vous avez une table Markdown dans votre note, l’IA de **NoteRich** peut analyser les données structurées et suggérer ou générer automatiquement la configuration d’ECharts correspondante. Ce passage sans interruption des données brutes aux informations visuelles se fait entièrement sur votre appareil, assurant que vos données analytiques restent strictement privées. --- ## Performance et chargement lazy Une préoccupation courante lors de l’intégration de plusieurs graphiques interactifs dans un seul document est la performance. **NoteRich** répond à cette préoccupation avec une architecture de chargement lazy très optimisée. 1. **Observateur d’intersection** : Les graphiques ne sont affichés que lorsqu’ils entrent dans la zone d’affichage. Cela réduit considérablement le temps de chargement initial des documents longs. 2. **Écrans squelettiques** : Pendant le chargement ou la mise en place d’un graphique, une interface squelettique légère est affichée, empêchant les déplacements de la mise en page (CLS) et assurant une expérience de lecture fluide. 3. **Réajustement responsif** : **NoteRich** attache automatiquement un `ResizeObserver` à chaque instance ECharts, assurant que les graphiques s’adaptent sans intervention manuelle aux changements de taille de fenêtre ou de barre latérale. --- ## Bonnes pratiques pour les ECharts de NoteRich Pour tirer le meilleur parti d’ECharts dans **NoteRich**, gardez à l’esprit ces conseils : - **Gardez la configuration valide** : Assurez-vous que votre configuration est une JSON valide. **NoteRich** affichera un message d’erreur dans l’éditeur si la syntaxe est incorrecte, évitant ainsi les crash de l’application. - **Correspondance avec le thème** : L’interface de **NoteRich** est minimaliste et monochromatique. Utilisez des couleurs comme `#000` (couleur principale), `#666` (texte secondaire) et `#eaeaea` (bords/arrière-plan) dans vos configurations de graphiques pour maintenir l’harmonie visuelle. - **Utilisez `grid` pour l’espacement** : Définissez toujours la propriété `grid` pour assurer que vos axes et labels aient suffisamment d’espace et ne soient pas coupés par les bords du conteneur. - **Utilisez l’IA locale** : Pour les graphiques complexes, laissez l’IA faire le travail difficile. Vous pouvez toujours ajuster manuellement la configuration JSON générée pour une meilleure précision. --- ## Conclusion L’intégration de la visualisation de données interactive directement dans votre flux de prise de notes élimine la nécessité de changer de logiciel entre des outils externes comme Excel ou Tableau. Avec le support natif d’**ECharts**, **NoteRich** vous permet de transformer votre base de connaissances locale en un dashboard visuel et très précis – tout en maintenant la confidentialité et la philosophie locale que vous attendez. Commencez à intégrer vos données aujourd’hui, et observez vos notes prendre vie. --- <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">ECharts</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Visualisation de données</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Local-First</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Alimenté par l’IA</span> </div>