Due to business needs to display the world map, and the map data operation;

Native-echarts was used earlier, but there were four problems with this component: 1. Long-term no maintenance; 2. It relies on a tpl. HTML file, which is inconvenient to use. 3. The echarts version is older; 4. No built-in map function;

Therefore, react-Native echarts-Pro is born, and the advantages of this component are as follows:

  1. Using the latest echarts5.0 version (version released on December 2, 2020, more can refer to: echarts.apache.org/zh/download…).
  2. Without importing the tpl. HTML file, use the template string + modules to create HTML nodes;
  3. Added an official default theme.
  4. – Added world map functionality;
  5. Maintain and update frequently;

Without further ado, let’s use it together!

Github: github.com/supervons/r…

NPM address: www.npmjs.com/package/rea…

Effect preview:

IOS:

Android:

I. Installation and use

The core of this component, which is based on WebView, is to use an HTML div node to mount echarts data.

So, make sure you have react-Native WebView installed in your project

If not, do the following:

$NPM install React-native-echarts-pro --save $NPM install React-native-webview --save $NPM install React-native-webview --save $NPM install React-native-webview --saveCopy the code

Second, the use of

General chart:

import React, { Component } from 'react';
import { View } from 'react-native';
import RNEChartsPro from 'react-native-echarts-pro';

export default class Demo extends Component {
  constructor(props) {
    super(props);
    this.pieOption = {
      color: this.colors,
      tooltip: {
        backgroundColor: 'rgba (255255255,0.8)'.borderColor: '#668BEE'.borderWidth: 1.padding: [5.10].textStyle: {
          color: '#24283C'.fontSize: 12
        },
        trigger: 'item'.// formatter: '{b} <br/>{c} : ({d}%)',
        formatter: function(a) {
          return (
            ' +
            a['color'] +
            '; margin-right: 5px; border-radius: 50%; }">' +
            a['name'] +
            '

 Test: ' +
            a['value'] +
            'a' +
            '

 Ratio: ' +
            a['percent'] +
            The '%'); }},series: [{name: 'Source of AD access'.type: 'pie'.legendHoverLink: true.hoverAnimation: true.avoidLabelOverlap: true.startAngle: 180.radius: '55%'.center: ['50%'.'35%'].data: [{ value: 105.2.name: 'android' }, { value: 310.name: 'iOS' }, { value: 234.name: 'web'}].label: {
            normal: {
              show: true.textStyle: {
                fontSize: 12.color: '#23273C'}}},emphasis: {
            lable: {
              show: true.fontSize: 12.color: '#668BEE'
            },
            itemStyle: {
              show: true.shadowBlur: 10.shadowOffsetX: 0.shadowColor: 'rgba (0, 0, 0, 0.5)'}}}]}; }render() {
    return (
      <View style={{ height: 300.paddingTop: 25}} >
        <RNEChartsPro height={250} option={this.pieOption} />
      </View>); }}Copy the code

Map:

import React, { Component } from 'react';
import { View } from 'react-native';
import RNEChartsPro from 'react-native-echarts-pro';

export default class Demo extends Component {
  constructor(props) {
    super(props);
    this.mapData = {
      visualMap: {
        show: false.left: 'right'.top: 'center'.min: 1.max: 3.calculable: true
      },
      series: [{type: 'map'.map: 'world'.mapType: 'world'.selectedMode: 'single'./ / multiple alternative
          itemStyle: {
            normal: {
              areaStyle: { color: '#B1D0EC' },
              color: '#B1D0EC'.borderColor: '#dadfde' // The border color of the block
            },
            emphasis: {
              // Hover style
              label: {
                show: true.textStyle: {
                  color: '# 000000'}}}},data: [].roam: true}].toolbox: {
        / / show the strategy, can be selected as: true (display) | false (hidden)
        show: true./ / layout, the default for horizontal layout, optional for: 'horizontal' | 'vertical'
        orient: 'horizontal'./ / level position, the default for the map center, optional for: 'center' | 'left' | 'right' | {number} (x coordinate, px)
        x: 'left'./ / vertical position, the default to the top of the map, optional for: 'top' | 'bottom' | 'center' | {number} (y, px)
        y: 'bottom'.// The toolbox background color is transparent by default
        backgroundColor: '#1e90ff60'.// The interval between each item (unit: px, default: 10) is the horizontal interval for horizontal layout and the vertical interval for vertical layout
        itemGap: 10.// Icon size, unit (px)
        itemSize: 10.// The toolbox icon color sequence, recycling, and support to specify a color in a specific feature
        color: '#ffffff'.// Whether to display the toolbox text prompt, enabled by default
        showTitle: false.feature: {
          // Restore to reset the original diagram
          restore: {
            show: true.title: 'reduction'}}}}; }render() {
    return (
      <View style={{ height: 300}} >
        <RNEChartsPro height={250} option={this.mapData} />
      </View>); }}Copy the code

If you have any questions, please visit github.com/supervons/r… Question!!

Or join the React-Native learning group at 783071253

Communicate and learn together, there are various front – end bull diving in the group.