Noterich मध्ये इंटरॅक्टिव्ह ECharts कसे एम्बेड करावे

# NoteRich मध्ये इंटरॅक्टिव्ह ECharts कसे समाविष्ट करावे? डेटा हा फक्त तुमच्या समजून घेण्याच्या क्षमतेप्रमाणेच मौल्यवान असतो. वैयक्तिक ज्ञान व्यवस्थापनाच्या क्षेत्रामध्ये, कच्चे आकडे आणि संरचित डेटा व्हिज्युअल दृश्यांमध्ये रूपांतरित करणे अत्यंत महत्वाचे आहे. **NoteRich** हे **Apache ECharts** ला अनुरूप करते; त्यामुळे तुम्ही तुमच्या नोट्समध्ये पूर्णपणे इंटरॅक्टिव्ह चार्ट समाविष्ट करू शकता. क्लाउड-आधारित साधनांप्रमाणे, **NoteRich** आपला डेटा स्थानिक डिव्हाइसवरच प्रक्रिया करते. यामुळे आपला डेटा 100% गोपनीय राहतो, आणि इंटरॅक्टिव्ह व्हिज्युअली दृश्य प्राप्त होते. --- ## **NoteRich मध्ये ECharts का वापरावे?** **Apache ECharts** हे ओपन-सोर्स व्हिज्युअलायझेशन लायब्ररी आहे; त्याची सुव्यवस्था, गहनता आणि प्लॅटफॉर्म-आधारित सुसंगतता प्रसिद्ध आहे. **NoteRich** मध्ये **ECharts** ला अनुरूप केल्याने, तुम्हाला अनेक फायदे मिळतात: - **शून्य-कोड रेंडरिंग**: मॅक्रोड मध्ये सामान्य JSON कॉन्फिगरेशन लिहा; **NoteRich** ते त्वरित इंटरॅक्टिव्ह चार्टमध्ये रूपांतरित करेल. - **100% स्थानिक आणि गोपनीय**: रेंडरिंग इंजिन स्थानिक ब्राउझरमध्ये चालते; आपला डेटा कधीही डिव्हाइसमधून बाहेर जात नाही. - **रिच व्हिज्युअलिटी**: इंटरॅक्टिव्ह व्हिज्युअली दृश्ये मिळवण्यासाठी, व्हिज्युअलायझेशन टूल्स वापरा; जावास्क्रिप्टची एकही ओळ लिहण्याची गरज नाही. - **AI-प्रेरित जनरेशन**: **NoteRich** चे स्थानिक AI आपल्या टेबल्स किंवा नैसर्गिक भाषेच्या सूचनांवर विश्लेषण करून ECharts JSON तयार करेल. --- ## **मूलभूत गोष्टी: आपला पहिला चार्ट समाविष्ट करणे** **NoteRich** मध्ये चार्ट समाविष्ट करणे खूप सोपे आहे; फक्त `echarts` हे भाषा आयडेंटिफायर म्हणून निर्दिष्ट करा आणि वैध ECharts `option` JSON ऑब्जेक्ट प्रदान करा. ```echarts { "title": { "text": "लोकल-फर्स्ट नोट ग्रोथ", "left": "center", "textStyle": { "color": "#000", "fontSize": 16 } }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["जान", "फेब्रुवारी", "मार्च", "ऑगस्ट", "मे", "जून"], "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%" } } ``` जेव्हा तुम्ही प्रीव्ह्यू मोडमध्ये जाता किंवा नोट वाचता, **NoteRich** चे रेंडरिंग इंजिन `echarts` ब्लॉकला प्रतिबंधित करते; ECharts इन्स्टन्स इनिशियलायझ करते आणि डोम अनुसंधान करते. --- ## **अधिक जटिल चार्ट कॉन्फिगरेशन** जेव्हा तुम्ही मूलभूत गोष्टी समजून घेता, तेव्हा तुम्ही ECharts ची संपूर्ण शक्ती वापरून जटिल, बहु-आयामी व्हिज्युअलायझेशन तयार करू शकता. ### 1. मल्टी-सीरीज आणि मिश्रित चार्ट्स तुम्ही वेगवेगळ्या चार्ट प्रकार एकत्र वापरू शकता; उदाहरणार्थ, लाइन चार्टवर बार चार्ट ठेवणे. `series` अॅरेमध्ये अनेक ऑब्जेक्ट्स निर्दिष्ट करून दुहेरी Y-अक्ष वापरा. ```echarts { "tooltip": { "trigger": "axis", "axisPointer": { "type": "cross" } }, "legend": { "data": ["नोट्स क्रिएटेड", "कॅपॅक्युलर टोटल"], "bottom": 0, "textStyle": { "color": "#666" } }, "xAxis": { "type": "category", "data": ["सोमवार", "मंगळवार", "बुधवार", "गुरुवार", "शुक्रवार", "शनिवार", "रविवार"], "axisLabel": { "color": "#666" } }, "yAxis": [ { "type": "value", "name": "डेली", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, { "type": "value", "name": "टोटल", "splitLine": { "show": false }, "axisLabel": { "color": "#666" } } ], "series": [ { "name": "नोट्स क्रिएटेड", "type": "bar", "data": [12, 18, 9, 22, 15, 30, 25], "itemStyle": { "color": "#eaeaea", "borderRadius": [4, 4, 0, 0] } }, { "name": "कॅपॅक्युलर टोटल", "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. पाई आणि डोनट चार्ट्स प्रमाण व्हिज्युअलायझ करण्यासाठी, **ECharts** च्या `pie` सीरीज वापरा. तुम्ही रेडियस सानुनी बदलून आकर्षक डोनट चार्ट तयार करू शकता; हे **NoteRich** च्या मिनिमलिस्टिस्टिक आर्किटेक्चरशी जुळते. ```echarts { "tooltip": { "trigger": "item", "formatter": "{a} <br/>{b}: {c} ({d}%)" }, "legend": { "bottom": 0, "textStyle": { "color": "#666" } }, "series": [ { "name": "स्टोरेज उपयोग", "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": "टेक्स्ट नोट्स", "itemStyle": { "color": "#000" } }, { "value": 735, "name": "अटॅचमेंट्स", "itemStyle": { "color": "#666" } }, { "value": 580, "name": "डेटाबेस", "itemStyle": { "color": "#eaeaea" } } ] } ] } ``` --- ## **AI-प्रेरित व्हिज्युअलायझेशन: टेक्स्टपासून चार्टपर्यंत** JSON मॅन्युअली लिहिणे शक्तिशाली आहे; परंतु **NoteRich** त्यापुढे एक पाऊल पुढे जाते – ते **स्थानिक AI व्हिज्युअलायझेशन इंजिन** वापरते. तुम्हाला नेहमीच कॉन्फिगरेशन स्वतः लिहिण्याची गरज नाही. ### नैसर्गिक भाषेत चार्ट वर्णन करणे तुम्ही साध्या इंग्रजीमध्ये आपल्या चार्टचे वर्णन करू शकता; **NoteRich** चे स्थानिक LLM तुमच्यासाठी ECharts JSON तयार करेल. *उदाहरण: “NoteRich, Notion, आणि Obsidianच्या वैशिष्ट्यांची तुलना करणारा रडार चार्ट तयार करा.”* ### टेबल्समधून ऑटो-डिटेक्शन जर तुमच्या नोटमध्ये मॅक्रोड टेबल असेल, तर **NoteRich** चे AI संरचित डेटा विश्लेषित करून संबंधित ECharts कॉन्फिगरेशन सुचवू शकते. हा प्रक्रिया स्थानिक डिव्हाइसवरच होतो; आपला विश्लेषणात्मक डेटा गोपनीय राहतो. --- ## **परफॉरमन्स आणि लेझर लोडिंग** एकाच दस्तऐवजामध्ये अनेक इंटरॅक्टिव्ह चार्ट समाविष्ट करताना परफॉरमन्स हा सामान्य चिंता आहे. **NoteRich** हे अत्यंत ऑप्टिमाइझ केलेल्या **लेझर लोडिंग आर्किटेक्चर** द्वारे ही समस्या सोडवते. 1. **इक्सिटेशन ऑब्झर्व्हर**: चार्ट व्हिज्युअलायझ केले जात नाहीत, जोपर्यंत ते व्हिज्युअलायझेशन विंडोमध्ये स्क्रोल होत नाहीत. यामुळे दीर्घ दस्तऐवजांचा प्रारंभिक लोडिंग वेळ कमी होतो. 2. **स्केलेटन स्क्रीन**: जेव्हा चार्ट लोड होत असतो किंवा इनिशियलायझ होत असतो, तेव्हा हलकी स्केलेटन यूआयडे दाखवली जाते; यामुळे लेआउट शिफ्ट टाळले जाते आणि सुरळीत वाचन अनुभव मिळतो. 3. **रिस्पॉन्सिव्ह रिसाइजिंग**: **NoteRich** प्रत्येक ECharts इन्स्टन्सला **ResizeObserver** जोडते; यामुळे चार्ट विंडोच्या आकार बदलानुसार किंवा साइडबार चेंजिंगनुसार सहजपणे अनुकूल होतात. --- ## **NoteRich ECharts साठी सर्वोत्तम प्रथमे** **NoteRich** मध्ये ECharts चा परफॉर्मन्स चांगल्या प्रकारे वापरण्यासाठी, या टिप्स लक्षात ठेवा: - **JSON वैध राखा**: तुमची कॉन्फिगरेशन वैध JSON असावी. जर सिंटॅक्स चुकीचा असेल, तर **NoteRich** एडिटरमध्ये चूक दर्शवेल; ज्यामुळे अॅप क्रॅश होण्याची शक्यता कमी होते. - **थीममध्ये जुळवा**: **NoteRich** ची यूआयडे मिनिमलिस्टिक आणि मोनोक्रोमॅटिक आहे. तुमच्या चार्ट कॉन्फिगरेशनमध्ये `#000` (प्राइमरी), `#666` (सेकंडरी टेक्स्ट) आणि `#eaeaea` (बॉर्डर/बॅकग्राउंड) रंग वापरा; यामुळे दृश्य सुसंवाद टिकेल. - **`grid` वापरा**: चार्टच्या अक्षांना आणि लेबल्सना पुरेसे जागा देण्यासाठी नेहमी `grid` प्रॉपर्टी वापरा. - **स्थानिक AI वापरा**: जटिल चार्टसाठी, AI ला जबाबदार ठरवा; तुम्ही निर्मित JSON ला हळूहळू सुधारणा करू शकता. --- ## **निष्कर्ष** इंटरॅक्टिव्ह डेटा व्हिज्युअलायझेशनला तुमच्या नोट्समध्ये थेट समाविष्ट करणे, एक्सेल किंवा टेब्यूओसारख्या बाह्य साधनांच्या साथीची गरज टाळते. **ECharts** च्या नेटिव्ह सपोर्टमुळे, **NoteRich** तुम्हाला तुमच्या स्थानिक ज्ञानाचे डायनॅमिक, व्हिज्युअल आणि गहन दृश्यमान डॅशबोर्ड तयार करण्यास मदत करते – हे सर्व गोपनीकरण आणि स्थानिक-फर्स्ट तत्त्वांच्या अनुरूप आहे. आजच तुमचे डेटा समाविष्ट करणे सुरू करा; तुमच्या नोट्स जिवंत होतील. --- <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]">डेटा व्हिज्युअलायझेशन</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">स्थानिक-फर्स्ट</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">AI-प्रेरित</span> </div>