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
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.
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 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
