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

echart实现地图数据可视化

news 2026/3/19 8:48:54

文章目录

@[TOC](文章目录)

前言
一、基本地图展示
2.数据可视化

总结

前言

最近工作安排使用echarts来制作图形报表，记录一下我的步骤，需求呈现一个地图，地图显示标签，根据业务指标值给地图不同省市填充不同颜色，鼠标放上提示更多内容。

一、基本地图展示

ECharts 可以使用 GeoJSON 格式的数据作为地图的轮廓，可以获取第三方的 GeoJSON 数据注册到 ECharts 中：
https://echarts.apache.org/zh/index.html
https://github.com/echarts-maps/echarts-china-cities-js/tree/master/js/shape-with-internal-borders
https://datav.aliyun.com/portal/school/atlas/area_selector
ECharts绘制地图步骤
1.拿到GeoJSON数据
2.注册对应的地图的GeoJSON数据（调用setOption前注册）
3.配置geo选项。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="main" style="height: 400px"></div><script src="../libs/echarts-5.3.3.js"></script><!-- 1.导入了一个中国的 geo jsonwindow.china_geojson = {}--><script src="./geojson/china_geojson.js"></script><script>window.onload = function() {// 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )echarts.registerMap('中国', { geoJSON: china_geojson })let myChart = echarts.init(document.getElementById('main'));let option = {// 3.在 echarts 中展示中国地图geo: {map: '中国'},};myChart.setOption(option);}</script></body></html>

在这里插入图片描述

2.数据可视化

给地图添加数据，并可视化展示
添加一个map series
配置地图样式
添加地图所需的数据
添加 visualMap 视觉映射

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style></style></head><body><div id="main" style="height: 600px"></div><script src="../libs/echarts-5.3.3.js"></script><script src="./geojson/china_geojson.js"></script><script>// 注册地图echarts.registerMap("中国", { geoJSON: china_geojson });// 1.基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById("main"), null, {renderer: "svg",});var data = [{ name: "北京", value: 199 },{ name: "天津", value: 42 },{ name: "河北", value: 102 },{ name: "山西", value: 81 },{ name: "内蒙古", value: 47 },{ name: "辽宁", value: 67 },{ name: "吉林", value: 82 },{ name: "黑龙江", value: 123 },{ name: "上海", value: 24 },{ name: "江苏", value: 92 },{ name: "浙江", value: 114 },{ name: "安徽", value: 109 },{ name: "福建", value: 116 },{ name: "江西", value: 91 },{ name: "山东", value: 119 },{ name: "河南", value: 137 },{ name: "湖北", value: 116 },{ name: "湖南", value: 114 },{ name: "重庆", value: 91 },{ name: "四川", value: 125 },{ name: "贵州", value: 62 },{ name: "云南", value: 83 },{ name: "西藏", value: 9 },{ name: "陕西", value: 80 },{ name: "甘肃", value: 56 },{ name: "青海", value: 10 },{ name: "宁夏", value: 18 },{ name: "新疆", value: 180 },{ name: "广东", value: 123 },{ name: "广西", value: 59 },{ name: "海南", value: 14 },];// 2.指定图表的配置项和数据var option = {tooltip: {},grid: {},// 1.视觉数据映射visualMap: [{// type: "continuous", // 连续型视觉映射组件 (默认)// type: "piecewise", // 分段型视觉映射组件left: "20%",seriesIndex: [0], // 指定取哪个系列的数据// 定义 在选中范围中 的视觉元素, 对象类型。inRange: {color: ["#04387b", "#467bc0"], // 映射组件和地图的颜色(一般和地图色相近)},},],series: [{name: "中国地图",type: "map",map: "中国",data,// data: [//   { name: "广东", value: 123 },//   { name: "广西", value: 59 },//   { name: "海南", value: 14 },//   // ....//   // ...// ],itemStyle: {areaColor: "#023677",borderColor: "#1180c7",},emphasis: {itemStyle: { areaColor: "#4499d0" },label: { color: "white" },},select: {label: { color: "white" },itemStyle: { areaColor: "#4499d0" },},},],};myChart.setOption(option);</script></body></html>

在这里插入图片描述

总结

以上就是echarts地图的简单运用，更多功能配置参考官方文档/

echart实现地图数据可视化

文章目录 [TOC](文章目录) 前言一、基本地图展示2.数据可视化总结前言最近工作安排使用echarts来制作图形报表，记录一下我的步骤，需求呈现一个地图，地图显示标签，根据业务指标值给地图不同省市填充不同颜色，鼠标放…...

编程日记 2024/10/31 20:10:38

网关三问：为什么微服务需要网关？什么是微服务网关？网关怎么选型？

文章整体介绍本文旨在解答关于微服务网关的三个核心问题： 1）为什么需要网关？也即在何种场景下应采用微服务网关以优化系统架构； 2）什么是微服务网关？主要讲构成微服务网关的关键能力，包括但…...

编程日记 2024/10/31 20:09:37

Mybatis-plus解决兼容oracle批量插入

本博客借鉴网上很多大佬的答案，东拼西凑，最终在项目中完成批量插入，仅供参考~~~ 1. 自定义SQL注入器新建一个名为EasySqlInjector的类，继承DefaultSqlInjector。 public class EasySqlInjector extends DefaultSqlInjector {O…...

编程日记 2024/10/31 20:08:36

Kaggle竞赛——灾难推文分类（Disaster Tweets）

目录 1. 准备工作2. 资源导入3. 数据处理4. 绘制词云图5. 数据可视化5.1 词数和字符数可视化5.2 元特征可视化5.3 类别可视化 6. 词元分析6.1 一元语法统计6.2 多元语法统计 7. 命名实体识别8. 推文主题提取9. 构建模型9.1 数据划分与封装9.2 模型训练与验证 10. 模型评估11. 测…...

编程日记 2024/10/31 20:07:35

SC2601音频编解码器可pin to pin兼容ES8311

SC2601 是一款低功耗单声道音频编解码器，具有全差分输出，支持在全差分配置下可编程模拟输入。可pin to pin兼容ES8311。录音路径包含一个全差分输入，低噪声可编程增益放大器和自动增益控制（ALC）。在录音过程中,通过内…...

编程日记 2024/10/31 20:06:34

通用AT指令

1、查询SIM卡状态 ATCPIN?2、查询信号强度 ATCSQ //99,99 表示无信号3、查询IMEI ATCGSN4、查询4G/5G模式 ATCOPS? //7表示在4G模式，13表示在5G模式5、设置接入点 ATCGDCONT1,"IP","uninet" //联通 ATCGDCONT1,"IP","…...

编程日记 2024/10/31 20:05:33

二进制狼群算法

本文所涉及所有资源均在传知代码平台可获取。目录一、背景及意义介绍背景意义...

编程日记 2024/10/31 20:04:32

STL——list的介绍和使用

前言本篇博客我们继续来介绍STL的内容，这次我们要介绍的是list这个容器，可以简单地理解为顺序表，当然和我们之前学过顺序表还是有区别的，具体内容大家可以继续往下阅读，下面进入正文。 1. list简介 1.list是一种可…...

编程日记 2024/10/31 19:59:28

二百七十六、ClickHouse——Hive和ClickHouse非常不同的DWS指标数据SQL语句

一、目的在完成数据之后对业务指标进行分析，Hive和ClickHouseSQL真不一样二、部分业务指标表 2.1 统计数据流量表1天周期 2.1.1 Hive中原有代码 2.1.1.1 Hive中建表语句 --1、统计数据流量表——动态分区——1天周期 create table if not exists hurys_d…...

编程日记 2024/10/31 19:58:26

Elasticsearch Date类型，时间存储相关说明

本文介绍了在SpringBoot中处理Elasticsearch中日期时间格式的问题。当时间输出为UTC格式并存在时区差异时，可通过设置字段格式如yyyy-MM-dd HH:mm:ss并指定时区为GMT8来解决。存储Date类型数据时，可以使用JSON库如json-lib, fastjson, Jackson或gson进行…...

编程日记 2024/10/31 19:57:25

mathorcup2024台风我all in ai

三个问题，力大砖飞。不建物理模型，直接all in好吧第一个故意无监督第二个LSTMCNN注意力，刚好时间空间第三个在第二个上加了个transfomer ，然后LSTM变双向，增加层数（基线模型选的经验公式，少…...

编程日记 2024/10/31 19:55:22

android 10 后台启动activity

摘要：Android 10（API 级别 29）及更高版本会限制应用何时可以启动 activity 背景。这些限制有助于最大限度地减少对用户的干扰， 让用户能够更好地控制其屏幕上显示的内容。本文以此为出发点，基于展锐平台对系统代码进行…...

编程日记 2024/10/31 19:53:19

文案创作新思路：Python与文心一言API的完美结合

在这个信息爆炸的时代，内容创作似乎成了一项需要魔法才能完成的任务。不过，别担心！今天，我们将向你介绍一种新的“魔法”工具——百度文心一言 API。这款大语言模型不仅能与人对话互动，还能高效便捷地协助你获取创意灵…...

编程日记 2024/10/31 19:52:17

CentOS 7 上安装 MySQL 8.0 教程

🌟 你好欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍 &#x…...

编程日记 2024/10/31 19:51:12

Chromium HTML5 新的 Input 类型url对应c++

一、Input 类型: url url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>test</title> </head> <body&g…...

编程日记 2024/10/31 19:50:11

java多线程编程(二)一一＞线程安全问题, 单例模式, 解决程线程安全问题的措施

引言： 如果多线程环境下代码运行的结果是符合我们预期的，即在单线程环境应该的结果，则说这个程序是线程安全的线程安全问题的原因： 一.操作系统的随机调度 ： 二.多个线程修改同一个变量： 三.修改操作不是…...

编程日记 2024/10/31 19:49:10

Leetcode 213. 打家劫舍 II 动态规划

原题链接：Leetcode 213. 打家劫舍 II class Solution { public:int rob(vector<int>& nums) {int n nums.size();if (n 1)return nums[0];if (n 2)return max(nums[0], nums[1]);// 如果偷了第一家，就不能偷最后一家int dp[n - 1];dp[0] …...

编程日记 2024/10/31 19:48:09

就业市场变革：AI时代，我们将如何评估人才？

内容概要在这个充满变革的时代，就业市场正被人工智能（AI）技术深刻改变。随着技术的进步，传统的人才评估方式逐渐显示出其局限性。例如，过去依赖于纸质简历和面试评估的方式在快速变化的环境中难以准确识别真实的人才…...

编程日记 2024/10/31 19:47:07

富格林：安全操作方式稳健出金

富格林认为，黄金一直是吸引投资者关注的投资产品之一，投资者不断踏入黄金投资交易市场。很多投资者都以为现货黄金投资是很容易实现出金获得丰厚利润，但是面对复杂的交易市场，不仅不能轻易实现安全获利出金，甚至可能还…...

编程日记 2024/10/31 19:45:04

早点包子店点餐的软件下载和点餐操作教程佳易王餐饮点餐管理系统操作方法

一、概述【软件试用版资源文件可以点文章最后卡片了解】早点包子店点餐的软件下载和点餐操作教程适合于早点早餐餐饮行业的软件，实现早点点餐，收银会员管理，库存统计，销售统计等一体化操作。点餐的时候可以用手触摸点&…...

编程日记 2024/10/31 19:43:02

终极指南：5个Recharts性能预算策略，让你的图表渲染速度提升300%

终极指南：5个Recharts性能预算策略，让你的图表渲染速度提升300% 【免费下载链接】recharts Redefined chart library built with React and D3 项目地址: https://gitcode.com/GitHub_Trending/re/recharts Recharts是一个基于React和D3构建的重定…...

编程新知 2026/3/19 6:35:45

企业级CRM客户关系管理软件｜ThinkPHP+FastAdmin开发｜含源码+UniApp小程序/H5双端

温馨提示：文末有联系方式什么是企业级CRM客户关系管理系统这是一款面向现代团队的智能客户关系管理（CRM）软件，采用成熟稳定的ThinkPHP框架与FastAdmin后台快速开发平台构建，兼顾高性能与易维护性，助力企业…...

编程新知 2026/3/19 5:39:35

智能家居灯光控制方案：基于STM32F103的WS2812驱动优化技巧（支持HomeAssistant）

智能家居灯光控制方案：基于STM32F103的WS2812驱动优化技巧（支持HomeAssistant） 在智能家居领域，灯光控制系统的响应速度和稳定性直接影响用户体验。传统方案常面临延迟高、色彩过渡不自然等问题，而基于STM32F103微控制…...

编程新知 2026/3/19 5:05:26

学嵌入式的谁没迷茫过？

上来就想啃 Linux 驱动，结果连个 LED 都点不亮（即便是点亮了，也是不知道里面的门道，就好比拿了驾照会开车就是不知道发动机的原理）如果学习按顺序来，别跳关，不然分分钟给你干自闭。先从最基础的…...

编程新知 2026/3/19 4:57:24

从一次线上告警复盘：BigDecimal.toPlainString()在日志脱敏与监控中的正确姿势

从一次线上告警复盘：BigDecimal.toPlainString()在日志脱敏与监控中的正确姿势那天凌晨3点，我被一阵急促的告警电话惊醒。监控系统显示支付成功率骤降30%，但奇怪的是——所有核心链路指标都显示正常。这个看似矛盾的信号，最终将我…...

编程新知 2026/3/19 4:41:21

实测速腾16线雷达在自动驾驶小车上的表现：150米测距精度对比与点云优化技巧

速腾RS-LiDAR-16激光雷达在自动驾驶小车上的实战评测：150米测距精度与点云优化全解析当我在实验室第一次将速腾RS-LiDAR-16安装到自动驾驶小车上时，那密集的点云数据立刻让我意识到——这绝不是普通的传感器。作为一款面向高端机器人应用的16线激光雷达…...

编程新知 2026/3/19 3:44:52

数字IC设计必看：CMOS与TTL电路选择的5个实战避坑点

数字IC设计必看：CMOS与TTL电路选择的5个实战避坑点在28nm以下工艺节点成为主流的今天，数字IC工程师面临着一个经典却日益复杂的抉择：该用CMOS还是TTL？这个看似基础的问题，在实际项目中却可能引发连锁反应——从功耗预…...

编程新知 2026/3/19 3:20:36

MacOS新手必看：用Homebrew安装Redis并设置密码的完整指南

MacOS新手必看：用Homebrew安装Redis并设置密码的完整指南 Redis作为高性能的键值存储系统，已经成为现代开发栈中不可或缺的组件。对于MacOS用户而言，Homebrew提供了最便捷的软件管理方式，让Redis的安装和配置变得异常简单。本文将…...

编程新知 2026/3/19 3:20:36

Chord - Ink Shadow 硬件指南：STM32嵌入式设备上的轻量化AI推理探索

Chord - Ink & Shadow 硬件指南：STM32嵌入式设备上的轻量化AI推理探索最近和几个做硬件的朋友聊天，他们都在琢磨一件事：现在的大模型动不动就几百亿参数，跑起来得用上好几张显卡，能不能把它们“塞”进一个小小的…...

编程新知 2026/3/19 2:48:14

【Dify多智能体协同避坑红宝书】：20年架构师亲历的5大致命陷阱与实时修复方案

第一章：Dify多智能体协同避坑指南的底层逻辑与认知框架Dify 的多智能体（Multi-Agent）协同能力并非简单地将多个 LLM 节点串联，而是基于**任务分解—角色绑定—状态感知—反馈闭环**四维耦合的认知框架构建。其底层依赖于 Dify Run…...

编程新知 2026/3/19 1:31:37

文章目录 @[TOC](文章目录) 前言一、基本地图展示2.数据可视化 总结

文章目录

前言

一、基本地图展示

2.数据可视化

总结

相关文章：

文章目录

@[TOC](文章目录)

前言
一、基本地图展示
2.数据可视化

总结