# Bagaimana untuk Memasukkan Chart Interaktif ke dalam NoteRich Data hanya begitu berharga jika anda mampu memahaminya. Dalam bidang Pengurusan Pengetahuan Peribadi (PKM), transformasi nombor mentah dan data yang terstruktur menjadi pandangan visual adalah sangat penting. **NoteRich** membuka jurang antara teks dan data dengan menyokong **Apache ECharts** secara asli, membolehkan anda memasukkan chart yang interaktif dan siap untuk diterbitkan ke dalam nota anda. Berbeza dengan alat berasaskan awan yang menghantar data anda ke pelayan luaran untuk pemprosesan, **NoteRich** memproses dan memaparkan chart ECharts sepenuhnya pada peranti anda. Ini memastikan data peribadi anda kekal 100% peribadi sambil memberikan pengalaman visualisasi yang lancar dan interaktif. --- ## Mengapa ECharts dalam NoteRich? Apache ECharts adalah perpustakaan visualisasi sumber terbuka yang terkenal dengan kefleksibelannya, kedalamannya, dan kompatibilitinya yang melangkau platform. Dengan mengintegrasikan ECharts secara asli, **NoteRich** menawarkan beberapa kelebihan yang berbeza: - **Pemaparan Tanpa Kod**: Tulis konfigurasi JSON standard dalam blok kod Markdown, dan **NoteRich** akan memaparkannya menjadi chart yang interaktif dengan segera. - **100% Lokal & Peribadi**: Enjin pemaparan berjalan secara lokal dalam pelayar anda. Data anda tidak pernah meninggalkan peranti anda. - **Interaktiviti yang Kaya**: Nikmati fungsi zoom, panning, tooltips, dan pengubahan legenda tanpa perlu menulis satu baris JavaScript pun. - **Generasi Berkuasa AI**: Biarkan AI tempatan **NoteRich** menganalisis jadual anda atau arahan bahasa semula jadi untuk menghasilkan JSON ECharts secara automatik. --- ## Asas: Memasukkan Chart Pertama Anda Memasukkan chart ke dalam **NoteRich** adalah sangat mudah, cukup tulis blok kod Markdown. Anda hanya perlu menentukan `echarts` sebagai identifikator bahasa dan memberikan objek JSON `option` ECharts yang sah. ```echarts { "title": { "text": "Pertumbuhan Nota Berpusatkan Lokal", "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%" } } ``` Apabila anda beralih ke mod praves atau membaca nota, enjin pemaparan **NoteRich** akan mengenal pasti blok `echarts`, memulakan instans ECharts, dan mengikatnya ke DOM dengan fungsi penyesuaian saiz automatik. --- ## Penjelasan Lanjut: Konfigurasi Chart Lanjutan Setelah anda menguasai asas, anda boleh menggunakan kekuatan penuh ECharts untuk mencipta visualisasi yang kompleks dan berdimensi banyak. ### 1. Seri Berbilang dan Chart Campuran Anda boleh dengan mudah menggabungkan jenis chart yang berbeza, seperti memaparkan chart garis pada chart bar, dengan menentukan beberapa objek dalam array `series` dan menggunakan dua axis Y. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Nota Dibuat", "Jumlah Kumulatif"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Hari", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Jumlah", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Nota Dibuat", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Jumlah Kumulatif", "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. Chart Pi dan Donut untuk Komposisi Visualisasi proporsi adalah mudah dengan siri `pie` ECharts. Anda boleh menyesuaikan jejari untuk mencipta chart donut yang menarik yang sesuai dengan estetika minimalis **NoteRich**. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Penggunaan Storan", "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": "Nota Teks", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Attachments", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Database", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## Visualisasi Berkuasa AI: Dari Teks ke Chart Menulis JSON secara manual adalah sangat berkuasa, tetapi **NoteRich** melangkau langkah tersebut dengan **Enjin Visualisasi AI Lokal**nya. Anda tidak perlu selalu menulis konfigurasi sendiri. ### Bahasa Semula Jadi ke Chart Anda boleh dengan mudah menjelaskan chart yang anda inginkan dalam bahasa Inggeris yang mudah difahami, dan AI tempatan **NoteRich** akan menghasilkan JSON ECharts untuk anda. *Contoh arahan: "Cipta chart radar yang membandingkan ciri-ciri NoteRich, Notion, dan Obsidian dari segi Privasi, Kelajuan, Sokongan Offline, dan Keupayaan."* ### Pengesanan Automatik dari Jadual Jika anda mempunyai jadual Markdown dalam nota anda, AI **NoteRich** boleh menganalisis data yang terstruktur dan mencadangkan atau menghasilkan konfigurasi ECharts yang sesuai secara automatik. Peralihan dari data mentah ke pandangan visual ini berlaku sepenuhnya pada peranti anda, memastikan data analitik anda kekal peribadi sepenuhnya. --- ## Prestasi dan Pemuatan Perlahan Kebimbangan biasa apabila memasukkan chart interaktif yang banyak dalam dokumen tunggal adalah prestasi. **NoteRich** menyelesaikan masalah ini dengan arsitektur **Pemuatan Perlahan** yang sangat dioptimumkan. 1. **Interseksi Pengawasan**: Chart tidak akan dipaparkan sehingga mereka bergerak ke dalam bidang paparan. Ini mengurangkan masa pemuatan awal dokumen yang panjang dengan ketara. 2. **Skema Skrin**: Semasa chart sedang dimuat atau dipasang, antaramuka ringan akan dipaparkan, menghalang perubahan susunan (CLS) dan memastikan pengalaman membaca yang lancar. 3. **Pemuatan Semula Jadi**: **NoteRich** secara automatik mengikat `ResizeObserver` pada setiap instans ECharts, memastikan chart beradaptasi dengan sepenuhnya terhadap perubahan saiz tingkap atau pengubahan sisi sidebar tanpa campur tangan manual. --- ## Amalan Terbaik untuk ECharts dalam NoteRich Untuk memaksimumkan penggunaan ECharts dalam **NoteRich**, ingatlah petua-petua ini: - **Jaga JSON yang Sah**: Pastikan konfigurasi anda adalah JSON yang sah. **NoteRich** akan memaparkan mesej ralat dengan cara yang mesra pengguna dalam editor jika sintaksnya tidak betul, mengelakkan kegagalan aplikasi. - **Bertemu Dengan Tema**: Antaramuka **NoteRich** adalah minimalis dan monokrom. Gunakan warna seperti `#000` (warna utama), `#666` (warna teks sekunder), dan `#eaeaea` (pinggiran/latar belakang) dalam konfigurasi chart anda untuk memelihara harmoni visual. - **Guna `grid` untuk Pads**: Sentiasa definisikan sifat `grid` untuk memastikan axis dan label chart anda mempunyai ruang yang cukup dan tidak terhimpit oleh tepi kontainer. - **Manfaatkan AI Lokal**: Untuk chart yang kompleks, biarkan AI melakukan kerja berat. Anda sentiasa boleh menyesuaikan JSON yang dihasilkan secara manual untuk penyesuaian yang lebih baik. --- ## Kesimpulan Mengintegrasikan visualisasi data interaktif secara langsung ke dalam aliran kerja nota anda menghapuskan keperluan untuk bertukar antara alat luar seperti Excel atau Tableau. Dengan sokongan asli **ECharts**, **NoteRich** memberi anda kuasa untuk mengubah pangkalan pengetahuan tempatan anda menjadi dashboard yang dinamik, visual, dan sangat berpengetahuan—semuanya sambil memelihara privasi yang tidak berkompromi dan falsafah yang berpusatkan lokal yang anda harapkan. Mula memasukkan data anda hari ini, dan lihat nota anda menjadi hidup. --- <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]">Visualisasi Data</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Berpusatkan Lokal</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Berkuasa AI</span> </div>