用 echarts 实现中国地图的展示

11_1.png

基于 echarts 用 react 实现中国地图的展示，主要是用地理坐标系组件和GEOJSON

// 版本如下
echarts@5.1.2
echarts-for-react@3.0.1

ECharts 可以使用 GeoJSON 格式的数据作为地图的轮廓，通过 registerMap 注册地图数据到 echarts 中，然后通过设置 geo 属性

registerMap(
    // 地图名称，在 geo组件或者 map图表类型中设置的 `map` 对应的就是该值。
    mapName: string,
    opt: {
        // GeoJson 格式的数据，具体格式见 https://geojson.org/
        geoJSON: Object | string;
        // 将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看
        specialAreas?: Object;
    }
)

geo.map
{
    componentType: 'geo',
    // Geo 组件在 option 中的 index
    geoIndex: number,
    // 点击区域的名称，比如"上海"
    name: string,
    // 传入的点击区域的 region 对象，见 geo.regions
    region: Object
}

完整代码示例如下：

import React from 'react'
import ReactEcharts from 'echarts-for-react'
import * as echarts from 'echarts/core';
import chinaJson from './china'

echarts.registerMap('china', {
  geoJSON: chinaJson
})

function ChinaMap() {
  return (
      <ReactEcharts
        option={getChartOption()}
        style={{ width: '100%', height: '100%' }}
      />
    )
}

function getChartOption() {
  return {
    backgroundColor: '#404a59',
    title: {
      left: 10,
      right: 10,
      text: '中国地图',
      textStyle: {
        color: '#fff',
      },
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      y: 'bottom',
      x: 'right',
      textStyle: {
        color: '#fff',
      },
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      scaleLimit: {
        min: 0.5,
        max: 3,
      },
      roam: true,
      itemStyle: {
        areaColor: '#323c48',
        borderColor: '#111',
      },
      emphasis: {
        label: {
          show: false,
        },
        itemStyle: {
          areaColor: '#60758e',
        }
      }
    },
  }
}

GeoJSON 格式的中国地图

// 完整数据参照下面链接 https://github.com/haihaigang/china-demo/blob/master/src/china.js
{
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        id: '65',
        size: '550',
        name: '新疆维吾尔自治区',
        cp: [84.9023, 42.148],
        childNum: 18,
      },
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [96.416, 42.7588],
            // ...
          ],
        ],
      },
    },
  ]
}

GeoJSON 数据格式 https://geojson.org/
第三方地图资源 https://github.com/echarts-maps。
echarts 文档 https://echarts.apache.org/zh/api.html#echarts
中国地图的 GeoJSON 格式数据 https://github.com/haihaigang/china-demo/blob/master/src/china.js