❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【9】 - 河南省

本文主要是介绍❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【9】 - 河南省,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 ☀️ 我的主页:YYDataV ☀️欢迎点赞 👍 收藏 ⭐留言,欢迎多多交流

目录

❤️效果展示❤️

一、方案架构

1、地图模块

2、关键技术

二、编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码)

1、html 页面布局

2、引入地图文件

3、绘制地图气泡图,视觉映射效果

4、动态加载geoJson数据

5、GeoJSON数据格式

三、源码下载

❤️系列文章❤️


近年来,数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。

话不多说,开始分享干货,欢迎讨论!QQ微信同号: 6550523今天分享的是数据可视化中非常重要的组件【中国各省市地图】,地图优点太多了,它可以非常炫酷清晰的呈现出地区和企业数据之间的关系,达到一目了然的效果。

❤️效果展示❤️

 

一、方案架构

1、地图模块

包含以下城市:安阳,沧州,鹤壁,济源,焦作​​​​​​​,开封,洛阳​​​​​​​,南阳​​​​​​​,平顶山​​​​​​​,濮阳​​​​​​​,三门峡​​​​​​​,商丘​​​​​​​,漯河​​​​​​​,新乡​​​​​​​,信阳​​​​​​​,许昌​​​​​​​,郑州​​​​​​​,周口​​​​​​​,驻马店​​​​​​​ 

2、关键技术

  • Echarts 地理坐标系(geo)
  • Echarts各地区不同的散点气泡图大小(effectScatter)
  • Echarts各地区不同的视觉映射颜色效果(visualMap)
  • 国际标准数据集(geoJSON)

二、编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码)

1、html 页面布局

  <h2>河南 - he2_nan2</h2><table><tr><td><div id="an1_yang2" class="citymap"></div></td><td><div id="cang1_zhou1" class="citymap"></div></td><td><div id="he4_bi4" class="citymap"></div></td><td><div id="ji4_yuan2" class="citymap"></div></td></tr><tr><td><div id="jiao1_zuo4" class="citymap"></div></td><td><div id="kai1_feng1" class="citymap"></div></td><td><div id="luo4_yang2" class="citymap"></div></td><td><div id="nan2_yang2" class="citymap"></div></td></tr><tr><td><div id="ping2_ding3_shan1" class="citymap"></div></td><td><div id="pu2_yang2" class="citymap"></div></td><td><div id="san1_men2_xia2" class="citymap"></div></td><td><div id="shang1_qiu1" class="citymap"></div></td></tr><tr><td><div id="ta4_he2" class="citymap"></div></td><td><div id="xin1_xiang1" class="citymap"></div></td><td><div id="xin4_yang2" class="citymap"></div></td><td><div id="xu3_chang1" class="citymap"></div></td></tr><tr><td><div id="zheng4_zhou1" class="citymap"></div></td><td><div id="zhou1_kou3" class="citymap"></div></td><td><div id="zhu4_ma3_dian4" class="citymap"></div></td></tr></table>

2、引入地图文件

  <!-- 河南 -->
<script src="js/shape-with-internal-borders/henan/he2_nan2_an1_yang2.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_cang1_zhou1.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_he4_bi4.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_ji4_yuan2.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_jiao1_zuo4.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_kai1_feng1.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_luo4_yang2.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_nan2_yang2.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_ping2_ding3_shan1.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_pu2_yang2.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_san1_men2_xia2.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_shang1_qiu1.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_ta4_he2.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_xin1_xiang1.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_xin4_yang2.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_xu3_chang1.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_zheng4_zhou1.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_zhou1_kou3.js"></script>
<script src="js/shape-with-internal-borders/henan/he2_nan2_zhu4_ma3_dian4.js"></script>

3、绘制地图气泡图,视觉映射效果

function make_city(cityName, chartDom) {myChart = echarts.init(document.getElementById(chartDom), window.gTheme);var option = {title: {text: cityName + "市 地图",left: "center",},tooltip: {trigger: "item",formatter: function (params) {if (typeof params.value == "object") {value = params.value[2];} else if (typeof params.value == "number") {value = params.value;} else {value = 0;}return params.name + " : " + value + "亿元";},},visualMap: {realtime: true,calculable: true,seriesIndex: 0,},geo: [{map: cityName,roam: true,layoutCenter: ["50%", "50%"],layoutSize: "120%",selectedMode: "single",zoom: 0.7,},],series: [{name: "地图",type: "map",coordinateSystem: "geo",geoIndex: 0,data: [],},{name: "Top 5",type: "effectScatter",coordinateSystem: "geo",geoIndex: 0,data: [],symbolSize: function (val) {return val[2] / 20;},rippleEffect: {brushType: "stroke",},},],};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
}

4、动态加载geoJson数据


function asyncData(filename, idContainer) {$.getJSON(filename).done(function (data) {dataNoCoordinate = data.map(handleData);dataDesc = data.sort(function (a, b) {return b.value[2] - a.value[2];}).slice(0, 5);var myChart = echarts.init(document.getElementById(idContainer));myChart.setOption({series: [{ data: dataNoCoordinate },{data: dataDesc,},],});});
}

5、GeoJSON数据格式

 {"type":"FeatureCollection","features":[{"type":"Feature","id":"410502","properties":{"name":"文峰区","cp":[114.357082,36.090468],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[114.40625,35.9677734375],[114.40625,35.96875],[114.40625,35.96875],[114.4033203125,35.96875],[114.4033203125,35.96875],[114.4033203125,35.966796875],[114.40234375,35.966796875],[114.40234375,35.966796875],[114.40234375,35.9677734375],[114.40234375,35.9697265625],[114.3994140625,35.96875],[114.3994140625,35.96875],[114.396484375,35.96875],[114.396484375,35.9677734375],[114.396484375,35.966796875],[114.396484375,35.966796875],[114.396484375,35.9658203125],[114.3935546875,35.966796875],[114.3935546875,35.9658203125],[114.392578125,35.9658203125],

三、源码下载

含HTTP服务+本省市的GeoJSON数据+Echarts图表:

https://download.csdn.net/download/lildkdkdkjf/22005623

本次分享结束,欢迎讨论!QQ微信同号: 6550523

❤️系列文章❤️

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【1】 - 安徽省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【2】 - 福建省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【3】 - 甘肃省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【4】 - 广东省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【5】 - 广西省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【6】 - 贵州省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【7】 - 海南省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【8】 - 河北省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【9】 - 河南省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【10】 - 黑龙江省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【11】 - 湖北省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【12】 - 湖南省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【13】 - 吉林省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【14】 - 江苏省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【15】 - 江西省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【16】 - 辽宁省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【17】 - 内蒙古省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【18】 - 宁夏省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【19】 - 青海省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【20】 - 山东省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【21】 - 山西省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【22】 - 陕西省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【23】 - 四川省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【24】 - 西藏省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【25】 - 新疆省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【26】 - 云南省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【27】 - 浙江省

❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【28】 - 直辖市

这篇关于❤️数据可视化❤️:基于Echarts + GeoJson实现的地图视觉映射散点(气泡)组件【9】 - 河南省的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/328133

相关文章

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola