在当今的数据驱动时代，通过可视化手段将数据以直观易懂的方式呈现出来变得愈发重要。今天，我想和大家深入剖析一段有趣的代码，它利用了强大的 Echarts 库实现了各省地图的数据可视化展示，让我们一起揭开它的神秘面纱吧。
以下以河南地图为例做演示（文件过大其他各省JS请私信我呀）：
结果展示：
一、代码概述
这段代码主要由两大部分组成，一部分是用于创建和配置包含河南地图的 Echarts 图表的 HTML 和 JavaScript 代码，另一部分则是用于将河南地图的详细地理数据注册到 Echarts 中的 JavaScript 模块代码。这两部分代码协同工作，最终实现了在网页上生动展示河南地图及相关数据的效果。
二、HTML 与图表创建部分
HTML 结构基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图</title>
<script src="./echarts.min.js"></script>
<script src="./api/henan.js"></script>
</head>
<body>
<div id="map" style="height:600px"></div>
<script type="text/javascript">
function randomData() {
return Math.round(Math.random()*500);
}
var mydata = [
{name: '郑州市',value: '100' },{name: '开封市',value: randomData() },
{name: '洛阳市',value: randomData() },{name: '平顶山市',value: randomData() },
{name: '安阳市',value: randomData() },{name: '鹤壁市',value: randomData() },
{name: '新乡市',value: randomData() },{name: '焦作市',value: randomData() },
{name: '濮阳市',value: randomData() },{name: '许昌市',value: randomData() },
{name: '漯河市',value: randomData() },{name: '三门峡市',value: randomData() },
{name: '南阳市',value: randomData() },{name: '商丘市',value: randomData() },
{name: '信阳市',value: randomData() },{name: '周口市',value: randomData() },
{name: '驻马店市',value: randomData() },{name: '济源市',value: randomData() },
];
var optionMap = {
backgroundColor: '#FFFFFF',
title: {
text: '河南地图大数据',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item'
},
//左侧小导航图标
visualMap: {
show : true,
x: '200',
y: 'center',
splitList: [
{start: 500, end:600},{start: 400, end: 500},
{start: 300, end: 400},{start: 200, end: 300},
{start: 100, end: 200},{start: 0, end: 100},
],
color: ['#0bebf9', '#f488f2', '#fcf367','#fcf912', '#fa14c6', '#184dfa']
},
//配置属性
series: [{
name: '数据',
type: 'map',
mapType: '河南',
// mapType:'china',
roam: true,
label: {
normal: {
show: true
},
emphasis: {
show: false
}
},
data:mydata //数据
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('map'));
//使用制定的配置项和数据显示图表
myChart.setOption(optionMap);
</script>
</body>
</html>
首先来看 HTML 部分，代码开头通过标准的<!DOCTYPE html>和<html lang="en">等标签定义了这是一个 HTML5 文档且语言为英语（当然，可根据实际需求修改语言设置）。在<head>标签内，设置了文档的字符编码为 UTF-8，确保能正确显示各种字符，同时也配置了视口（viewport）相关属性，这使得我们的图表在不同设备（如手机、平板、电脑等）的屏幕上都能有较好的展示效果，自适应屏幕宽度。
这里还引入了两个关键的 JavaScript 文件：echarts.min.js和api/henan.js。想必大家对 Echarts 并不陌生，它是一个非常流行且功能强大的开源可视化库，能帮助我们轻松创建各种各样的图表。而api/henan.js文件，就是包含了与河南地图相关的特定配置或数据获取等功能的文件，后续我们会看到它在整个代码体系中的重要作用。
创建地图图表容器
在<body>部分，有一个重要的<div>元素，其 ID 为 “map”，并且通过样式设置了它的高度为 600px。这个<div>元素可不是普通的元素哦，它将作为我们后续创建的 Echarts 图表的容器，就像是为即将登场的 “主角”—— 河南地图图表，搭建了一个专属的舞台。
配置与初始化图表
紧接着就是一大段的 JavaScript 代码，这段代码可谓是整个图表创建的核心环节。
首先，定义了一个名为randomData的函数，它的作用是生成一个 0 到 500 之间的随机数，并通过Math.round函数将其取整。这个随机数生成函数在后续为河南各个城市赋予数据值时将发挥重要作用，除了郑州市的数据值被固定为 “100” 外，其他城市的数据值都将通过调用这个randomData函数来随机生成，以此模拟不同城市的某种相关数据情况。
然后，创建了一个名为mydata的数组，里面包含了河南省各个城市的名称以及对应的数据值。通过这种方式，我们将每个城市与一个具体的数据关联了起来，为后续在地图上展示数据分布奠定了基础。
接下来，就是配置图表的重头戏 ——optionMap对象的创建。这个对象包含了众多属性，用于详细设定图表的各个方面：
- 背景颜色：设置为白色（
#FFFFFF），给人一种简洁、清晰的视觉感受，让地图和数据能够更加突出地展示。 - 标题设置：图表的标题被设定为 “河南地图大数据”，并且通过
x:'center'将其位置设置为居中，使标题在页面上显得格外醒目，让访问者一眼就能知道这个图表所展示的大致内容。 - 提示框（tooltip）：当鼠标触发（
trigger为item）某个地图区域（城市）时，将会显示相关信息。这是一个很贴心的设计，方便用户在浏览地图时获取更详细的城市数据信息。 - 视觉映射（visualMap）：这部分的配置相当精彩。它通过设置不同的数据区间，并为每个区间对应了不同的颜色数组（如
#0bebf9，#f488f2，#fcf367，#fcf912，#fa14c6，#184dfa等），实现了根据数据值的范围在地图上以不同颜色显示各个城市区域的效果。例如，数据值在某个区间内的城市可能显示为蓝色，而在另一个区间内的城市则可能显示为红色等，这样一来，用户可以通过颜色直观地看出不同城市的数据差异和分布情况。 - 系列数据（series）：在这个数组中，我们配置了图表的系列数据。其中，系列名称为 “数据”，类型为 “map”，地图类型明确设置为 “河南”（当然，如果需要展示中国全图可以将
mapType改为china）。这里还允许地图进行漫游操作（roam为true），方便用户可以自由地浏览整个河南地图。对于地图区域的标签，正常状态下显示标签，强调状态下（如鼠标悬停等）不显示标签。最后，将之前定义的mydata数组作为图表的数据来源，确保每个城市的数据能够准确地在地图上展示出来。
在完成了上述所有的配置后，通过echarts.init(document.getElementById('map'))初始化一个 Echarts 实例，这里传入的参数就是我们之前创建的作为图表容器的<div>元素。最后，使用myChart.setOption(optionMap)将配置好的图表选项应用到 Echarts 实例上，至此，一个带有随机数据可视化的河南地图图表就在网页上成功展示出来啦！
三、地图数据注册部分
模块加载机制
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName!== 'string') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
factory({}, root.echarts);
}
}(this, function (exports, echarts) {
// 日志记录函数
var log = function (msg) {
if (typeof console!== 'undefined') {
console && console.error && console.error(msg);
}
}
if (!echarts) {
log('ECharts is not Loaded');
return;
}
if (!echarts.registerMap) {
log('ECharts Map is not loaded')
return;
}
// 地图数据注册
echarts.registerMap(....)接下来分析一下用于注册河南地图数据的 JavaScript 模块代码。这段代码同样十分精妙，它采用了立即执行函数表达式（IIFE）的形式，这种方式能够有效地创建一个独立的模块作用域，避免全局变量污染。
在这个 IIFE 内部，首先会根据当前的 JavaScript 环境判断采用何种方式来加载模块。如果当前环境支持 AMD（Asynchronous Module Definition）规范，那么会通过define函数以匿名模块的形式注册模块，依赖于exports和echarts这两个模块，并传入工厂函数作为回调。如果是处于 CommonJS 环境（如 Node.js），则会通过factory(exports, require('echarts'))来调用工厂函数，将exports对象和通过require引入的echarts的模块作为参数传入。而如果以上条件都不满足，推测是在浏览器的全局环境下，就直接调用factory({}, root.echarts)，将一个空对象和全局的echarts对象（假设root指向window）作为参数传入工厂函数。
Echarts.js代码部分可以去官网直接下载。
日志记录与错误处理
在代码中还定义了一个名为log的函数，它主要用于记录错误信息。这个函数会先判断console对象是否存在，因为在某些环境下可能不存在console，比如在生产环境下可能被压缩掉了。如果console存在且有error方法，就通过console.error(msg)将错误消息记录到控制台。在后续的代码中，当检查到echarts对象不存在或者echarts.registerMap方法不存在时，就会调用这个log函数来输出相应的错误提示信息，以便开发人员能够及时发现问题所在。
地图数据注册操作
当确保echarts库及其地图注册功能都可用后，就会执行地图注册操作。通过echarts.registerMap('河南', {...})将河南地图的数据注册到 Echarts 中。这里注册的地图数据是一个包含多个地理特征（features）的FeatureCollection对象，每个地理特征对应一个河南省的城市区域，包含了城市的几何形状信息（如多边形坐标coordinates、编码偏移量encodeOffsets等）以及相关属性（如城市的经纬度cp、名称name、子区域数量childNum等）。通过这样详细的地理数据注册，Echarts 才能准确地绘制出河南地图的形状，并根据后续传入的数据在地图上展示相应的信息。
四、总结
通过对这段代码的详细分析，我们可以看到它是如何巧妙地利用 HTML、JavaScript 以及 Echarts 库来实现河南地图的数据可视化展示的。从创建图表容器、生成随机数据、配置图表选项到注册地图数据，每一个环节都紧密相连，缺一不可。
这样的代码示例不仅为我们展示了如何在网页上展示特定区域的地图及相关数据，也为我们在其他数据可视化项目中提供了很好的参考和借鉴。希望大家通过这次的剖析，对数据可视化的实现过程有了更深入的了解，也能在自己的项目中灵活运用这些知识和技巧哦！
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
