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

ECharts 地图开发入门

news 来源：原创 2025/9/21 17:19:06

一、准备工作：环境搭建与数据准备

1. 引入 ECharts 库

TypeScript

取消自动换行复制

2. 准备容器

在 HTML 中创建一个用于显示地图的容器：

TypeScript

取消自动换行复制

二、绘制基础地图：3 步搞定

1. 初始化 ECharts 实例

TypeScript

取消自动换行复制

const chart = echarts.init(document.getElementById('mapChart'));

2. 配置基础地图选项

TypeScript

取消自动换行复制

const option = {

title: { text: '中国地图基础示例', left: 'center' }, // 标题

tooltip: {}, // 提示框（鼠标悬停显示数据）

series: [

{

type: 'map', // 声明地图类型

map: 'china', // 指定地图名称（需与引入的地图数据匹配）

label: { show: true } // 显示省份名称

}

]

};

3. 渲染地图

TypeScript

取消自动换行复制

chart.setOption(option);

效果：显示带有省份名称的中国地图，鼠标悬停显示省份名称。

三、数据可视化：让地图 “动” 起来

1. 添加数据系列

假设我们有各省份的数值数据（如人口、GDP），格式为 [{name: '省份', value: 数值}]：

TypeScript

取消自动换行复制

const data = [

{name: '北京', value: 2189},

{name: '上海', value: 2487},

{name: '广东', value: 12684},

{name: '四川', value: 8367},

// 其他省份数据...

];

2. 更新配置项

在 series 中添加数据，并通过 visualMap 配置颜色映射：

TypeScript

取消自动换行复制

