Introduction to responsive React Native Echarts components
This article mainly introduces the introduction of responsive React Native Echarts components. It has certain reference value. Now I share it with you. Friends in need can refer to it.
In recent years, with the mobile terminal The requirements for data visualization are getting higher and higher, and traditional chart libraries like MPAndroidChart can no longer meet the increasingly abnormal needs of product managers. The development of data visualization in the front-end field is relatively prosperous. Using a powerful front-end data visualization library like Echarts on the mobile terminal through WebView is a good way to solve the problem.
In React Native development, since the same JavaScript language is used as the front-end, the work of connecting Echarts is relatively smooth, but some necessary component encapsulation can still greatly improve development efficiency.
Echarts has officially recommended a third-party packaging library: react-native-echarts (note: its corresponding nmp package name is native-echarts). It currently has 400 stars and 100 weekly downloads. It can be seen that it is still used. widely used. However, after our investigation, we found that react-native-echarts has the following problems:
The library has not been updated for more than half a year, the Echarts version is stuck at 3.0, and Android-side packaging requires manually adding assets. The problem has not been solved yet
The library's interface flexibility is low, for example, the size can only be set through width and height; the Echarts expansion package cannot be used; event registration, WebView communication, etc. cannot be performed
Since using WebView to encapsulate Echarts involves local html, it is not a pure JavaScript language level function, and there is no native code, so making it an nmp package is not a good choice. It is written in the project Internal components, configuring it yourself is a more convenient and flexible solution.
So we decided not to use the third-party Echarts packaging library and write a universal component WebChart ourselves. In order to facilitate use in development, this component has the following characteristics:
-
is designed according to responsiveness. You only need to configure the data source in the option. The chart will automatically refresh after the data changes, and the chart will be updated. In line with React's style.
Our solution is to determine whether the incoming option parameter has changed every time the component updates. If the change occurs, pass webView.postMessage and pass in the new option in the form of JSON to notify Echarts to setOption again.
Although Echarts itself will compare options, pre-judgement can reduce frequent communication with WebView caused by updates. This is still obvious when there are a large number of asynchronous requests in the container parent component; inside WebView, update It uses the setOption of Echarts itself without reloading the entire WebView
Using the postMessage and onMessage interfaces of WebView, event communication between charts and other React Native components can be realized
Through the exScript parameter of the component, you can add any script to WebView, which is flexible to use
Because it is a self-written component, echarts version, expansion package, svg/canvas, data Incremental loading can be set by yourself
Demo and usage
For usage and examples, please see: react-native-echarts-demo, if you need to use it directly, You can transplant according to the following steps:
Copy the WebChart component folder in the root directory to the appropriate place in your project
Copy /android Copy the /app/src/main/assets/web folder to the same location as your project. There is no assets folder that needs to be created manually.
You only need the above two steps to use the WebChart component in your project.
If you need further customization, the Echarts code is in the tag in index.html in the above two folders. Currently, it is the 4.0 full version without expansion pack. You can go to Download the required version and expansion package replacement from the official website; svg/canvas, incremental data loading, etc. can be modified directly in WebChart/index.js. On the mobile side, for performance reasons, we generally use the svg rendering mode.
The specific usage of WebChart can be found in App.js. The setting of style is the same as that of ordinary React Native components. You can use flex or set it to a fixed value. Three additional parameters:
option(object): The parameter object assigned to setOption. After changes, WebChart will automatically call setOption internally to achieve responsive refresh. Pay special attention to the fact that functions are not processed during JSON parsing, so you need to avoid using functional formatter and class-based LinearGradient. Just use templates and ordinary objects like the demo
exScript (string): Any code you want to execute when WebView loads, usually event registration and the like. It is recommended to use template literals
onMessage(function): PostMessage is triggered internally by WebView For subsequent callbacks, postMessage needs to be set in exScript first for communication between the chart and other React Native components
Of course this is a parameter designed according to our business needs, you can do it Free to reset.
Communication between Echarts and React Native components
In the WebView component of React Native, onMessage and postMessage are provided for two-way communication between html and components. Please refer to the documentation for specific usage.
Using webView.postMessage, WebChart implements notification Echarts to execute setOption; in exScript, window.postMessage can be used to communicate Echarts events to React Native components.
Generally we will agree that the communication data is an object in this format:
{
type: 'someType',
payload: {
value: 111,
},
}Since onMessage and postMessage can only transfer strings, JSON serialization is required in exScript, similar to this:
exScript={`
chart.on('click', (params) => {
if(params.componentType === 'series') {
window.postMessage(JSON.stringify({
type: 'select',
payload: {
index: params.dataIndex,
},
}));
}
});
`}The above is the responsive WebChart component we encapsulated and its usage. For the complete code, please see: react-native-echarts-demo.
In use, there are still several pitfalls that have not been solved, which can only be bypassed at present. Students who know about them are welcome to correct them:
In IOS, Echarts seems to be rendered There is no transparent effect, and the color set with rgba cannot work properly
The style.height property of React Native's WebView seems to be invalid, so I have to set a View outside
According to the current resource loading method, there will be two copies of index.html on Android. Because the platform judgment is made at runtime, even if index.anroid.js and index.ios.js are set separately, they will be packaged. In Android, assets must be added manually
- ## The code of Echarts must be introduced inline in #index.html. External reference to a separate js file seems to be invalid.
The above is the detailed content of Introduction to responsive React Native Echarts components. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use php interface and ECharts to generate visual statistical charts
Dec 18, 2023 am 11:39 AM
In today's context where data visualization is becoming more and more important, many developers hope to use various tools to quickly generate various charts and reports so that they can better display data and help decision-makers make quick judgments. In this context, using the Php interface and ECharts library can help many developers quickly generate visual statistical charts. This article will introduce in detail how to use the Php interface and ECharts library to generate visual statistical charts. In the specific implementation, we will use MySQL
Steps to draw dashboard using ECharts and Python interface
Dec 18, 2023 am 08:40 AM
The steps to draw a dashboard using ECharts and Python interface require specific code examples. Summary: ECharts is an excellent data visualization tool that can easily perform data processing and graphics drawing through the Python interface. This article will introduce the specific steps to draw a dashboard using ECharts and Python interface, and provide sample code. Keywords: ECharts, Python interface, dashboard, data visualization Introduction Dashboard is a commonly used form of data visualization, which uses
How to use map heat map to display city heat in ECharts
Dec 18, 2023 pm 04:00 PM
How to use a map heat map to display city heat in ECharts ECharts is a powerful visual chart library that provides various chart types for developers to use, including map heat maps. Map heat maps can be used to show the popularity of cities or regions, helping us quickly understand the popularity or density of different places. This article will introduce how to use the map heat map in ECharts to display city heat, and provide code examples for reference. First, we need a map file containing geographic information, EC
How to use calendar charts to display time data in ECharts
Dec 18, 2023 am 08:52 AM
How to use calendar charts to display time data in ECharts ECharts (Baidu’s open source JavaScript chart library) is a powerful and easy-to-use data visualization tool. It offers a variety of chart types, including line charts, bar charts, pie charts, and more. The calendar chart is a very distinctive and practical chart type in ECharts, which can be used to display time-related data. This article will introduce how to use calendar charts in ECharts and provide specific code examples. First, you need to use
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
How to use histogram to display data in ECharts
Dec 18, 2023 pm 02:21 PM
How to use histograms to display data in ECharts ECharts is a JavaScript-based data visualization library that is very popular and widely used in the field of data visualization. Among them, the histogram is the most common and commonly used chart type, which can be used to display the size, comparison and trend analysis of various numerical data. This article will introduce how to use ECharts to draw histograms and provide code examples. First, we need to introduce the ECharts library into the HTML file, which can be introduced in the following way
How to use ECharts and php interface to generate statistical charts
Dec 18, 2023 pm 01:47 PM
How to use ECharts and PHP interfaces to generate statistical charts Introduction: In modern web application development, data visualization is a very important link, which can help us display and analyze data intuitively. ECharts is a powerful open source JavaScript chart library. It provides a variety of chart types and rich interactive functions, and can easily generate various statistical charts. This article will introduce how to use ECharts and PHP interfaces to generate statistical charts, and give specific code examples. 1. Overview of ECha
Does ECharts depend on jQuery? In-depth analysis
Feb 27, 2024 am 08:39 AM
Does ECharts need to rely on jQuery? Detailed interpretation requires specific code examples. ECharts is an excellent data visualization library that provides a rich range of chart types and interactive functions and is widely used in web development. When using ECharts, many people will have a question: Does ECharts need to rely on jQuery? This article will explain this in detail and give specific code examples. First, to be clear, ECharts itself does not rely on jQuery;
