【React-Native】基于react-native-echarts-pro图表库的地图展示

文档库地址【点此访问】 

由于业务需要展示世界地图，并且对地图数据进行操作；

前期选用native-echarts，但是该组件有四个问题：

1.长期不维护；

2.需依赖一个tpl.html文件，不方便使用；

3.echarts版本较老；

4.没有自带的地图功能；

故有了react-native-echarts-pro的诞生，本组件优点如下：

1. 使用最新的echarts5.0版本（2020年12月2日发布，更多版本可以参考：下载 - Apache ECharts）
2. 无需引入tpl.html文件，使用模板字符串 + modules方式创建html节点；
3. 增加官方默认主题；
4. 增加世界地图功能；
5. 时常维护及更新；
6. 支持 Typescript

废话不多说，让我们一起来使用吧！

Github 地址：https://github.com/supervons/react-native-echarts-pro

NPM 地址：react-native-echarts-pro - npm

---

效果预览：

---

 一、安装及使用

该组件基于WebView来使用，核心就是使用一个html div 节点挂载echarts数据。

所以，确保项目中安装了react-native-webview

如果没有，执行以下：

$ npm install react-native-echarts-pro --save

$ npm install react-native-webview --save // 已安装忽略即可

---

二、使用

普通图表：

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(255,255,255,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 (
            '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
            a['color'] +
            ';margin-right: 5px;border-radius: 50%;}"></i>' +
            a['name'] +
            '</br>测试:  ' +
            a['value'] +
            '个 ' +
            '<br>占比:  ' +
            a['percent'] +
            '%'
          );
        }
      },
      series: [
        {
          name: '广告访问来源',
          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>
    );
  }
}

地图：

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多选
          itemStyle: {
            normal: {
              areaStyle: { color: '#B1D0EC' },
              color: '#B1D0EC',
              borderColor: '#dadfde' //区块的边框颜色
            },
            emphasis: {
              //鼠标hover样式
              label: {
                show: true,
                textStyle: {
                  color: '#000000'
                }
              }
            }
          },
          data: [],
          roam: true
        }
      ],
      toolbox: {
        // 显示策略，可选为：true（显示） | false（隐藏）
        show: true,
        // 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
        orient: 'horizontal',
        // 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
        x: 'left',
        // 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
        y: 'bottom',
        // 工具箱背景颜色，默认透明
        backgroundColor: '#1e90ff60',
        // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
        itemGap: 10,
        // 工具箱icon大小，单位（px）
        itemSize: 10,
        // 工具箱icon颜色序列，循环使用，同时支持在具体feature内指定color
        color: '#ffffff',
        // 是否显示工具箱文字提示，默认启用
        showTitle: false,
        feature: {
          // 还原，复位原始图表
          restore: {
            show: true,
            title: '还原'
          }
        }
      }
    };
  }

  render() {
    return (
      <View style={{ height: 300 }}>
        <RNEChartsPro height={250} option={this.mapData} />
      </View>
    );
  }
}

---

如果有什么问题，欢迎在：https://github.com/supervons/react-native-echarts-pro/issues 提问！！！

或者加入react-native学习群：783071253

一起交流学习，群内有各种前端大牛潜水哦。