# NoteRich’te ECharts’ı Nasıl Ekleyebilirsiniz? Veriler, sadece sizin anlama yeteneğiniz kadar değerlidir. Kişisel Bilgi Yönetimi (PKM) alanında, ham sayıları ve yapılandırılmış verileri görsel içgörülere dönüştürmek çok önemlidir. **NoteRich**, **Apache ECharts**’ı doğal olarak destekleyerek metin ve veriler arasındaki boşluğu kapatır ve böylece notlarınızın içinde tamamen etkileşimli, yayın için hazır grafikler ekleyebilirsiniz. Verilerinizi dış sunuculara göndererek grafikleri oluşturan bulut tabanlı araçlardan farklı olarak, **NoteRich**, ECharts’ı tamamen yerel cihazınızda işler ve grafikleri oluşturur. Bu, özel verilerinizin %100 gizli kalmasını sağlar ve aynı zamanda kesintisiz, etkileşimli bir görselleştirme deneyimi sunar. --- ## Neden NoteRich’te ECharts? **Apache ECharts**, akışkanlık, derinlik ve platformlar arası uyumluluk açısından ünlü bir açık kaynaklı görselleştirme kütüphanesidir. ECharts’ı doğal olarak entegre ederek **NoteRich**, birkaç farklı avantaj sunar: - **Sıfır Kod Gerekli**: Standart JSON yapılandırmasını bir Markdown kod bloğunda yazın ve **NoteRich** bunu anında etkileşimli bir grafik olarak oluşturacaktır. - **%100 Yerel ve Gizli**: Görselleştirme motoru, tarayıcınızda yerel olarak çalışır. Verileriniz cihazınızdan asla ayrılmaz. - **Zengin Etkileşim**: Herhangi bir JavaScript satırı yazmadan, dahili yakınlaştırma, kaydırma, aydınlatma bilgileri ve ekleme/çıkarma özelliklerinden yararlanın. - **AI Destekli Oluşturma**: **NoteRich’in** yerel AI’sı, tablolarınızı veya doğal dil komutlarınızı analiz ederek ECharts JSON’unu otomatik olarak oluşturabilir. --- ## Temel Bilgiler: İlk Grafik Eklenmesi **NoteRich’te** bir grafik eklemek, sadece bir Markdown kod bloğu yazmak kadar basittir. Sadece `echarts`’ı dil tanımlayıcısı olarak belirtmeniz ve geçerli bir ECharts `option` JSON nesnesi sağlamanız yeterlidir. ```echarts { "title": { "text": "Yerel Öncelikli Not Büyümesi", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran"], "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%" } } ``` Görüntüleme moduna geçtiğinizde veya notu okuduğunuzda, **NoteRich’in** görselleştirme motoru `echarts` bloğunu yakalar, ECharts örneğini başlatır ve otomatik yeniden boyutlandırma özellikleriyle bunu DOM’a bağlar. --- ## Derinlemesine Analiz: İleri Grafik Ayarları Temelleri öğrendikten sonra, ECharts’ın tüm gücünü kullanarak karmaşık, çok boyutlu görselleştirmeler oluşturabilirsiniz. ### 1. Çoklu Seriler ve Karışık Grafikler Farklı grafik türlerini kolayca birleştirebilirsiniz; örneğin, bir çizgi grafiğinin bir çubuk grafiğinin üzerine eklenmesi gibi. `series` dizisinde birden fazla nesne tanımlayarak ve çift Y-eksenleri kullanarak bunu yapabilirsiniz. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Oluşturulan Notlar", "Toplam"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi", "Pazar"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Günlük", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Toplam", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Oluşturulan Notlar", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Toplam", "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. Piksel ve Donut Grafiklerle Kompozisyon **ECharts’ın** `pie` serisi, oranları görselleştirmek için mükemmel bir araçtır. Etkileyici donut grafikler oluşturmak için yarıçapı özelleştirebilirsiniz; bu grafikler, **NoteRich’in** minimalist estetiğiyle mükemmel bir uyum sağlar. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Depolama Kullanımı", "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": "Metin Notları", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Ekler", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Veritabanları", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## AI Destekli Görselleştirme: Metinden Grafiğe JSON’u manuel olarak yazmak güçlü bir yöntemdir, ancak **NoteRich**, **Yerel AI Görselleştirme Motoru** ile bunu bir adım daha ileri götürür. Her zaman kendi yapılandırmalarınızı yazmanız gerekmez. ### Doğal Dilden Grafiğe İstediğiniz grafiği basit İngilizce ile tanımlayabilirsiniz ve **NoteRich’in** yerel LLM’si sizin için ECharts JSON’unu oluşturacaktır. *Örnek komut: "NotRich, Notion ve Obsidian’ın Gizlilik, Hız, Çevrimdışı Destek ve Genişletilebilirlik açısından özelliklerini karşılaştıran bir radar grafiği oluşturun."* ### Tablolardan Otomatik Algılama Notunuzda bir Markdown tablo varsa, **NoteRich’in** AI’si yapılandırılmış verileri analiz edebilir ve ilgili ECharts yapılandırmasını otomatik olarak önerip oluşturabilir. Ham verilerden görsel içgörülere geçiş tamamen cihazınızda gerçekleşir ve bu, analitik verilerinizin tamamen gizli kalmasını sağlar. --- ## Performans ve Geç Islem Tek bir belgede birden fazla etkileşimli grafik eklemek genellikle performans sorunlarına yol açar. **NoteRich**, yüksek derecede optimize edilmiş **Geç Islem Mimarisi** ile bu sorunu çözer. 1. **Etkileşim Gözlemcisi**: Grafikler, görünüm alanına gelene kadar görselleştirilmez. Bu, uzun belgelerin başlangıç yüklenme süresini büyük ölçüde azaltır. 2. **Hafif Ekran Kalıpları**: Bir grafik yüklendiğinde veya başlatıldığında, hafif bir ekran kalıbı görüntülenir. Bu, düzen değişikliklerinden kaçınmanıza ve kesintisiz bir okuma deneyimi sunmanıza yardımcı olur. 3. **Etkileşimli Yeniden Boyutlandırma**: **NoteRich**, her ECharts örneğine otomatik olarak bir `ResizeObserver` ekler. Bu, grafiklerin pencere boyutlandırması veya kenar çubuğu değişikliklerine otomatik olarak uyum sağlamasını sağlar. --- ## NoteRich ECharts İçin En İyi Uygulamalar **NoteRich’te** ECharts’tan en iyi şekilde yararlanmak için şu ipuçlarını göz önünde bulundurun: - **JSON Geçerli Olmalı**: Yapılandırmanızın geçerli bir JSON olduğunu garanti edin. ECharts, sözdiziminin yanlış olduğu durumlarda editörde hata mesajı gösterecektir; bu da uygulamanın çökmesini önler. - **Tema Uyumu**: **NoteRich’in** arayüzü minimalist ve tek renklidir. Grafik yapılandırmanızda `#000` (ana rengi), `#666` (ikincil metin rengi) ve `#eaeaea` (kenarlıklar/arka plan rengi) gibi renkleri kullanarak görsel uyumu koruyun. - **`grid` Kullanarak Ekstra Alan**: Grafik eksenlerinizin ve etiketlerinin yeterli alanı olmasını sağlamak için her zaman `grid` özelliğini tanımlayın. - **Yerel AI’dan Yararlanın**: Karmaşık grafikler için AI’nin ağır işleri yapmasına izin verin. Daha iyi sonuçlar almak için her zaman oluşturulan JSON’u manuel olarak düzenleyebilirsiniz. --- ## Sonuç Etkileşimli veri görselleştirmeyi not alma işleminize doğrudan entegre etmek, Excel veya Tableau gibi dış araçlar arasında geçiş yapmanızı gerektirmez. **ECharts** desteği sayesinde **NoteRich**, yerel bilgi tablonuzu dinamik, görsel ve derinlemesine anlamlı bir kontrol paneline dönüştürmenizi sağlar. Tüm bunlar, beklediğiniz sıkı gizlilik ve yerel öncelikli felsefeyi korur. Bugünden itibaren verilerinizi ekleyin ve notlarınızın hayat bulmasını izleyin. --- <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]">Veri Görselleştirme</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Yerel Öncelikli</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AI Destekli</span> </div>