const option = {

// 其他配置...

series: [

{

type: 'map',

map: 'china',

data: data, // 绑定数据

itemStyle: { // 地图样式

normal: { areaColor: '#e6f3ff' }, // 正常状态颜色

emphasis: { areaColor: '#99ccff' } // 鼠标hover时颜色

}

visualMap: { // 颜色渐变条

min: 0, // 数据最小值

max: 15000, // 数据最大值

range: ['#b3e0ff', '#409eff', '#0059b3'], // 颜色范围

orient: 'horizontal', // 水平方向

bottom: 10 // 位置在底部

}

};

效果：地图根据数据显示不同颜色，颜色越深数值越高，底部显示颜色对应关系。

四、交互优化：提升用户体验

1. 自定义提示框（Tooltip）

让提示框显示更详细的信息（如 “省份名称：数值”）：

TypeScript

取消自动换行复制

option.tooltip = {

formatter: function(params) { // params 包含当前点击/悬停的省份数据

return `${params.name}：${params.value} 万`;

}

};

2. 添加点击事件

实现点击省份时弹出提示：

TypeScript

取消自动换行复制

chart.on('click', function(params) {

alert(`${params.name} 的数值是：${params.value}`);

});

五、实战案例：疫情数据可视化

完整代码示例

TypeScript

取消自动换行复制

// 初始化图表

const chart = echarts.init(document.getElementById('mapChart'));

// 模拟疫情数据（确诊人数）

const covidData = [

{name: '湖北', value: 6812}, {name: '广东', value: 2305},

{name: '河南', value: 1273}, {name: '浙江', value: 1244},

// 其他省份数据...

];

// 配置项

const option = {

title: { text: '全国疫情确诊人数分布', left: 'center' },

tooltip: { formatter: '{b}：{c} 例' }, // {b}省份名，{c}数值

series: [{

type: 'map',

map: 'china',

data: covidData,

itemStyle: { emphasis: { label: { show: true } } } // 点击时显示名称

}],

visualMap: {

max: 8000,

range: ['#ffcccc', '#ff9999', '#ff6666'] // 红色系渐变

}

};

// 渲染

chart.setOption(option);

效果：点击省份显示确诊数，颜色越红表示数值越高，底部颜色条直观展示数据范围。

六、常见问题与解决方案

问题	解决方案
地图不显示	检查地图数据是否正确引入（如china.js），地图名称（map: 'china'）是否匹配
数据不生效	确保数据格式为[{name: '省份', value: 数值}]，且省份名称与地图内置名称一致（如 “宁夏” 而非 “宁夏回族自治区”）
颜色不渐变	检查visualMap的min/max是否覆盖数据范围，颜色数组长度至少为 2

总结

ECharts 地图开发只需掌握三个核心步骤：

引入地图数据 → 2. 配置基础选项 → 3. 绑定数据与样式通过简单的代码组合，就能实现专业的数据可视化效果。建议初学者从官方地图示例入手，逐步尝试自定义样式和交互逻辑。

如果需要进阶学习（如区县地图、3D 地图、动态数据更新），可以在 ECharts 官网查阅更详细的地图配置文档，或留言告诉我你的需求，后续会推出更多实战教程！

ECharts 地图开发入门

一、准备工作：环境搭建与数据准备 1. 引入 ECharts 库 TypeScript 取消自动换行复制  <script src"https://cdn.jsdelivr.net/npm/echarts5.4.0/dist/echarts.min.js"></script> <!-…...

编程日记 2025/9/21 17:19:06

机器学习基础 - 回归模型之线性回归

机器学习：线性回归文章目录机器学习：线性回归1. 线性回归1. 简介2. 线性回归如何训练？1. 损失函数2. 正规方程3. 梯度下降法4. 两种方法的比较2. 岭回归岭回归与线性回归3. Lasso 回归4. ElasticNet 回归LWR - 局部加权回归QA1. 最小二乘法估计2. 最小二乘法的几何解释3…...

编程日记 2025/9/21 17:11:00

《解锁LLMs from scratch：开启大语言模型的探索之旅》

《解锁LLMs from scratch：开启大语言模型的探索之旅》 GitHub - datawhalechina/llms-from-scratch-cn: 仅需Python基础，从0构建大语言模型；从0逐步构建GLM4\Llama3\RWKV6，深入理解大模型原理项目首页 - LLMs-from-scratch:从零开始逐步指导开发者构建自己的大型语言模型…...

编程日记 2025/9/21 17:16:44

嵌入式 C 语言面试核心知识点全面解析：基础语法、运算符与实战技巧

在嵌入式面试中，C 语言基础是重中之重。本文针对经典面试题进行详细解析，帮助新手系统掌握知识点，提升面试应对能力。一、数据结构逻辑分类题目在数据结构中，从逻辑上可以把数据结构分为（ ）。 A、动态…...

编程日记 2025/9/6 9:34:50

pyqt中以鼠标所在位置为锚点缩放图片

在编写涉及到图片缩放的pyqt程序时，如果以鼠标为锚点缩放图片，图片上处于鼠标所在位置的点（通常也是用户关注的图片上的点）不会移动，更不会消失在图片显示区域之外，可以提高用户体验，是一个值得…...

编程日记 2025/9/21 17:16:46

登高架设作业证考试的实操项目有哪些？

登高架设作业证考试的实操项目分为 4 个科目，包括安全防护用品使用、作业现场安全隐患排除、安全操作技术、作业现场应急处置，具体内容如下： 科目一：安全防护用品使用（K1） 考试项目：安全帽、安全…...

编程日记 2025/9/21 17:13:06

闻性与空性：从耳根圆通到究竟解脱的禅修路径

一、闻性之不动：超越动静的觉性本质在《楞严经》中，佛陀以钟声为喻揭示闻性的奥秘：钟声起时，闻性显现；钟声歇时，闻性不灭。此“不动”并非如磐石般凝固，而是指觉性本身超越生灭、来去的绝对性…...

编程日记 2025/9/21 17:14:46

404了怎么办快把路由给我断掉（React配置路由）

路由基础概念什么是前端路由？ 核心作用：管理单页面应用的页面切换主要功能： 根据URL显示对应组件保持浏览器历史记录实现页面间导航不刷新 React Router 包含三个主要包： react-router：核心逻辑react-router-d…...

编程日记 2025/9/21 17:19:04

React 类组件 vs Hooks 写法对比分类类组件（Class Components）函数组件 Hooks组件定义class Component extends React.Componentconst Component () > {}状态管理this.state this.setState()useState()生命周期componentDidMount, componentDidU…...

编程日记 2025/9/20 11:13:31

Tailwind CSS实战：快速构建定制化UI的新思路

引言在当今快节奏的前端开发环境中，开发者不断寻找能够提高效率并保持灵活性的工具。Tailwind CSS作为一个功能型优先的CSS框架，正在改变开发者构建用户界面的方式。与Bootstrap和Material UI等传统组件库不同，Tailwind不提供预设组件&…...

编程日记 2025/9/21 2:11:48

告别手动映射：在 Spring Boot 3 中优雅集成 MapStruct

在日常的后端开发中，我们经常需要在不同的对象之间进行数据转换，例如将数据库实体（Entity）转换为数据传输对象（DTO）发送给前端，或者将接收到的 DTO 转换为实体进行业务处理或持久化。手动进行这…...

编程日记 2025/9/21 17:13:07

JavaScript学习教程，从入门到精通，Ajax数据交换格式与跨域处理（26）

Ajax数据交换格式与跨域处理一、Ajax数据交换格式 1. XML (eXtensible Markup Language) XML是一种标记语言，类似于HTML但更加灵活，允许用户自定义标签。特点： 可扩展性强结构清晰数据与表现分离文件体积相对较大示例代码&#xff1…...

编程日记 2025/9/17 10:46:26

抖音IP属地跟无线网有关系吗？一文解析

在抖音等社交平台上，IP属地显示功能让许多用户感到好奇——为什么自己的位置信息有时准确，有时却显示在其他城市？这时，用户会疑惑：抖音IP属地跟无线网有关系吗？本文将详细解析‌IP属地‌和‌无线网‌的概念…...

编程日记 2025/9/8 0:30:39

RDK X3新玩法:超沉浸下棋机器人开发日记

一、项目介绍产品中文名：超沉浸式智能移动下棋机器人产品英文名：Hackathon-TTT 产品概念：本项目研发的下棋机器人，是一款能自主移动、具备语音交互并能和玩家在真实的棋盘上进行“人机博弈”的移动下棋平台，能够带给…...

编程日记 2025/9/20 22:46:58

Trae 实测：AI 助力前端开发，替代工具还远吗？

Trae 实测：AI 助力前端开发，替代工具还远吗？ 字节上线了一款 AI 新产品，名叫 Trae 。这是一款 IDE 工具，中文意思是「集成开发环境」，做技术的读者对此应该很熟悉。简单理解，就是程序员用来写代…...

编程日记 2025/9/18 23:06:41

SpringCloud基于Eureka和Feign实现一个微服务系统

Spring Cloud 是基于 Spring Boot 的 ‌微服务开发全栈解决方案‌，通过集成多种开源组件，提供分布式系统构建所需的服务治理、配置管理、容错机制‌等核心能力，简化微服务架构的复杂性。其核心目标是实现服务间的高效协同与弹性伸缩，支撑企业级云原生应用开发。Spring Clou…...

编程日记 2025/9/19 16:33:28

nacos设置权重进行负载均衡不生效

nacos设置权重进行负载均衡不生效，必须在启动类下加上这个bean Beanpublic IRule nacosRule(){return new NacosRule();}如下图所示...

编程日记 2025/8/27 2:02:41

Flowable7.x学习笔记（十四）查看部署流程Bpmn2.0-xml

前言 Flowable 在其前端 Modeler 中，采用 BPMN 2.0 标准将流程中的任务、网关、事件等元素以 XML 形式存储，并附带图形互换（Diagram Interchange，DI）数据，以保证在前端与后端都能精准重建可视化流程图。生…...

编程日记 2025/9/18 13:09:20

大模型应用中Agent2Agent(A2A)的应用场景，以及A2A与MCP的区别和适用场景

大家好，我是微学AI，今天给大家介绍一下大模型应用中Agent2Agent（A2A）的应用场景，以及A2A与MCP的区别和适用场景。文章目录一、引言二、Agent2Agent（A2A）协议原理2.1 核心架构2.2 基础框架与依…...

编程日记 2025/9/8 10:17:35

Windows server:

企鹅裙：429603659 域搭建 (细节上的问题) 1.将IP地址修改为静态IP，搭建完后设置DNS为本身(在搭建完域服务器后设置DNS) 2.配置之前需将计算机名更改为后面题目中所要求的. 3．一些版本之中比如Windows Server2012之中搭建域之后重启会显示…...

编程日记 2025/9/19 19:32:43

Python 3.14：探索新版本的魅力与革新

在Python编程语言的不断演进中，Python 3.14作为又一重要里程碑，承载着开发者们的期待与热情，悄然走进了我们的视野。尽管在撰写本文时，Python 3.14可能尚未正式成为主流版本（注：实际发布情况需根据最新信息…...

编程日记 2025/9/18 11:28:57

LabVIEW基于VI Server的控件引用操作

本 VI 通过展示控件引用（Control References）的使用，借助 VI Server 实现对前面板对象的编程操作。详细说明隐式属性节点（Implicitly Linked Property Node）：通过右键单击控件（或其控件终…...

编程日记 2025/9/12 22:25:02

【不同名字的yolo的yaml文件名是什么意思】

以下是这些 YOLO 系列配置文件的详细解析，按版本和功能分类说明： 一、YOLOv3 系列文件名核心特性适用场景yolov3.yaml原始 YOLOv3 结构，3 尺度预测（13x13,26x26,52x52）通用目标检测yolov3-spp.yaml增加 SPP&#xff…...

编程日记 2025/9/18 18:31:03

《100天精通Python——基础篇 2025 第3天：变量与数据类型全面解析，掌握Python核心语法》

目录一、Python变量的定义和使用二、Python整数类型（int）详解三、Python小数/浮点数（float）类型详解四、Python复数类型(complex)详解---了解五、Python字符串详解(包含长字符串和原始字符串)5.1 处理字符串中的引号5.2 字符串的…...

编程日记 2025/9/19 20:26:54

精益数据分析（24/126）：聚焦第一关键指标，驱动创业成功

精益数据分析（24/126）：聚焦第一关键指标，驱动创业成功在创业和数据分析的探索之旅中，我们都在不断寻找能够助力成功的关键因素。今天，我依旧带着与大家共同进步的初心，深入解读《精益数据分析…...

编程日记 2025/9/19 11:57:20

【刷题Day26】Linux命令、分段分页和中断（浅）

说下你常用的 Linux 命令？ 文件与目录操作： ls：列出当前目录的文件和子目录，常用参数如-l（详细信息）、-a（包括隐藏文件）cd：切换目录，用于在文件系统中导航m…...

编程日记 2025/9/20 20:40:45

互联网实验室的质量管控痛点质检LIMS系统在互联网企业的应用

在互联网行业流量红利消退与用户体验至上的时代背景下，产品迭代速度与质量稳定性成为企业核心竞争力的分水岭。传统测试实验室依赖人工操作、碎片化工具与线下沟通的管理模式，已难以应对敏捷开发、多端适配、数据安全等复合型挑战。一、互联网实验室的…...

编程日记 2025/9/19 7:35:38

VScode远程连接服务器（免密登录）

一、本机生成密钥对本地终端输入ssh-keygen，生成公钥（id_rsa.pub）和私钥（id_rsa） 二、在远程服务器根目录的.ssh文件夹的authorized_keys中输入id_rsa的内容三、修改vscode的config文件.ssh/config，加…...

编程日记 2025/9/21 7:23:19

【Go语言】RPC 使用指南（初学者版）

RPC（Remote Procedure Call，远程过程调用）是一种计算机通信协议，允许程序调用另一台计算机上的子程序，就像调用本地程序一样。Go 语言内置了 RPC 支持，下面我会详细介绍如何使用。一、基本概念在 Go 中&…...

编程日记 2025/9/19 23:35:44

安卓四大组件之ContentProvider

目录实现步骤代码分析 onCreate insert query ContextHolder Cursor 作用与用法基本步骤： 可能的面试题：为什么使用Cursor？ 为什么使用Cursor 使用Cursor的好处静态内部类实现单例模式 AnndroidManifest.xml配置信息注释的…...

编程日记 2025/9/16 5:55:24

C#中实现XML解析器

XML（可扩展标记语言）是一种广泛用于存储和传输数据的格式，因其具有良好的可读性和可扩展性，在许多领域都有应用。实现思路： 词法分析词法分析的目的是将输入的 XML 字符串分解为一个个的词法单元，例如…...

编程日记 2025/9/19 12:37:52

神经符号混合与跨模态对齐：Manus AI如何重构多语言手写识别的技术边界

在全球化数字浪潮下，手写识别技术长期面临"巴别塔困境"——人类书写系统的多样性（从中文象形文字到阿拉伯语连写体）与个体书写风格的随机性，构成了人工智能难以逾越的双重壁垒。传统OCR技术在处理多语言手写场景时，准确率往往不足70%，特别是在医疗处方、古代文…...

编程日记 2025/9/12 0:25:19

TestBrain开源程序是一款集使用AI(如deepseek)大模型自动生成测试用例、和测试用例评审、RAG知识库管理的web平台系统

一、软件介绍文末提供程序和源码下载 TestBrain开源程序是一款集使用AI(如deepseek)大模型自动生成测试用例、和测试用例评审、RAG知识库管理的web平台系统一个基于LLM的智能测试用例生成平台(功能慢慢丰富中，未来可能将测试相关的所有活动集成到一起)&#xff0c…...

编程日记 2025/8/23 10:27:00

软件工程效率优化：一个分层解耦与熵减驱动的系统框架

软件工程效率优化：一个分层解耦与熵减驱动的系统框架** 摘要 (Abstract) 本报告构建了一个全面、深入、分层的软件工程效率优化框架，旨在超越简单的技术罗列，从根本的价值驱动和熵减原理出发，系统性地探讨提升效率的策略与实践。…...

编程日记 2025/9/20 15:14:07

【金仓数据库征文】- 深耕国产数据库优化，筑牢用户体验新高度

目录引言一、性能优化：突破数据处理极限，提升运行效率 1.1 智能查询优化器：精准优化数据检索路径 1.2 并行处理技术：充分释放多核计算潜力 1.3 智能缓存机制：加速数据访问速度二、稳定性提升：筑牢…...

编程日记 2025/9/17 11:19:20

前端面试常见部分问题，及高阶部分问题

面试中也极有可能让你徒手写代码，无聊的面试问题o(￣︶￣)o 一、HTML/CSS 基础与进阶常见问题什么是语义化标签？有哪些常用语义化标签？答案：语义化标签是指具有明确含义的 HTML 标签，如 <header>、<footer>、<article>、<section> 等。它们有…...

编程日记 2025/9/5 13:41:03

使用 AutoGen 与 Elasticsearch

作者：来自 Elastic Jeffrey Rengifo 学习如何使用 AutoGen 为你的 agent 创建一个 Elasticsearch 工具。 Elasticsearch 拥有与行业领先的生成式 AI 工具和提供商的原生集成。查看我们的网络研讨会，了解如何超越 RAG 基础，或使用 Elastic 向量…...

编程日记 2025/9/19 17:29:12

kafka与flume的整合、spark-streaming

kafka与flume的整合前期配置完毕，开启集群需求1： 利用flume监控某目录中新生成的文件，将监控到的变更数据发送给kafka，kafka将收到的数据打印到控制台（三个node01中运行） 1.在kafka中建立topic kafka…...

编程日记 2025/9/17 17:20:36

高级电影感户外街拍人像摄影后期Lr调色教程，手机滤镜PS+Lightroom预设下载！

调色介绍高级电影感户外街拍人像摄影后期 Lr 调色，是运用 Adobe Lightroom 软件，对户外街拍的人像照片进行后期处理，以塑造出具有电影质感的独特视觉效果。此调色过程借助 Lr 丰富的工具与功能，从色彩、光影、对比度等多维度着手…...

编程日记 2025/9/8 16:28:30

react 常用钩子 hooks 总结

文章目录 React钩子概念图状态管理钩子 state management副作用钩子 effect hooks引用钩子 Ref hooks上下文钩子其他钩子过渡钩子处理过渡效果性能优化钩子 performance hooksReact 19 新钩子 React钩子概念图状态管理钩子 state management useState useReducer useSyncEx…...

编程日记 2025/9/10 6:16:34

2025 年导游证报考条件新政策解读与应对策略

2025 年导游证报考政策有了不少新变化，这些变化会对报考者产生哪些影响？我们又该如何应对？下面就为大家详细解读新政策，并提供实用的应对策略。最引人注目的变化当属中职旅游类专业学生的报考政策。以往，中专学历报考…...

编程日记 2025/9/17 21:02:08

重置 Git 项目并清除提交历史

在某些情况下，你可能需要完全重置一个 Git 项目，清除所有提交历史，然后将当前代码作为全新的初始提交。本文将详细介绍这个过程的操作步骤和注意事项。重要警告 ⚠️ 注意：以下操作将永久删除项目的所有提交历史、分支和标签。…...

编程日记 2025/9/16 5:55:26

GitHub Copilot (Gen-AI) 很有用，但不是很好

摘要：以下是我在过去三个月中在实际、开发中使用 GitHub Copilot Pro 后的想法。由于技术发展迅速，值得注意的是，这些印象是基于我截至 2025 年 3 月的经验。 1 免费试用促使我订阅 GitHub Copilot Pro 我以前读过有关 AI 代码生成器的文…...

编程日记 2025/9/17 13:12:55

K8S Service 原理、案例

一、理论介绍 1.1、3W 法则 1、是什么？ Service 是一种为一组功能相同的 pod 提供单一不变的接入点的资源。当 Service 存在时，它的IP地址和端口不会改变。客户端通过IP地址和端口号与 Service 建立连接，这些连接会被路由到提供该 Service 的…...

编程日记 2025/9/18 2:41:27

Base64编码原理：二进制数据与文本的转换技术

🔄 Base64编码原理：二进制数据与文本的转换技术开发者的数据编码困境作为开发者，你是否曾遇到这些与Base64相关的挑战： 📊 需要在JSON中传输二进制数据，但不确定如何正确编码🖼️ 想要在HT…...

编程日记 2025/9/19 15:59:27

系统设计(1)—前端—CDN—Nginx—服务集群

简介： 本指南旨涵盖前端、CDN、Nginx 负载均衡、服务集群、Redis 缓存、消息队列、数据库设计、熔断限流降级以及系统优化等模块的核心要点。我们将介绍各模块常见的设计方案与优化策略，并结合电商秒杀、SaaS CRM 系统、支付系统等高并发场景讨论实践技巧…...

编程日记 2025/9/19 13:31:22

Easysearch 基础运维扫盲指南：从 HTTP 到 HTTPS、认证与安全访问全解析

Easysearch 基础运维扫盲指南：从 HTTP 到 HTTPS、认证与安全访问全解析众所周知，原生 Elasticsearch 默认开启的是 HTTP 明文接口，并且不开启任何身份认证或传输加密。若想启用 TLS/SSL 加密及账号密码验证，通常需要配置繁琐的安…...

编程日记 2025/9/20 6:57:31

在Android中如何使用Protobuf上传协议

在 Android 中使用 Protobuf（Protocol Buffers）主要分为以下几个步骤： ✅ 1. 添加 Protobuf 插件和依赖在项目的 build.gradle（Project 级）文件中添加 Google 的 Maven 仓库（通常默认已有）&am…...

编程日记 2025/9/16 2:51:47

【数据可视化艺术·应用篇】三维管线分析如何重构城市“生命线“管理？

在智慧城市、能源管理、工业4.0等领域的快速发展中，地下管线、工业管道、电力通信网络等“城市血管”的复杂性呈指数级增长。传统二维管理模式已难以应对跨层级、多维度、动态变化的管线管理需求。三维管线分析技术应运而生，成为破解这一难题的核心工具。…...

编程日记 2025/9/19 1:53:24

2025年的营销趋势-矩阵IP

从 2025 年的营销生态来看，创始人 IP 与智能矩阵的结合确实呈现出颠覆性趋势，这一现象背后隐藏着三个值得深度解析的商业逻辑： 一、创始人 IP 的本质是 "信任货币" 的数字化迁徙当新能源汽车市场陷入参数混战，雷军将个…...

编程日记 2025/9/18 14:31:33

相关文章：