npm install recharts

yarn add recharts

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({        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;