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

echart实现地图数据可视化

news 2025/12/1 12:21:02

文章目录

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

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/11/28 21:16:54

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

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

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

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

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/11/25 5:24:33

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/11/30 16:55:18

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/11/27 2:09:37

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/11/27 0:43:30

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/11/28 22:14:25

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/11/16 22:09:41

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/10/14 9:02:38