Skip to main content

senior

滑动，缩放及归位​

考虑到某些国家或地区在世界范围内较小，可能在默认缩放比例下不可见，故需要滑动或缩放来配合显示，归位则为复位默认缩放比例。

滑动 & 缩放​

使用 roam 属性进行配置，如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启。

归位​

缩放或平移后，恢复初始位置；使用toolbox中的 restore 进行配置：

toolbox: {
  show: true,
  orient: "horizontal",
  x: "left",
  y: "bottom",
  backgroundColor: "#1e90ff60",
  itemGap: 10,
  itemSize: 10,
  color: "#ffffff",
  showTitle: false,
  feature: {
    restore: {
      show: true,
      title: "Reset",
      },
    },
  }

列表优化​

如果地图处于 FlatList 或 ScrollView 中，滑动&缩放可能会和列表滚动存在冲突（尤其是 Android 端），例如如下示例：

import React from "react";
import { ScrollView, View } from "react-native";
import RNEChartsPro from "react-native-echarts-pro";

export default function MapCharts() {
  const mapData = {
    geo: [
      {
        type: "map",
        map: "world",
        mapType: "world",
        selectedMode: "single",
        itemStyle: {
          normal: {
            areaStyle: { color: "#B1D0EC" },
            color: "#eeeeee",
            borderColor: "#dadfde",
          },
          emphasis: {
            //mouse hover style
            label: {
              show: true,
              textStyle: {
                color: "#000000",
              },
            },
          },
        },
        roam: true,
      },
    ],
    series: {
      type: "effectScatter",
      coordinateSystem: "geo",
      geoIndex: 0,
      itemStyle: {
        color: "red",
      },
      data: [[116.4551, 40.2539, 10]],
    },
    toolbox: {
      show: true,
      orient: "horizontal",
      x: "left",
      y: "bottom",
      backgroundColor: "#1e90ff60",
      itemGap: 10,
      itemSize: 10,
      color: "#ffffff",
      showTitle: false,
      feature: {
        restore: {
          show: true,
          title: "Reset",
        },
      },
    },
  };

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={{ height: 300, backgroundColor: "#965454" }}></View>
      <RNEChartsPro
        height={250}
        option={mapData}
        onPress={res => {
          alert(JSON.stringify(res));
        }}
      />
      <View style={{ height: 300, backgroundColor: "#c7b8a1" }}></View>
    </ScrollView>
  );
}

解决的办法就是设置 WebView 的 nestedScrollEnabled 属性为 true 即可兼容：

  <RNEChartsPro
    height={250}
    option={mapData}
    webViewSettings={{
      nestedScrollEnabled: true, // <=== This line
    }}
    onPress={res => {
      alert(JSON.stringify(res));
    }}
  />

自定义数据​

默认数据为世界地图，若需要自定义展示，可以前往以下渠道下载地图数据：