企业官网建设流程全解析

简介：这是一份面向数据可视化开发者与前端工程师的Echarts重庆地图数据包，专门解决在Web项目中绘制重庆市及下属区县地图、尤其是万盛区边界的需求。资源以JSON格式存储地图区域定义、经纬度边界坐标与区域标识，可配合Echarts实现数据绑定、区域着色、点击悬浮高亮等交互效果，适用于大屏展示、区域数据统计等场景。压缩包共2个文件，包含1个html示例页面与1个json地图数据文件，整体约18KB，体积轻量便于快速集成到现有工程中。目前已有1020人学习下载，说明其在同类地图数据中具备一定参考价值。借助该数据，开发者可直接注册地图并渲染出含万盛区的重庆地图，省去自行整理边界坐标的成本，同时通过示例页面快速理解地图注册、实例初始化与配置项设置流程，为后续绑定人口、GDP等业务数据打下基础。

1. 重庆地图数据里的万盛经开区，为什么你的 ECharts 总是少一块

做过重庆区域数据可视化的开发者大概率遇到过这个场景：地图渲染出来了，38 个区县看着也对，但业务方一句“万盛呢”就把你问住了。万盛经开区在重庆的行政架构里是个特殊存在，它不属于传统意义上的市辖区，但在实际业务中又必须作为一个独立区域展示。ECharts 官方地图包里的重庆数据往往不包含万盛，或者把万盛合并进了綦江区，导致做区域热力图、数据下钻、区域筛选时数据对不上。

这份 ECharts 重庆地图数据（含万盛）解决的就是这个问题。它提供了一套完整的重庆区县 GeoJSON 数据，把万盛经开区单独拆出来作为一个可渲染的区域单元。适合做重庆本地政务可视化、区域业务数据大屏、连锁门店分布图的前端开发者，也适合需要做区县级数据下钻的后端同学拿来对齐行政区划编码。如果你正在用 ECharts 做重庆相关的数据地图，这份数据能直接省掉你自己去抠边界坐标的时间。

2. 地图数据的技术选型：GeoJSON 怎么和 ECharts 对接

2.1 为什么是 GeoJSON 而不是其他格式

ECharts 的地图系列（series-map）依赖地理坐标数据来绘制区域边界。它支持两种数据接入方式：一种是直接用 ECharts 内置的地图数据（通过registerMap注册），另一种是传入 GeoJSON 格式的几何数据。这份资源采用的是 GeoJSON 格式，这也是目前前端地图可视化最通用的选择。

GeoJSON 本质上是一个 JSON 对象，用FeatureCollection包裹多个Feature，每个Feature代表一个行政区划，里面包含properties（属性信息，比如区域名称、编码）和geometry（几何信息，比如多边形坐标串）。相比 Shapefile 或 KML，GeoJSON 的优势在于它是纯文本、可直接被 JavaScript 解析、体积可控，而且 ECharts 原生支持。

常见做法是：把 GeoJSON 文件放在项目的public或static目录下，通过fetch或axios请求加载，拿到数据后调用echarts.registerMap('chongqing', geoJson)注册地图，然后在series里通过map: 'chongqing'引用。

2.2 万盛在数据里的处理方式

万盛经开区在重庆的行政区划中代码是 500110（原万盛区代码），后来与綦江合并后，很多地图数据把它归入綦江区。这份数据的关键差异在于：它把万盛作为一个独立的Feature保留下来，properties.name字段单独标注为“万盛经开区”或“万盛”，properties.adcode也单独给出。

这意味着你在做数据绑定的时候，series.data里的name可以直接写“万盛经开区”，ECharts 会自动匹配到对应的区域多边形。如果你用的是官方地图包，写“万盛”可能匹配不到任何区域，地图上那块就是空白。

注意：不同版本的重庆地图数据对万盛的命名可能不同，有的叫“万盛区”，有的叫“万盛经开区”。使用前先确认properties.name的实际值，再决定series.data里的name怎么写。

2.3 数据文件的目录组织

这份资源解压后通常包含以下结构（以常见组织方式为例）：

echarts-chongqing-map/ ├── geojson/ │ ├── chongqing-full.json # 完整重庆地图，含万盛 │ ├── chongqing-simple.json # 简化版，体积更小 │ └── districts/ # 各区县单独文件 │ ├── 500101.json │ ├── 500102.json │ └── ... ├── js/ │ └── echarts-map-loader.js # 地图加载封装 └── demo/ └── index.html # 可直接打开的示例页面

