# Cách đính kèm biểu đồ tương tác vào NoteRich Dữ liệu chỉ có giá trị khi bạn có khả năng hiểu được nó. Trong lĩnh vực Quản lý Kiến thức cá nhân (PKM), việc chuyển đổi số liệu thô và dữ liệu có cấu trúc thành cái nhìn trực quan là rất quan trọng. **NoteRich** giúp giữa văn bản và dữ liệu bằng cách hỗ trợ nội bộ **Apache ECharts**, cho phép bạn đính kèm các biểu đồ tương tác hoàn toàn vào ghi chú của mình. Khác với các công cụ dựa trên đám mây, nơi dữ liệu được gửi đến máy chủ bên ngoài để được hiển thị, **NoteRich** xử lý và hiển thị ECharts ngay trên thiết bị cục bộ của bạn. Điều này đảm bảo rằng dữ liệu của bạn được bảo mật 100% trong khi mang lại trải nghiệm hiển thị tương tác hoàn hảo. --- ## Tại sao nên sử dụng ECharts trong NoteRich? Apache ECharts là thư viện hiển thị nguồn mở, nổi tiếng với sự linh hoạt, sâu sắc và tính tương thích với nhiều nền tảng. Bằng cách tích hợp ECharts một cách nội bộ, **NoteRich** mang lại nhiều lợi ích đặc biệt: - **Xử lý không cần mã**: Viết cấu hình JSON chuẩn trong khối mã Markdown, và **NoteRich** sẽ hiển thị nó thành biểu đồ tương tác ngay lập tức. - **100% nội bộ và bảo mật**: Hệ thống xử lý biểu đồ hoạt động nội bộ trong trình duyệt của bạn. Dữ liệu của bạn sẽ không rời khỏi thiết bị của bạn. - **Tương tác phong phú**: Thưởng thức chức năng zoom, pan, tooltips và tùy chỉnh biểu đồ mà không cần viết một dòng JavaScript nào. - **Sản xuất tự động bằng AI**: Hãy để AI nội bộ của **NoteRich** phân tích bảng dữ liệu của bạn hoặc yêu cầu ngôn ngữ tự nhiên để tự động tạo ra cấu hình ECharts. --- ## Những điều cơ bản: Đính kèm biểu đồ đầu tiên của bạn Đính kèm một biểu đồ vào **NoteRich** chỉ cần viết một khối mã Markdown. Bạn chỉ cần chỉ định `echarts` làm định danh ngôn ngữ và cung cấp một đối tượng JSON `option` hợp lệ của ECharts bên trong. ```echarts { "title": { "text": "Tăng trưởng ghi chú nội bộ", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6"], "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%" } } ``` Khi bạn chuyển sang chế độ xem trước hoặc đọc ghi chú, hệ thống xử lý của **NoteRich** sẽ bắt đầu khối mã `echarts`, khởi tạo đối tượng ECharts và kết nối nó với DOM với khả năng tự động điều chỉnh kích thước. --- ## Khám phá sâu: Cấu hình biểu đồ nâng cao Khi bạn đã nắm vững những điều cơ bản, bạn có thể tận dụng toàn bộ sức mạnh của ECharts để tạo ra các hình ảnh minh họa đa chiều phức tạp. ### 1. Nhiều chuỗi và biểu đồ kết hợp Bạn có thể dễ dàng kết hợp các loại biểu đồ khác nhau, chẳng hạn như kết hợp biểu đồ đường với biểu đồ thanh, bằng cách định nghĩa nhiều đối tượng trong mảng `series` và sử dụng hai trục Y. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["Ghi chú được tạo", "Tổng số"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["Thứ Hai", "Thứ Ba", "Thứ Tư", "Thứ Năm", "Thứ Sáu", "Thứ Bảy", "Chủ Nhật"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "Ngày", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "Tổng", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "Ghi chú được tạo", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "Tổng số", "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. Biểu đồ hình tròn và hình donut cho kết hợp Việc thể hiện tỷ lệ phần trăm trở nên dễ dàng với chuỗi `pie` của ECharts. Bạn có thể tùy chỉnh bán kính để tạo ra những biểu đồ hình donut đẹp mắt, phù hợp với phong cách tối giản của **NoteRich**. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "Đối sử dụng dữ liệu", "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": "Ghi chú văn bản", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "Đính kèm", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "Cơ sở dữ liệu", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## Hiển thị bằng AI: Từ văn bản đến biểu đồ Việc viết cấu hình JSON thủ công là rất mạnh mẽ, nhưng **NoteRich** lại đi một bước nữa với **Hệ thống xử lý hiển thị bằng AI nội bộ**. Bạn không cần phải tự viết cấu hình. ### Ngôn ngữ tự nhiên thành biểu đồ Bạn có thể đơn giản mô tả biểu đồ mà bạn muốn bằng ngôn ngữ tiếng Anh, và AI nội bộ của **NoteRich** sẽ tự động tạo ra cấu hình ECharts cho bạn. *Ví dụ câu hỏi: "Tạo một biểu đồ radar so sánh các tính năng của NoteRich, Notion và Obsidian về tính bảo mật, tốc độ, hỗ trợ ngoại tuyến và tính linh hoạt."* ### Đoán mò từ bảng dữ liệu Nếu bạn có một bảng dữ liệu trong ghi chú của mình, AI của **NoteRich** có thể phân tích dữ liệu có cấu trúc và tự động đề xuất hoặc tạo ra cấu hình ECharts tương ứng. Sự chuyển đổi từ dữ liệu thô đến cái nhìn trực quan hoàn toàn diễn ra trên thiết bị của bạn, đảm bảo rằng dữ liệu phân tích của bạn được bảo mật tuyệt đối. --- ## Hiệu suất và tải chậm Một lo ngại phổ biến khi đính kèm nhiều biểu đồ tương tác trong một tài liệu duy nhất là hiệu suất. **NoteRich** giải quyết vấn đề này bằng một cấu trúc tải chậm được tối ưu hóa cao. 1. **Công cụ quan sát giao điểm**: Biểu đồ chỉ được hiển thị khi chúng di chuyển vào vùng hiển thị. Điều này giúp giảm đáng kể thời gian tải của tài liệu dài. 2. **Giao diện mô hình**: Trong khi biểu đồ đang được tải hoặc khởi tạo, một giao diện mô hình nhẹ được hiển thị, giúp tránh việc thay đổi bố cục (CLS) và duy trì trải nghiệm đọc mượt mà. 3. **Tự động điều chỉnh kích thước**: **NoteRich** tự động gắn công cụ quan sát kích thước vào mỗi đối tượng ECharts, đảm bảo rằng biểu đồ thích ứng một cách hoàn hảo với việc thay đổi kích thước cửa sổ hoặc việc chuyển đổi giữa các thanh bên mà không cần can thiệp thủ công. --- ## Những quy tắc tốt nhất cho ECharts trong NoteRich Để tận dụng tối đa ECharts trong **NoteRich**, hãy ghi nhớ những lời khuyên sau: - **Đảm bảo JSON hợp lệ**: Đảm bảo rằng cấu hình của bạn là JSON hợp lệ. Nếu cú pháp không chính xác, **NoteRich** sẽ hiển thị thông báo lỗi trong trình soạn thảo, giúp tránh tình trạng ứng dụng bị treo. - **Phù hợp với chủ đề**: Giao diện của **NoteRich** là tối giản và đơn sắc. Sử dụng màu sắc như `#000` (màu chính), `#666` (màu văn bản phụ) và `#eaeaea` (màu băng chuyền/phông nền) trong cấu hình biểu đồ của bạn để duy trì sự hài hòa về mặt thị giác. - **Sử dụng `grid` để tạo khoảng cách**: Luôn định nghĩa thuộc tính `grid` để đảm bảo rằng các trục và nhãn của biểu đồ có đủ không gian và không bị cắt bởi mép container. - **Tận dụng AI nội bộ**: Đối với biểu đồ phức tạp, hãy để AI đảm nhận công việc khó. Bạn vẫn có thể điều chỉnh cấu hình JSON được tạo ra để tinh chỉnh. --- ## Kết luận Tích hợp hình ảnh minh họa dữ liệu tương tác trực tiếp vào quy trình ghi chú của bạn giúp loại bỏ nhu cầu chuyển đổi giữa các công cụ bên ngoài như Excel hoặc Tableau. Với hỗ trợ nội bộ **ECharts**, **NoteRich** giúp bạn biến cơ sở kiến thức nội bộ của mình thành một bảng điều khiển động, trực quan và có giá trị – tất cả đều được bảo mật một cách tuyệt đối. Hãy bắt đầu đính kèm dữ liệu của bạn ngay hôm nay, và chứng kiến ghi chú của bạn trở nên sống động. --- <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]">Hiển thị dữ liệu</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Nội bộ</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Hàng đầu bằng AI</span> </div>