React 使用recharts实现散点地图

news/2024/2/21 2:48:14

一、前端框架react+ant design UI
二、首先安装recharts

npm install recharts
或者
yarn add recharts

三、引入插件及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';

三、具体实现代码如下

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;

效果图如下:

clipboard.png

附:有什么其它的相关配置可以看官网再做具体修改recharts地址


http://www.ppmy.cn/news/112819.html

相关文章

(BDCI-CCF)出租车发票识别

参考文章&#xff1a; ​​​​​​百度AI攻略&#xff1a;出租车票识别_才能我浪费的博客-CSDN博客 附完整python源码&#xff09;基于tensorflow、opencv的入门案例_发票识别一&#xff1a;关键区域定位_小白来搬家-CSDN博客_python发票识别 注&#xff1a;感谢一起完成项目…

2021-05-31

Linux DRM那些事-libdrm调试准备 本文主要介绍libdrm的代码下载、编译和调试前的准备工作。 一、代码下载 libdrm下载网址&#xff1a;https://dri.freedesktop.org/libdrm/libdrm-2.4.89.tar.bz2 解压命令&#xff1a;tar -jxvf libdrm-2.4.89.tar.bz2 在代码解压后&…

03

术语表 术语 定义 敏感数据 敏感数据的具体范围取决于产品具体的应用场景&#xff0c;产品应根据风险进行分析和判断。典型的敏感数据包括口令、银行帐号、大批量个人数据、用户通信内容和密钥等。一类如果丢失或者泄漏&#xff0c;会对数据的所有者造成负面影响的数据。 本…

20070523

休息了几天&#xff08;其实也不算休息&#xff0c;基本上按时下班走人&#xff09; 今天把活作了 估计会晚走 昨晚玩到快2点 。。。。 疯了。。。 拟或是冲动了&#xff1f;

EC 三

8>.debug message ECdebug的方式很多,类似于RW的方式,通过外接的工具,debugger和debuggee,把当前 Registers,memory里的值都读出来,拿来和FW或者DS里面对比,看是不是正确,也可以抛一些断点,然后回看registers里有没有改变.呵,这是一个细致又烦锁的活. 就我所知ITE85X…

23种设计模式之创建型模式(单例、工厂方法、抽象工厂、生成器和原型模式)

概述 设计模式是针对某一类问题的最优解决方案&#xff0c;是从许多优秀的软件系统中总结出的。 Java中设计模式&#xff08;java design patterns&#xff09;通常有23种。 模式可以分成3类&#xff1a;创建型、行为型和结构型。 创建型模式 创建型模式涉及对象的实例化&#…

PL/SQL之索引和分区

一、索引 --index 数据库中的索引和目录的概念类似&#xff0c;如果某个列出现在查询的条件中&#xff0c;而该列的数据是无序的&#xff0c;那么查询时只能一行一行去扫描。 创建索引就是对某些特定列中的数据进行排序&#xff0c;生成独立的索引表&#xff0c; 当在某个…

ASCII Unicode UTF-8等等编码介绍

目录 背景 Unicode UTF-8 ISO-8859-1 GB2312和GBK ANSI UTF-16LE 和UTF-16BE UTF-16 LE 和BE是什么 如何处理字节序问题 "带有BOM的UTF-8"又是什么&#xff1f; 背景 由于计算机是美国人发明的&#xff0c;因此最早只有127个字母被编码到计算机中&#x…

【后缀数组/SAM+边分树合并】LGP5115 Check,Check,Check one two!

【题目】 原题地址 给定一个字符串 S S S&#xff0c;求 ∑ 1 ≤ i < j ≤ n l c p ( i , j ) l c s ( i , j ) [ l c p ( i , j ) ≤ k 1 ] [ l c s ( i , j ) ≤ k 2 ] \sum_{1\leq i<j\leq n}lcp(i,j)lcs(i,j)[lcp(i,j)\leq k_1][lcs(i,j)\leq k_2] 1≤i<j≤n∑​l…

