प्रतिक्रिया मूल निवासी के लिए ECharts आवरण निर्माण

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

प्रतिक्रिया मूल निवासी के लिए ECharts आवरण निर्माण

लोकप्रिय ईचार्ट्स चार्टिंग फ्रेमवर्क के लिए एक रिएक्टिव नेटिव रैपर। इस पुस्तकालय के साथ आप मोबाइल उपकरणों पर शानदार प्रदर्शन के साथ जटिल, इंटरैक्टिव चार्ट बना सकते हैं।

तथ्य यह है कि चार्टिंग फ्रेमवर्क विशुद्ध रूप से एक वेबव्यू में चलता है, यह आगामी रिएक्ट-नेटिव संस्करणों के लिए बहुत स्थिर है। दूसरी ओर चार्ट (वेबव्यू जावास्क्रिप्ट थ्रेड में चल रहा है) और रिएक्ट-नेटिव जावास्क्रिप्ट थ्रेड के बीच दो तरह से डेटा संचार करना आसान नहीं है। इस पुस्तकालय के साथ आप अधिक जटिल चार्ट विकल्प भी बना सकते हैं ईचार्ट्स . आप वेबव्यू के भीतर कस्टम जावास्क्रिप्ट कोड इंजेक्ट कर सकते हैं जो आपको चार्ट एपीआई तक पहुंचने की अनुमति देता है (टैप, चयन आदि का पता लगाएं ...)

स्क्रीनशॉट



कैसे इस्तेमाल करे

$ yarn add react-native-echarts-wrapper

सुनिश्चित करें कि आपने स्थापित किया है प्रतिक्रिया-मूल-वेबदृश्य

समर्थित संस्करण

संस्करण प्रदर्शनी प्रतिक्रिया देशी
2.x.x > = 0.33 > = 0.58
1.x.x / > = 0.56

गुण

नाम प्रकार उदाहरण विवरण
विकल्प वस्तु उदाहरणों पर एक नज़र डालें आपको चार्ट कॉन्फ़िगरेशन सेट करने की अनुमति देता है ( https://ecomfe.github.io/echarts-examples/public/index.html ) विकल्प ऑब्जेक्ट के भीतर कभी भी अपने रिएक्ट-नेटिव जावास्क्रिप्ट कोड से संबंधित किसी भी चीज़ का उपयोग न करें। यह काम नहीं करेगा! |_+_| . पर एक नज़र डालें और |_+_|
कस्टम टेम्पलेटपथ डोरी फ़ाइल:///android_assets/index.html यदि आप ईचार्ट्स को यह बताना चाहते हैं कि कस्टम html टेम्पलेट कहाँ देखना है, तो इस गुण का उपयोग करें। आप उपयोग कर सकते हैं आरएनएफएस Android/iOS के लिए निर्देशिका पथ प्राप्त करने के लिए।
अतिरिक्त कोड डोरी onData आपको वेबव्यू में जावास्क्रिप्ट कोड इंजेक्ट करने की अनुमति देता है। इसका उपयोग अधिक जटिल चार्ट (जैसे चार्ट टैप पर कॉलबैक) बनाने के लिए ईचार्ट्स एपीआई तक पहुंचने के लिए किया जाता है। पर एक नज़र डालें अधिक जटिल उदाहरण
पीछे का रंग डोरी आरजीबीए (255,101,80,0.4), लाल, #4287f5 चार्ट का बैकग्राउंड कलर सेट करें

तरीके / कॉलबैक

नाम उदाहरण विवरण
सेटऑप्शन sendData आपको चार्ट कॉन्फ़िगरेशन को डायनामिक रूप से सेट करने की अनुमति देता है (उदाहरण के लिए विकल्प प्रोप के साथ प्रारंभिक सेटअप के बाद)। पर एक नज़र डालें गतिशील लोडिंग उदाहरण
विकल्प प्राप्त करें alert('hello world'); आपको चार्ट इंस्टेंस का वर्तमान विकल्प प्राप्त करने की अनुमति देता है। पहला पैरामीटर परिणाम-कॉलबैक है। यदि आप दूसरा पैरामीटर पास नहीं करते हैं तो परिणाम-कॉलबैक सभी विकल्प गुणों के साथ चालू हो जाएगा। दूसरा पैरामीटर ई-चार्ट-विकल्प-गुणों (जैसे |_+_|) की एक सरणी है जिसे आप प्राप्त करना चाहते हैं। पर एक नज़र डालें गतिशील लोडिंग उदाहरण
स्पष्ट this.chart.setOption(option); आपको चार्ट साफ़ करने की अनुमति देता है। पर एक नज़र डालें अधिक जटिल उदाहरण
लहर this.chart.getOption((data) => console.log(data)); चार्ट से डेटा प्राप्त करने का यही एकमात्र तरीका है। इसे SendData (वेबव्यू फ़ंक्शंस) द्वारा प्रदान किए गए डेटा के साथ कहा जाता है।
पृष्ठभूमि रंग सेट करें ['dataZoom', 'series'] आपको चार्ट की पृष्ठभूमि का रंग सेट करने की अनुमति देता है।

वेबव्यू फ़ंक्शन

इन कार्यों को कोड इंजेक्शन से बुलाया जा सकता है |_+_| या ईचार्ट्स विकल्प के भीतर।

नाम उदाहरण विवरण
डेटा भेजें this.chart.clear(); इस फ़ंक्शन के साथ आप रिएक्ट नेटिव के साथ संवाद कर सकते हैं। ध्यान आप केवल रिएक्ट-नेटिव को तार भेज सकते हैं। |_+_| कॉल करेंगे |_+_| प्रतिक्रिया मूल निवासी पक्ष पर। पर एक नज़र डालें अधिक जटिल उदाहरण

वेबव्यू चर

नाम उदाहरण विवरण
चार्ट आपको ईचार्ट्स एपीआई तक पहुंचने की अनुमति देता है ( https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance ) पर एक नज़र डालें अधिक जटिल उदाहरण

सरल उदाहरण

this.chart.setBackgroundColor('#ecf542');

अधिक जटिल उदाहरण

additionalCode

गतिशील लोडिंग उदाहरण

sendData('Hello World')

विवरण डाउनलोड करें:

लेखक: टॉमलैडर

गिटहब: https://github.com/tomLadder/react-native-echarts-wrapper

#प्रतिक्रिया-मूल #प्रोग्रामिंग

यह सभी देखें:

नई वस्तुएं

सबसे पठनीय

संपादक की पसंद