echart实现地图数据可视化

news/2024/12/14 13:04:29/

文章目录

    • @[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地图的简单运用,更多功能配置参考官方文档/


http://www.ppmy.cn/news/1545099.html

相关文章

Python小游戏22——吃豆豆小游戏

运行效果图 【python】代码展示 import pygame import random # 初始化Pygame pygame.init() # 屏幕尺寸 WIDTH, HEIGHT 800, 600 WIN pygame.display.set_mode((WIDTH, HEIGHT)) pygame.display.set_caption("吃豆豆小游戏") # 颜色定义 WHITE (255, 255, 255) B…

国产MCU厂商第三季度取得亮眼成绩!

【哔哥哔特导读】今年MCU市场整体回暖明显&#xff0c;多家国内MCU厂商迎来销售的显著增长&#xff0c;这也直接体现在了多家上市企业的季度报上。 作为智能设备的核心元器件&#xff0c;微控制单元(MCU)成为科技消费市场的“晴雨表”。 经历2023年MCU消费低迷和库存高压等行…

Redis 的使⽤和原理

第一章:初识 Redis 1.1盛赞 Redis Redis 是⼀种基于键值对&#xff08;key-value&#xff09;的 NoSQL 数据库&#xff0c;与很多键值对数据库不同的是&#xff0c;Redis 中的值可以是由 string&#xff08;字符串&#xff09;、hash&#xff08;哈希&#xff09;、list&…

DAY21|二叉树Part08|LeetCode: 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

目录 LeetCode: 669. 修剪二叉搜索树 基本思路 C代码 LeetCode: 108.将有序数组转换为二叉搜索树 基本思路 C代码 LeetCode: 538.把二叉搜索树转换为累加树 基本思路 C代码 LeetCode: 669. 修剪二叉搜索树 力扣代码链接 文字讲解&#xff1a;LeetCode: 669. 修剪二叉搜…

常见几种GB 9706.1-2020医疗器械试验工装,您有所了解吗?

医疗器械试验工装是指用于医疗器械试验的工具或器具。它们可以用于测试医疗器械的性能、安全性和有效性&#xff0c;以确保医疗器械符合相关的标准和法规要求。Delta德尔塔仪器医疗器械试验工装&#xff0c;符合GB 9706.1-2020标准要求。 常见的医疗器械试验工装包括&#xff1…

全文检索ElasticSearch到底是什么?

学习ElasticSearch之前&#xff0c;我们先来了解一下搜索 1 搜索是什么 ① 概念&#xff1a;用户输入想要的关键词&#xff0c;返回含有该关键词的所有信息。 ② 场景&#xff1a; ​ 1互联网搜索&#xff1a;谷歌、百度、各种新闻首页&#xff1b; ​ 2 站内搜索&#xff…

502 Bad Gateway 错误详解:从表现推测原因,逐步排查直至解决

502 Bad Gateway 错误通常意味着服务器之间的通信失败&#xff0c;但导致的具体原因往往因场景而异。 场景一&#xff1a;高峰期频繁出现 502 错误 1.1 现象 在流量高峰期间&#xff08;如促销活动、直播发布等&#xff09;&#xff0c;页面访问变慢甚至出现 502 错误&#…

腾讯cos对象存储,下行流量费贵,是否可以加入服务器减少费用,架构如何设计

腾讯云COS&#xff08;Cloud Object Storage&#xff09;对象存储服务提供了一种高效、安全、低成本的方式存储大量数据。然而&#xff0c;当涉及到外网下行流量时&#xff0c;确实会产生一定的费用&#xff0c;这可能会增加整体的成本。为了减少这些费用&#xff0c;可以通过以…