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:

1. Copy the WebChart component folder in the root directory to the appropriate place in your project

2. 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 <script></script> 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 entire content of this article. I hope it will be helpful to everyone's study. More For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use NodeJS Lighthouse Gulp to build an automated website performance testing tool

##Usage and use of React mongodb Configuration

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!