antdesign 地图_React 使用recharts实现散点地图的示例代码

一、前端框架react+ant design UI

二、首先安装recharts

npm install recharts

或者

yarn add recharts

三、引入插件及chinaJSON.js(里面有经纬度信息)

由于项目需要我是全部存数据库的，因为也需要自己添加，下面附一份儿全国省市县经纬度数据

import React,{Component} from 'react';

import {message} from 'antd';

import echarts from "echarts";

import {mapJson,geoCoordMap} from './chinaJSON.js';

三、具体实现代码如下

import React,{Component} from 'react';

import {message} from 'antd';

import echarts from "echarts";

import {mapJson,geoCoordMap} from './chinaJSON.js';

const convertData = (data) => {

var res = [];

for (var i = 0; i < data.length; i++) {

var geoCoord = geoCoordMap[data[i].name];

if (geoCoord) {

res.push({