hdu5115-Dire Wolf【区间dp】

正题 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid5115 题目大意 有 n n n只狼&#xff0c;击败第 i i i只狼会扣 a i a_i ai​加上于其相邻的狼的 b l b r b_lb_r bl​br​点 h p hp hp。注意该狼被击败后会使原来于其相邻的狼变的相邻。 解题思路 显然区间 d p …

HDU 5115 Dire Wolf 区间dp

Dire Wolf Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid5115 Description Dire wolves, also known as Dark wolves, are extraordinarily large and powerful wolves. Many, if not all, Dire Wolves appear to originate …

HDU - 5115 经典区间dp

题意&#xff1a;给定n个狼的攻击值ai和附加攻击值bi&#xff0c;每杀死一匹狼i&#xff0c;受到的伤害等于i的攻击值和与i相邻的狼的附加攻击值。求杀死所有的狼受到的伤害的最小值。 dp[i][j]&#xff1a;杀死区间i~j的狼受到伤害的最小值。 初始化&#xff1a; a[0]a[n1]…

洛谷P5115 : SAM + 边分治 + 虚树dp

题意 给出串 S S S&#xff0c; K 1 , K 2 K1,K2 K1,K2&#xff0c;求 ∑ 1 ≤ i < j ≤ n L C P ( i , j ) ⋅ L C S ( i , j ) ⋅ [ L C P ( i , j ) ≤ K 1 ] ⋅ [ L C S ( i , j ) ≤ K 2 ] \sum_{1 \le i < j \le n}{LCP(i,j) \cdot LCS(i,j) \cdot [LCP(i,j) \le…

HDU5115(区间dp)详解

题目大意&#xff1a;你是一个战士现在面对&#xff0c;一群狼&#xff0c;每只狼都有一定的主动攻击力和附带攻击力。你杀死一只狼。你会受到这只狼的&#xff08;主动攻击力旁边两只狼的附带攻击力&#xff09;这么多伤害~现在问你如何选择杀狼的顺序使的杀完所有狼时&#x…

5115. 删除回文子数组

给你一个整数数组 arr&#xff0c;每一次操作你都可以选择并删除它的一个 回文 子数组 arr[i], arr[i1], ..., arr[j]&#xff08; i < j&#xff09;。 注意&#xff0c;每当你删除掉一个子数组&#xff0c;右侧元素都会自行向前移动填补空位。 请你计算并返回从数组中删…

【题解】hdu5115 区间DP

题目链接 dp[i][j]表示从i杀到j所受的最小伤害 dp[i][j]min(dp[i][j],dp[i][k-1]dp[k1][j]attack[k]extre[i-1]extre[j1]) 吓到了贼NM难想 //巨难想 #include<cstdio> #include<algorithm> #define INF 0x3f3f3f3f using namespace std; int dp[210][210];//d…

【洛谷P5115】Check,Check,Check one two!(后缀数组)(并查集)

传送门 题解&#xff1a; 前前后后花了几个月的时间总算是把shadowice的比赛写到只剩一道题了&#xff0c;那道题是个很水的莫队不想写了。 然而这道题标算给了个很扯的后缀自动机上边分树合并。。。TM什么毒瘤玩意 考虑选择两个极长重复子串来计算答案&#xff0c;其实就是…

HDU 5115 Dire Wolf

传送门&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid5115 森林狼嘛&#xff0c;1费11但是可以给相邻的随从加buff&#xff0c;hhh 现在有一列森林狼&#xff0c;你需要A死他们&#xff0c;当然你也会受到伤害每一只森林狼有自己的攻击力a[i]&#xff0c;以及对相邻…

刷基础题-hdu5115

http://acm.hdu.edu.cn/showproblem.php?pid5115 2019.5.30 区间dp&#xff0c;O(N^3)能过&#xff0c;攻击一匹狼的花费是这匹狼的攻击力和相邻狼的额外攻击力 #include <stdio.h> #include <algorithm> #include <string.h> #define mem(x,y) memset(x,y…
最新文章