★ FEATURED ARTICLE 简介这是一份面向数据可视化开发者与前端工程师的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 或 KMLGeoJSON 的优势在于它是纯文本、可直接被 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.x4.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 langzh-CN head meta charsetUTF-8 title重庆地图 Demo/title script src./js/echarts.min.js/script style #map { width: 100%; height: 800px; } /style /head body div idmap/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要根据你的实际数据范围调整。如果数据里最大值是 5000max还写 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/目录下对应的 GeoJSONchart.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就够了。我一般会在构建阶段用工具做一次坐标抽稀把精度降到业务能接受的最低水平加载速度能快不少。从那以后我每次拿到新的地图数据都强制走一遍“注册→渲染→点击→下钻→返回”的完整链路确认万盛这种特殊区域不会在某个环节丢数据。希望帮到你。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
