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

echart实现地图数据可视化

news 2025/10/16 23:04:53

文章目录

@[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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽，大家好，我是左手python！ Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库，用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/9/14 23:47:44

汽车生产虚拟实训中的技能提升与生产优化

在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...

编程新知 2025/10/16 1:32:29

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章参考资料源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/9/29 6:39:51

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/9/9 23:27:37

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。另一种思路：将增量判…...

编程新知 2025/9/29 3:19:36

docker 部署发现spring.profiles.active 问题

报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit（传感器服务）# 前言在运动类应用中，运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据，如配速、距离、卡路里消耗等，用户可以更清晰…...

编程新知 2025/10/10 12:31:15

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

文章目录

前言

一、基本地图展示

2.数据可视化

总结

相关文章：

文章目录

@[TOC](文章目录)

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

总结