chongqing-full.json是精度较高的版本，适合大屏展示；chongqing-simple.json做了坐标点抽稀，适合移动端或对加载速度敏感的场景。districts目录下是每个区县的独立 GeoJSON，做下钻交互时按需加载，不用一次性把整个重庆的数据都塞进内存。

3. 跑起来：从零加载重庆地图并绑定数据

3.1 环境准备与依赖引入

这份数据本身不依赖构建工具，一个 HTML 文件加一个本地静态服务就能跑。你需要准备：

• ECharts 5.x（4.x 也兼容，但 5.x 的registerMapAPI 更稳定）
• 一个静态文件服务器（直接用python -m http.server或npx serve都行）
• 现代浏览器（Chrome/Edge/Firefox 均可）

先建一个最小项目目录：

mkdir echarts-cq-demo && cd echarts-cq-demo # 把下载的 geojson 文件夹拷进来 # 建一个 index.html touch index.html

引入 ECharts 的方式有两种：CDN 或本地文件。做内网项目的话建议把echarts.min.js下载到本地js/目录，避免外网依赖。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>重庆地图 Demo</title> <script src="./js/echarts.min.js"></script> <style> #map { width: 100%; height: 800px; } </style> </head> <body> <div id="map"></div> <script src="./js/main.js"></script> </body> </html>

这里把地图容器设成 100% 宽、800px 高，实际项目中通常用 flex 或 grid 布局让地图自适应。main.js里写加载逻辑。

3.2 加载 GeoJSON 并注册地图

核心逻辑分三步：请求 GeoJSON、注册地图、配置 option。先看加载和注册的部分：

// main.js async function initMap() { const chart = echarts.init(document.getElementById('map')); // 1. 请求 GeoJSON 数据 const response = await fetch('./geojson/chongqing-full.json'); const geoJson = await response.json(); // 2. 注册地图，'chongqing' 是自定义的地图名 echarts.registerMap('chongqing', geoJson); // 3. 配置 option const option = { title: { text: '重庆各区县数据分布', left: 'center' }, tooltip: { trigger: 'item', formatter: '{b}<br/>数值：{c}' }, visualMap: { min: 0, max: 1000, left: 'left', bottom: '10%', text: ['高', '低'], calculable: true, inRange: { color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'] } }, series: [ { name: '区域数据', type: 'map', map: 'chongqing', // 对应 registerMap 的名字 roam: true, // 允许缩放和拖拽 label: { show: true, fontSize: 10 }, emphasis: { label: { show: true }, itemStyle: { areaColor: '#ffd700' } }, data: [ { name: '渝中区', value: 850 }, { name: '江北区', value: 720 }, { name: '沙坪坝区', value: 680 }, { name: '万盛经开区', value: 430 }, { name: '綦江区', value: 390 } // ... 其他区县 ] } ] }; chart.setOption(option); } initMap();

这段代码里几个关键点：

echarts.registerMap('chongqing', geoJson)把 GeoJSON 注册成一个名为chongqing的地图。注册之后，series.map写'chongqing'就能引用它。地图名可以自定义，但同一个页面注册多个地图时名字不能冲突。

visualMap控制颜色映射，min和max要根据你的实际数据范围调整。如果数据里最大值是 5000，max还写 1000，那所有区域都会显示成最深色，视觉上就失去了区分度。

series.data里的name必须和 GeoJSON 里properties.name完全一致，包括“经开区”这种后缀。差一个字就匹配不上，那个区域就会显示为默认灰色。

3.3 万盛区域的单独高亮与数据绑定

万盛因为经常需要单独强调，可以在数据里给它一个特殊处理。比如用itemStyle单独设置颜色，或者在tooltip里加额外说明：

// 在 series.data 里对万盛单独配置 data: [ { name: '渝中区', value: 850 }, { name: '万盛经开区', value: 430, itemStyle: { areaColor: '#ff6b6b' }, // 单独标红 label: { show: true, fontWeight: 'bold' } }, // ... 其他区县 ]

如果要做区域下钻——点击某个区县加载它的下级地图——需要监听click事件，然后动态请求districts/目录下对应的 GeoJSON：

chart.on('click', async (params) => { const adcode = getAdcodeByName(params.name); // 自己维护名称到编码的映射 if (!adcode) return; const res = await fetch(`./geojson/districts/${adcode}.json`); const districtGeo = await res.json(); echarts.registerMap('district', districtGeo); chart.setOption({ series: [{ map: 'district', data: [] // 重新绑定下级数据 }] }); });

这里有个坑：registerMap重复注册同名地图会覆盖，但已经渲染的图表不会自动刷新，必须调setOption才会生效。另外下钻之后要提供返回上级的按钮，否则用户就困在区县地图里了。

4. 避坑与常见问题排查

4.1 地图渲染出来是空白或只有边框

现象：页面加载后地图区域一片灰，或者只有轮廓线没有填充色。

原因通常是 GeoJSON 请求失败或格式不对。先打开浏览器 Network 面板看chongqing-full.json的请求状态码，如果是 404，检查文件路径；如果是 200 但地图不显示，把返回的 JSON 贴到 JSON 校验工具里看有没有语法错误。另一个常见原因是registerMap的调用时机——如果setOption在registerMap之前执行，地图就找不到。

解决：确保await fetch和registerMap都在setOption之前完成。用async/await或者把setOption放在registerMap的回调里。

4.2 万盛区域显示为灰色，数据绑不上去

现象：其他区县都有颜色，只有万盛是默认灰色，tooltip 也不显示。

原因：series.data里的name和 GeoJSON 里properties.name不一致。比如数据里写“万盛”，GeoJSON 里写的是“万盛经开区”，ECharts 按字符串精确匹配，匹配不到就不渲染。

解决：打开 GeoJSON 文件，搜索“万盛”，看properties.name的完整值是什么，然后统一数据里的命名。建议在项目里维护一个名称映射表，避免每次手动核对。

4.3 地图缩放后标签重叠看不清

现象：roam: true开启缩放后，区县名称标签挤在一起，尤其是主城区那几个面积小的区。

原因：ECharts 默认所有标签都显示，小区域放大后标签密度过高。

解决：设置label.show: false默认不显示，只在emphasis里显示；或者用labelLayout做标签避让（ECharts 5.x 支持）。另一个办法是根据缩放级别动态控制标签显隐，监听georoam事件调整。

4.4 下钻后返回上级地图数据错乱

现象：点击区县下钻后再返回，地图显示的是区县边界而不是重庆整体。

原因：registerMap注册的'district'地图名覆盖了之前的配置，返回时没有重新注册重庆地图。

解决：返回上级时重新执行echarts.registerMap('chongqing', originalGeoJson)，然后setOption恢复重庆的 series 配置。建议把原始 GeoJSON 缓存在变量里，不要每次重新请求。

4.5 移动端地图触摸滚动与页面滚动冲突

现象：在手机上手指滑动地图时，页面也跟着滚，体验很差。

原因：ECharts 的roam捕获了 touch 事件，但页面滚动没有被阻止。

解决：给地图容器加touch-action: none的 CSS，或者在roam配置里限制只允许缩放不允许拖拽。如果页面本身需要滚动，考虑把地图放在一个固定高度的容器里，并设置roam: 'scale'只允许缩放。

5. 二次开发：从这份数据出发做定制化改造

拿到这份数据之后，最常做的改造有三个方向：换配色方案、加交互层、对接真实后端数据。

换配色是最简单的。visualMap.inRange.color接受一个颜色数组，从低到高映射。做政务大屏常用深蓝到亮青的渐变，做商业分析常用红黄绿的热力色。改的时候注意min和max要跟着数据走，不要写死。我一般会在setOption之前先遍历一遍data，算出实际的最大最小值，再动态设置visualMap的范围。

加交互层通常是在tooltip里塞更多信息。默认的formatter只显示名称和数值，但你可以传一个回调函数，根据params.data里的自定义字段拼出 HTML。比如每个区县除了value再加一个gdp字段，tooltip 里就能同时显示数值和 GDP。注意formatter返回的是 HTML 字符串，样式要内联写，因为 tooltip 是挂载在图表容器外的。

对接后端数据时，series.data的格式是[{ name: '区域名', value: 数值 }]。后端返回的通常是[{ region: '渝中区', count: 850 }]，需要在前端做一层映射。我习惯写一个transformData函数，把后端字段转成 ECharts 需要的格式，同时处理名称对齐——比如后端存的是“万盛区”，地图里是“万盛经开区”，就在这个函数里做替换。这个映射表建议放在单独的配置文件里，后面加区县或者改名字只改一处。

还有一个容易忽略的点：地图数据的精度和文件体积是正相关的。chongqing-full.json可能有好几 MB，如果只是做个简单的区域着色，用chongqing-simple.json就够了。我一般会在构建阶段用工具做一次坐标抽稀，把精度降到业务能接受的最低水平，加载速度能快不少。

从那以后我每次拿到新的地图数据，都强制走一遍“注册→渲染→点击→下钻→返回”的完整链路，确认万盛这种特殊区域不会在某个环节丢数据。希望帮到你。

本文还有配套的精品资源，点击获取