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

echart实现地图数据可视化

news 2026/2/1 17:54:48

文章目录

    • @[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来制作图形报表&#xff0c;记录一下我的步骤&#xff0c;需求呈现一个地图&#xff0c;地图显示标签&#xff0c;根据业务指标值给地图不同省市填充不同颜色&#xff0c;鼠标放…...

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

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

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

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

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

本博客借鉴网上很多大佬的答案&#xff0c;东拼西凑&#xff0c;最终在项目中完成批量插入&#xff0c;仅供参考~~~ 1. 自定义SQL注入器 新建一个名为EasySqlInjector的类&#xff0c;继承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 是一款低功耗单声道音频编解码器&#xff0c;具有全差分输出&#xff0c;支持在全差分配置下可编程模拟输入。可pin to pin兼容ES8311。 录音路径包含一个全差分输入&#xff0c;低噪声可编程增益放大器和自动增益控制&#xff08;ALC&#xff09;。在录音过程中,通过内…...

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

通用AT指令

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

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

二进制狼群算法

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

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

STL——list的介绍和使用

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

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

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

一、目的 在完成数据之后对业务指标进行分析&#xff0c;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格式并存在时区差异时&#xff0c;可通过设置字段格式如yyyy-MM-dd HH:mm:ss并指定时区为GMT8来解决。存储Date类型数据时&#xff0c;可以使用JSON库如json-lib, fastjson, Jackson或gson进行…...

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

mathorcup2024台风 我all in ai

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

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

android 10 后台启动activity

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

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

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

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

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

CentOS 7 上安装 MySQL 8.0 教程

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

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

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

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

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

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

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

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

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

原题链接&#xff1a;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]);// 如果偷了第一家&#xff0c;就不能偷最后一家int dp[n - 1];dp[0] …...

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

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

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

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

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

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

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

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

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

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

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2026/1/31 7:55:47

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/31 13:48:37

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2026/2/1 1:33:18

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...

编程新知 2026/1/26 20:57:21

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...

编程新知 2026/1/26 14:22:45

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

编程新知 2026/1/26 18:34:50

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

编程新知 2025/11/5 10:19:24