当前位置：首页 > news >正文

React - echarts 世界地图，中国地图绘制

news 来源：原创 2025/7/5 18:33:44

中国地图

首先需要一个包含中国所有省份名称的 json，这个好多网站都能找到。
我传到资源里了，放百度网盘怕太长时间不登录给我删掉了。

中国地图中文版json

我把地图抽出来单独做成了组件，这样用的时候比较方便.

使用的时候：

import ChinaMap from './modules/chinaMap';
......const dataList = [{"name":"北京","value":2000},{"name":"福建","value":4000},{"name":"上海","value":8000},{"name":"河北","value":3000},{"name":"山东","value":5000},]......<ChinaMap data={dataList} min={0} max={10000}/>

代码最上面引入的 China.json 就是之前提到的包含中国所有省份名称的json.

echartsMapClick 这个方法是点击地图模块才触发的事件，我没有这个需求，所以空着了。

import china from './China.json';
import * as echarts from 'echarts'; //全局引入 ，可按需引入
import { useEffect, useRef } from 'react';const Map = (props) => {const chartRef = useRef();const {min,max} = props;const echartsMapClick = () => {//点击地图模块逻辑事件};const mapOption = (mapName, data) => {const myChart = echarts.init(chartRef.current);echarts.registerMap(mapName, data);const option = {tooltip: {backgroundColor: 'rgba(21, 24, 45, 0.9)', // 提示框浮层的背景颜色。textStyle: {// 提示框浮层的文本样式。color: '#fff',fontSize: 14,},extraCssText: 'border-color: rgba(21, 24, 45, 0.9);',formatter: function (params) {//数据格式化const val = params.value ? params.value : 0;if (params.value) {return (params.name + '<br />' + params.seriesName + '：' + val);} else {return '暂无数据';}},},toolbox: {show: true,//orient: 'vertical',left: 'left',top: 'top',feature: {dataView: { readOnly: false },restore: {},saveAsImage: {}}},visualMap: {min: 0,max: max,left: 'left',top: 'bottom',text: [max, min], //取值范围的文字inRange: {color: ['#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026']},show: true, //图注},geo: {map: 'china',roam: false, //不开启缩放和平移zoom: 1.23, //视角缩放比例label: {normal: {show: true,fontSize: '10',color: 'rgba(0,0,0,0.7)',},},itemStyle: {normal: {borderColor: 'rgba(0, 0, 0, 0.2)',},emphasis: {areaColor: '#4BD6C7', //鼠标选择区域颜色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)',},},},series: [{name:'交易量',type: 'map',geoIndex: 0,data: props.data,},],};myChart.setOption(option); //绘图//点击画布内还是画布外myChart.getZr().on('click', (params) => {if (params.target) {myChart.on('click', echartsMapClick); //增加点击事件}});};const loadingChina = () => {mapOption('china', china); //初始化-创建中国地图};useEffect(() => {loadingChina();}, [props.data]);return <div style={{ width: '100%', minHeight: '500px' }} ref={chartRef} />;
};
export default Map;

世界地图

世界地图也需要一个包含所有国家名称的json，但是我没找到免费的中文版，所以用的英文版.

世界地图json

使用的时候：

import WorldMap from './modules/worldMap';
......const worldDataList = [{"name":"北京","value":2000},{"name":"福建","value":4000}]......<WorldMap data={worldDataList} />

组件代码：

import world from './world.json';
import * as echarts from 'echarts'; //全局引入 ，可按需引入
import { useEffect, useRef } from 'react';const WorldMap = (props) => {const chartRef = useRef();const topNumber = props.data[0].value;const bottomNumber = props.data[props.data.length - 1].value;const echartsMapClick = (target) => {//点击地图模块逻辑事件console.log(target)};const mapOption = (mapName, data) => {const myChart = echarts.init(chartRef.current);echarts.registerMap(mapName, data);const option = {tooltip: {backgroundColor: 'rgba(21, 24, 45, 0.9)', // 提示框浮层的背景颜色。textStyle: {// 提示框浮层的文本样式。color: '#fff',fontSize: 14,},extraCssText: 'border-color: rgba(21, 24, 45, 0.9);',formatter: function (params) {//数据格式化const val = params.value ? params.value : 0;if (params.value) {return (params.name + '<br />' + params.seriesName + '：' + val);} else {return '暂无数据';}},},visualMap: {min: 0,max: topNumber,left: 'right',top: 'bottom',text: [topNumber, bottomNumber], //取值范围inRange: {color: ['#D2DDFF', '#6E92FF'], //取值范围的颜色},show: true, //图注},geo: {map: 'world',roam: false, //不开启缩放和平移zoom: 1.23, //视角缩放比例itemStyle: {normal: {borderColor: 'rgba(0, 0, 0, 0.2)',},emphasis: {areaColor: '#4BD6C7', //鼠标选择区域颜色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)',},},},series: [{name:'交易量',type: 'map',geoIndex: 0,data: props.data,},],};myChart.setOption(option); //绘图//点击画布内还是画布外myChart.getZr().on('click', (params) => {if (params.target) {myChart.on('click', echartsMapClick(params)); //增加点击事件}});};const loadingWorld = () => {mapOption('world', world); //初始化-创建中国地图};useEffect(() => {loadingWorld();}, [props.data]);return <div style={{ width: '100%', minHeight: '500px' }} ref={chartRef} />;
};
export default WorldMap;

最终效果

在这里插入图片描述

React - echarts 世界地图，中国地图绘制

中国地图首先需要一个包含中国所有省份名称的 json，这个好多网站都能找到。我传到资源里了，放百度网盘怕太长时间不登录给我删掉了。中国地图中文版json 我把地图抽出来单独做成了组件，这样用的时候比较方便. 使用的时候： …...

编程日记 2025/7/5 18:33:44

knife4j-openapi3 4.5 最基本的使用 openAPI

最基本的使用，配置太多懒得研究 SpringBoot 整合 knfe4j ，使用 OpenAPI3 规范，这个兄弟写的挺好环境： spring-boot-starter-parent：3.4.0 1. 依赖 <dependency><groupId>com.github.xiaoymin</gr…...

编程日记 2025/7/5 18:23:43

如何在 Ubuntu 22.04 上安装和使用 Apache Kafka

简介 Apache Kafka是一个高性能、低延迟的分布式流处理平台，广泛用于构建实时数据管道和流式应用。本文将指导你如何在Ubuntu 22.04系统上快速部署Apache Kafka，让你体验到Kafka在处理大规模实时数据流方面的强大能力。通过本教程，你将学会如…...

编程日记 2025/7/5 17:32:35

Linux:network:添加ip的时候自动添加一个本地路由

文章目录问题问题最近在看一个路由的问题，顺便看内核代码，发现在添加IP的时候，内核会自动添加一个local route。 net/ipv4/devinet.c inet_rtm_newaddr->__inet_insert_ifa /* Send message first, then call notifier.Notifier will trigger FIB update, so thatlis…...

编程日记 2025/7/5 17:18:54

Android 10、11、12存储适配相关

AndroidQ(10)分区存储完美适配 - 简书前言最近时间在做AndroidQ的适配，截止到今天AndroidQ分区存储适配完成，期间出现很多坑，目前网上的帖子大部分都是概述变更内容，接下来的几篇帖子都是对分区存储实际...https://www.jianshu.c…...

编程日记 2025/7/5 17:08:41

如何将视频转化为音频？五个方法策略

在日常生活中，我们经常需要将视频中的音频提取出来，以便在特定的场合使用。无论是为了制作铃声、背景音乐，还是为了进行语音转文字处理，视频转音频的需求都非常普遍。如何将视频转化为音频？本文将详细介绍多种将视频转…...

编程日记 2025/7/5 17:55:56

ecovadis评估最新标准

EcoVadis评估的最新标准主要包括奖牌评估规则和新增的徽章规则，以下是对这两方面的详细阐述： 一、奖牌评估规则评估范围：EcoVadis的评估总分为100分，评估内容涵盖环境、劳工与人权、商业道德、可持续采购等四大主题。奖牌等级…...

编程日记 2025/7/5 16:47:08

Java版-图论-最小生成树-Kruskal算法

实现描述为了造出一棵最小生成树，我们从最小边权的边开始，按边权从小到大依次加入，如果某次加边产生了环，就扔掉这条边，直到加入了 n-1 条边，即形成了一棵树。实现代码首选我们对所有的边&#xff0c…...

编程日记 2025/7/5 16:31:10

【单片机开发】MCU三种启动方式(Boot选择)[主Flash/系统存储器(BootLoader)/嵌入式SRAM]

目录参考资料： 利用 Boot 选择不同的启动方式： 单片机的存储结构(主 FLASH/系统存储器/嵌入式 SRAM)： 1. Cortex-M 内核芯片——启动原理： 1.1. 启动流程： 1.2. 根据单片机的存储器映射和架构图：启动…...

编程日记 2025/7/5 16:50:51

实验15 验证LSTM模型的长程依赖

本次实验依托上个实验一模型构建创建LSTM模型，里面包括初始化init函数、初始化权重函数_init_weights、初始化状态函数init_state、前向传播函数forward。 init函数：虽然每个时间的输入和隐层都是一样的，但是他们会有四组不同的权重&am…...

编程日记 2025/7/5 16:26:30

Charles功能说明

1.扫把(clear the current Session) (前头方向) 作用:清除所有抓取的包(正方形框) 2.中心圈-未启用显示(Star Recording)点击启动 -启动之后显示(Stop Recording)点击停止作用:启动之后开始抓取包(刷新一次页面或跳转抓取内容) 3.锁-未启动显示(Star SSL Proxying)点击启动 -启…...

编程日记 2025/7/5 16:58:44

自动秒收录程序与自动秒收录网站源码论坛版本下载

自动秒收录程序与自动秒收录网站源码论坛版本下载随着互联网的快速发展，网站优化已成为众多企业和个人博主提升在线影响力的关键手段。其中，SEO（搜索引擎优化）作为提升网站排名的核心策略，备受关注。而SEO优化的一个…...

编程日记 2025/7/5 3:46:15

HTML颜色-HTML脚本

HTML脚本 js使得HTML页面具有更强的动态和交互性 HTML<script>标签标签用于定义客户端脚本，比如javascript 可包含脚本语句，也可以通过src属性指向外部的脚本文件 JavaScript最常用于图片操作，表单验证以及动态的内容更新 HTML<n…...

编程日记 2025/7/5 10:42:30

【WRF理论第十三期】详细介绍 Registry 的作用、结构和内容

目录 1. Introduction：介绍 Registry 的作用和功能。2. Registry Contents：详细描述 Registry 的结构和内容，包括各个部分的条目类型。2.1. DIMSPEC ENTRIES（维度规格条目）2.2. STATE ENTRIES（状态变量条目…...

编程日记 2025/7/5 16:15:40

使用Kimi开发自己的问答应用

概述 Kimi是大家常用的一个人工智能助手，本文使用Kimi开发文档，以node作为后端，开发与一个问答系统实现效果 Kimi简介 Kimi是由Moonshot AI开发的人工智能助手，擅长中文和英文对话。目标是帮助用户解决问题、提供信息和执行任…...

编程日记 2025/7/5 1:56:46

Vue前端开发-路由其他配置

在路由文件中，除了跳转配置外，还可以进行路径重定向配置，如果没有找到对应的地址，还可以实现404的配置，同时，如果某个页面需要权限登录，还可以进行路由守卫配置，接下来，分…...

编程日记 2025/7/5 16:39:13

AI与遥感的融合：构建新一代智能监测作业平台

在测绘地理信息与遥感领域，人工智能（AI）技术的融合正推动着一场监测作业模式的革命。AI不仅提升了数据处理的效率，还极大地扩展了遥感技术的应用范围和深度。遥感监测的智能化趋势随着遥感数据量的激增，传统的人工…...

编程日记 2025/7/5 8:17:43

3D 视觉定位技术：汽车零部件制造的智能变革引擎

在汽车零部件制造领域，传统工艺正面临着前所未有的挑战。市场对于零部件精度与生产效率近乎苛刻的要求，促使企业寻求突破之道。而 3D 视觉定位技术，为汽车零部件制造开启了精准定位与智能化生产的新纪元。 3D 视觉定位系统的核心技术原理 3…...

编程日记 2025/7/5 2:04:29

git提交时出现merge branch main of xxx

git提交时出现merge branch main of xxx 原因： 1、同事commit了一个修改A，push到remote 2、我把这个修改直接pull了下来（pull是fetchmerge的操作，自动合并到本地workspace） 3、同事因为后续的commit有冲突&#xff0c…...

编程日记 2025/7/5 17:17:49

重生之我在异世界学编程之C语言：深入结构体篇（上）

大家好，这里是小编的博客频道小编的博客：就爱学编程很高兴在CSDN这个大家庭与大家相识，希望能在这里与大家共同进步，共同收获更好的自己！！！ 本文目录引言正文《1》结构体的两种声明一、结构…...

编程日记 2025/7/4 19:54:02

到达率和服务率在python中实现

到达率和服务率在python中实现概念理解到达率（Arrival Rate）：是指顾客（或任务、事件等）到达服务系统的平均速率，通常用单位时间内到达的数量来表示。例如，在一个客服中心，每小时平均有10个客户来电咨询，这里的每小时10个客户就是到达率。服务率（Service Rate）：是…...

编程日记 2025/7/5 16:17:12

重视猫艾滋：宠物健康的隐秘挑战

猫艾滋，全称为猫获得性免疫缺陷综合征（Feline Acquired Immunodeficiency Syndrome），是由猫免疫缺陷病毒（FIV）感染引起的一种严重危害猫类健康的疾病。虽然其名称与人类艾滋病相似，但猫艾滋仅在…...

编程日记 2025/7/5 16:49:24

使用长轮询解决某些场景的实时消息推送需求

需求来源最近做一个需求实现在移动端通过按钮，远程控制大屏幕上展示的资源进行实时切换，可以展示一个大屏页面，可以展示一段视频，也可以展示一张图片。解决思路大屏幕上打开一个游览器，访问指定动态资源展示页面…...

编程日记 2025/7/4 20:27:30

uniapp-内部项目使用文档

uniapp-内部项目使用文档目录 uniapp-内部项目使用文档阶段1自行实现内容：阶段1问题记录： 阶段2自行实现内容： 阶段3 APP项目介绍及规范阶段4 公共组件方法UseList 列表页面HooksListItem 列表项uni-load-more 列表加载更多组件CardTitle 列…...

编程日记 2025/7/5 17:21:35

linux搭建NFS服务和autofs自动挂载NFS

文章目录 1、nfs服务1、nfs原理2、RPC和NFS通讯原理3、RPC和NFS流程4、NFS工作流程5、服务端搭建6、客户端搭建7、autofs自动挂载 1、nfs服务 1、nfs原理是一个NAS的存储，通过网络来进行文件的共享，表现出来的形式就是一个文件夹可以支持多个linux挂…...

编程日记 2025/7/5 17:17:50

springboot415社区网格化管理平台的构建-(论文+源码)_kaic

摘要现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本社区网格化管理平台就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据…...

编程日记 2025/7/5 17:24:00

ubuntu下open-webui + ollama本地大模型部署

文章目录 nvidia gpu驱动安装安装卸载 ollama 部署添加docker秘钥docker配置添加国内镜像源ollama安装从源拉取ollama镜像。启动一个ollama容器通过ollama下载模型到本地检验本地模型 open-webui 部署安装容器和镜像下载webui使用查看模型运行时内存、cpu、gpu占用业余…...

编程日记 2025/7/5 16:50:16

自动化运维-配置Mysql、emqx、redis、nginx等通用性Linux日志分割工具 - logrotate

前言：logrotate 是一个在 Linux 系统中用于管理和轮转日志文件的工具。它的主要目的是帮助系统管理员自动执行日志文件的轮转、压缩、删除和邮件通知等任务，以防止日志文件占用过多的磁盘空间，同时保持日志文件的可管理性。参考命令&#x…...

编程日记 2025/7/5 17:11:56

71、docker镜像制作上传/下载到阿里云

基本思想：简单学习一下如何制作镜像和上传下载到私有阿里云，然后构建一个gpu的训练/推理环境，以备后续使用一、配置环境 ubuntu@ubuntu:~$ sudo apt-get install docker.ioubuntu@ubuntu:~$ sudo docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS P…...

编程日记 2025/7/5 16:38:25

力扣--LCR 178.训练计划VI

题目教学过程中，教练示范一次，学员跟做三次。该过程被混乱剪辑后，记录于数组 actions，其中 actions[i] 表示做出该动作的人员编号。请返回教练的编号。示例 1： 输入：actions [5, 7, 5, 5] 输出&#…...

编程日记 2025/7/5 16:12:17

独孤思维：又有一个副业项目降价了

不要过早量出底牌，不然会变得低贱且廉价。昨天在一个群里，看到有个博主，没有成交订单。她把和用户的聊天对话发出来，我们大致看了下。发现人家是有意向付费的。但是这个博主过于心急，说今天加入可以优惠&#…...

编程日记 2025/7/5 17:16:43

【笔记】分布式任务调度平台XXL-JOB

这篇笔记主要记录以下内容： （1）第一次启动xxl-job的过程 （2）模块、文件、数据库（表和字段）的作用 （3）极少的源码解读（XxlJobConfig） 有点像实…...

编程日记 2025/7/5 16:22:15

Java基础总结上(Ref：JavaGuide)

基础概念与常识 Java语言有哪些特点，优点？ 简单易学，是一门面向对象的语言，有封装继承多态三大特性，而且有多重防护机制保证安全性，例如权限修饰符，限制程序直接访问操作系统资源。通过JIT编译…...

编程日记 2025/7/5 17:30:35

嘉誉府5区共有产权看房记

特地工作日来看下嘉誉府5区的网红共有产权的房子，主要是冲着均价2.1万/平才来看。说实话从塘尾地铁步行到嘉誉府5区还挺需要时间的哈。可能以后需要电驴代步到地铁？确实楼盘现在是现楼，今年买明年住。鸿荣源确实很666哈。今天来不需要排队&a…...

编程日记 2025/7/4 19:21:52

PostgreSQL函数中使用now()或current_timestamp的异同

在PostgreSQL函数中使用now()或current_timestamp可以获取当前的日期和时间。 now()函数返回当前的日期和时间，包括时区信息。它可以用于记录操作的时间戳或在查询中进行时间比较。 current_timestamp函数也返回当前的日期和时间，但不包括时区信息。它…...

编程日记 2025/7/5 17:24:01

跟李笑来学美式俚语（Most Common American Idioms）: Part 56

Most Common American Idioms: Part 56 前言本文是学习李笑来的Most Common American Idioms这本书的学习笔记，自用。 Github仓库链接：https://github.com/xiaolai/most-common-american-idioms 使用方法: 直接下载下来（或者clone到本地…...

编程日记 2025/7/5 17:28:43

类和对象一

目录 1.类的引入 2.类的定义 3.访问限定符 4.类的作用域 5.类对象模型 6.类的大小 1.类的引入 C语言结构体中只能定义变量，在C中，结构体不仅可以定义变量，也可以定义函数。 C兼容C语言，结构用法可以继续使用同时sruct也升…...

编程日记 2025/7/1 18:16:37

两个数的和最小

两个数的和最小 C 代码C 代码Java 代码Python 代码 💐The Begin💐点点关注，收藏不迷路💐 给你n个整数，你可以从中任意取两个数a和b，问a加上b的和的绝对值最小可能是多少？ 输入有多组测试数据…...

编程日记 2025/7/1 11:23:46

Mac mini m4本地跑大模型（ollama + llama + ComfyUI + Stable Diffusion ｜ flux)

安装chat大模型（不推荐，本地运行的大模型只能聊废话，不如网页版使用openAI等高效） 首先下载ollama的安装包 https://ollama.com/ 点击启动访问：http://localhost:11434 Ollama is running 代表已经运行起来了&#x…...

编程日记 2025/7/3 7:50:17

IoTDB AINode 报错，call inference 301: Error ocurred while executing inference

问题及现象使用时序数据库 IoTDB 的 AINode 的 call inference 语句后报错： Msg: org.apache.iotdb.jdbc.IoTDBSOLException：301: Error ocurred while executing inference:[tuple object has no attribute inference]解决方法可以替换 venv 里面的…...

编程日记 2025/7/3 23:51:17

Linux网络 UDP socket

背景知识我们知道， IP 地址用来标识互联网中唯一的一台主机， port 用来标识该主机上唯一的一个网络进程，IPPort 就能表示互联网中唯一的一个进程。所以通信的时候，本质是两个互联网进程代表人来进行通信，{srcIp&…...

编程日记 2025/7/5 11:25:09

Day2——需求分析与设计

教师端签到应用软件的需求分析； 产品经理如何写好产品需求文档（附模板） 需求分析是软件开发过程中的关键步骤，它确保了开发的软件能够满足用户的需求。以下是进行需求分析的具体步骤： 1. 确定分析目标明确教师端签到…...

编程日记 2025/7/3 1:12:07

aosp15上winscope离线html如何使用？

背景： aosp15上的如何使用Winscope前面已经有分享过相关的blog，这块其实和aosp14没啥大的差别，具体可以看如下2个文章： 手把手教你aosp14编译Winscope 安卓aosp15手机上如何离线获取winscope文件文章中也说明在aosp15如果直接使…...

编程日记 2025/7/1 23:08:49

AttributeError: module numpy has no attribute int .报错解决

AttributeError: module numpy has no attribute int .报错解决方案_attributeerror: module numpy has no attribute i-CSDN博客以上为参考教程，试了卸载再安装，不行，报错： Found existing installation: numpy 1.24.3 error: …...

编程日记 2025/7/4 0:27:08

python爬虫常用数据保存模板（Excel、CSV、mysql）——scrapy中常用数据提取方法（CSS、XPATH、正则）（23）

文章目录 1、常用数据保存模板2.1 保存为Excel格式2.2 保存为CSV格式2.3 保存至mysql数据库2、scrapy中常用数据提取方法2.1 XPath选择器2.2 CSS选择器2.3 正则表达式1、常用数据保存模板 2.1 保存为Excel格式 # 1、导入模块 from openpyxl import workbook# 2、创建一个exce…...

编程日记 2025/7/4 14:35:26

【面试题】简述rabbitmq的组织架构

[面试题]简述rabbitmq的组织架构 RabbitMQ 是一种流行的消息中间件，其架构设计围绕消息生产者, 消息消费者和消息中转（Broker）展开。以下是 RabbitMQ 的主要组织架构组件和它们之间的关系： 1. 核心组件 1.1 Producer&#xff0…...

编程日记 2025/7/2 12:31:39

C#-WPF 常见类型转换方法（持续更新）

目录一、普通类型转换 1、Convert类 2、Parse(转String) 3、TryParse(转String) 4、ToString(转String) 5、int转double 6、String转DateTime 7、自定义类型的显示/隐式转换二、byte[]转ImageSource 方法一方法二一、普通类型转换 1、Convert类提供了一种安全…...

编程日记 2025/7/1 13:57:33