React使用recharts实现散点地图的示例代码
作者:mobiledu2502901883 | 来源:互联网 | 2022-01-25 04:44
这篇文章主要介绍了React使用recharts实现散点地图的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
一、前端框架react+ant design UI
二、首先安装recharts
或者
三、引入插件及chinaJSON.js(里面有经纬度信息)
由于项目需要我是全部存数据库的,因为也需要自己添加,下面附一份儿全国省市县经纬度数据
chinaJSON.js_jb51.rar
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
);
}
}
export default LayoutImg;
效果图如下:
附:有什么其它的相关配置可以看官网再做具体修改recharts地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。