React 使用recharts實現散點地圖

1、前端框架react+ant design UI
2、首先安裝recharts

npm install recharts
或者
yarn add recharts

3、引入插件及chinaJSON.js（裏面有經緯度信息）
下載百度雲網盤地址:
chinaJSON.js 提取碼：ep30
因爲項目須要我是所有存數據庫的，由於也須要本身添加，下面附一份兒全國省市縣經緯度數據
全國省市縣數據庫數據 提取碼：j1aa

import React,{Component} from 'react';
import {message} from 'antd';
import echarts from "echarts";
import {mapJson,geoCoordMap} from './chinaJSON.js';

3、具體實現代碼以下

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({
                value: geoCoord.concat(data[i].value),
                name: data[i].name,
            });
        }
    }
    return res;
};


class LayoutImg extends Component {
   constructor() {
      super();
      this.state = {
        loading: true,
        loaded:false,
        vmData:[
                {name: '雲浮', value: 24,num:10},
                {name: '煙臺', value: 28,num:5},
                {name: '崑山', value: 33,num:8},
                {name: '泰州', value: 36,num:10},
                {name: '廣州', value: 38,num:8},
                {name: '深圳', value: 41,num:10},
                {name: '三亞', value: 54,num:12},
                {name: '成都', value: 58,num:20},
                {name: '重慶', value: 66,num:5},
                {name: '大慶', value: 279,num:10}
                ]
      }
   }
   componentDidMount() {
      this.initMapDidMount();
   }

   initMapDidMount(){
      echarts.registerMap('china', mapJson); // 註冊地圖
      var mapChart = echarts.init(document.getElementById('map'));
      var option = {
         backgroundColor: '#404a59',
         title: {
            text: '分佈',
            // subtext: '點擊進入',
            // sublink: 'http://www.baidu.com/',
            left: 'center',
            textStyle: {
               color: '#fff'
            }
         },
         tooltip : {
            trigger: 'item',
            formatter: function (params) {            //格式化鼠標指到點上的彈窗返回的數據格式
                return params.name + ' : ' + params.value[2];
            }
         },
         geo: {                  //地裏座標系組件（至關於每一個省塊）
            map: 'china',
            roam:true,           //是否開啓縮放 
            label: {
               emphasis: {                //鼠標劃到後彈出的文字 顯示省份
                  color: '#FF0000',       //高亮背景色
                  show: true,             //是否高亮顯示
                  fontSize:12             //字體大小
               }
            },
            itemStyle: {                  //座標塊自己
               normal: {                  //座標塊默認樣式控制
                  areaColor: '#323c48',   //座標塊兒顏色
                  borderColor: '#111'
               },
               emphasis: {
                  areaColor: '#79FF79'    //放座標塊兒上，塊兒顏色
               }
            }
         },
         series: [
            {
               name: '信息',      // series名稱
               type: 'effectScatter',        // series圖表類型
               effectType: 'ripple',         // 圓點閃爍樣式，目前只支持ripple波紋式
               coordinateSystem: 'geo',      // series座標系類型
               data:convertData(this.state.vmData),// series數據內容
               showEffectOn: 'emphasis',       //配置什麼時候顯示特效 render 一直顯示，emphasis放上去顯示
               symbolSize: function (val) {
                    return val[2] / 10;
               },
               rippleEffect: {               // ripple的樣式控制
                  brushType: 'stroke',
                  color: '#28FF28',
               },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true      //顯示位置信息，
                    }
                },

               itemStyle: {                  //散點自己顯示控制
                  normal: {
                     color: '#28FF28',
                     shadowBlur: 10,
                     shadowColor: '#28FF28'
                  }
               },
               zlevel: 1
            }
         ],
         symbolSize: 12,
      }
      if (option && typeof option === "object") {
         mapChart.setOption(option);
      }
   }
   render() {
      return (
         <div className="cloudhost-box">
               <div id="map" style={{width: '1100px',height: '550px',mergeLeft:"0px"}} />
         </div>
      );
   }
}
 
export default LayoutImg;

效果圖以下：

附:有什麼其它的相關配置能夠看官網再作具體修改recharts地址