简介这份资源面向需要在 Web 页面中展示重庆区域地理数据的开发者提供基于 ECharts 实现重庆地图可视化的基础素材适合数据可视化入门与地图交互开发场景。压缩包共 2 个文件包含 1 个 JSON 与 1 个 HTML整体约 18KBJSON 文件承载重庆各行政区划的名称与经纬度坐标是绘制地图边界与形状的数据基础HTML 文件则给出引入 ECharts、创建容器、初始化实例并通过 setOption 加载地图配置的完整页面模板两者配合即可快速跑通地图渲染流程。目前已有 2425 人学习下载说明该素材在同类需求中具备一定参考价值。读者可据此掌握 map 类型 series 的配置方式并在此基础上扩展区域着色、悬浮提示、点击事件与缩放平移等交互或替换数据源实现自定义热点展示为后续地理信息可视化项目提供可复用的起点。1. Echarts重庆地图从行政区划到可视化的落地路径做过数据大屏的工程师大概率都遇到过这个需求业务方甩过来一份带区县字段的表格要求在地图上按区域着色最好还能下钻到街道。Echarts 本身不内置重庆的行政区划边界官方地图仓库里也没有现成的重庆 GeoJSON所以“Echarts重庆地图”这件事的核心不是写配置项而是先把地理数据这条链路打通。它适合三类人做大屏前端但没碰过地理数据的、需要按区县做业务指标可视化的、以及想给现有系统加一张区域热力图的后端转全栈。整条链路拆开就是四步拿到合规的边界数据、转成 Echarts 认的 GeoJSON、注册地图并配置 series、最后处理下钻和性能。下面按这个顺序讲透每一步都给可复现的命令和代码。2. 重庆地图数据从哪来边界获取与格式转换2.1 为什么不能直接用官方地图包Echarts 5 之后官方不再随包提供地图 JSONecharts/map目录已经移除。很多人第一反应是去翻旧版本或者找第三方 CDN 上的chongqing.js这条路有两个坑一是旧数据边界可能还是几年前的行政区划重庆这些年有过区县调整二是第三方 CDN 的文件来源不可控生产环境引外链有可用性风险。常见做法是从公开的行政区划数据源获取自己转成 GeoJSON 后本地托管。我一般会优先用带adcode字段的数据源因为重庆的区县代码是稳定的后续做数据匹配时比中文名可靠得多。获取渠道上公开的地理数据平台会提供按省下载的 GeoJSON下载时注意选“区县级”精度而不是“市级”否则整个重庆只有一个外轮廓没法按区着色。文件下来之后先别急着用用命令行看一眼结构确认features数组里每个元素的properties有没有name和adcode。# 查看下载的 GeoJSON 里有多少个区县要素 python -c import json with open(chongqing_raw.geojson, r, encodingutf-8) as f: data json.load(f) print(要素数量:, len(data[features])) # 打印前三个要素的属性确认字段名 for feat in data[features][:3]: print(feat[properties]) 这段脚本的作用是快速体检数据。features的数量应该接近重庆的区县总数38 个左右含自治县如果只有 1 个说明下错了精度层级。properties里如果字段名是NAME或fullname而不是name后面注册地图时 Echarts 匹配不上需要先做字段重命名。参数上没什么可调的重点是看输出字段名不对就在转换脚本里统一改掉。2.2 用 Python 把边界数据转成 Echarts 认的 GeoJSONEcharts 的registerMap接受标准 GeoJSON但有几个隐性要求坐标系必须是 WGS84 或 GCJ02 且全图统一geometry.type支持Polygon和MultiPolygonproperties.name必须存在且和 series 里的name完全一致。公开数据源有时会带一堆用不上的属性字段文件体积大加载慢转换时顺手精简掉。import json def convert_to_echarts_geojson(src_path, dst_path): with open(src_path, r, encodingutf-8) as f: data json.load(f) features [] for feat in data[features]: props feat[properties] # 统一取 name 字段兼容不同数据源的命名 name props.get(name) or props.get(NAME) or props.get(fullname) adcode props.get(adcode) or props.get(ADCODE) if not name: continue # 没有名称的要素直接丢弃否则地图上会出现无名区域 features.append({ type: Feature, properties: { name: name, adcode: str(adcode) if adcode else }, geometry: feat[geometry] }) out {type: FeatureCollection, features: features} with open(dst_path, w, encodingutf-8) as f: # ensure_asciiFalse 保证中文名不被转义成 \uXXXX json.dump(out, f, ensure_asciiFalse) convert_to_echarts_geojson(chongqing_raw.geojson, chongqing.json)逻辑说明遍历原始要素把可能叫name/NAME/fullname的字段统一成name这是 Echarts 匹配区域的关键。adcode保留成字符串方便后续和业务数据里的区县代码对齐。ensure_asciiFalse这个参数很容易被忽略不加的话中文区县名会变成 Unicode 转义虽然 Echarts 也能解析但调试时肉眼没法看。转换完检查一下输出文件大小精简后通常在几百 KB 到 1MB 之间如果超过 2MB 说明属性没清干净或者精度过高可以考虑用工具做坐标抽稀。2.3 注册地图与最小可运行配置数据准备好之后前端侧的核心就两个 APIecharts.registerMap注册地图然后在geo或series-map里引用。很多人卡在注册了地图但页面空白八成是registerMap的第二个参数传的是文件路径字符串而不是解析后的对象或者注册名和map配置项不一致。import * as echarts from echarts; import chongqingJson from ./chongqing.json; // 打包工具会解析成对象 // 注册地图第一个参数是自定义地图名后续配置项要用同一个名字 echarts.registerMap(chongqing, chongqingJson); const chart echarts.init(document.getElementById(map)); chart.setOption({ tooltip: { trigger: item, formatter: {b} }, series: [{ type: map, map: chongqing, // 必须和 registerMap 的第一个参数一致 roam: true, // 允许缩放和拖拽 label: { show: true, fontSize: 10 }, itemStyle: { areaColor: #f0f2f5, borderColor: #999 }, emphasis: { itemStyle: { areaColor: #ffd666 } } }] });参数说明map的值是注册时的名字不是文件名这里最容易翻车。roam: true开启缩放拖拽大屏场景建议开但要注意和页面滚动的冲突移动端可能需要关掉。label.show在区县数量多的时候会显得拥挤重庆 38 个区县全显示标签会糊成一片建议只在emphasis里显示或者按缩放级别动态控制。到这一步一张能交互的重庆地图就跑起来了接下来才是把业务数据接进去。3. 把业务数据映射到区县series 配置与视觉编码3.1 数据匹配的三种方式与踩坑地图画出来只是壳真正有价值的是把指标数据映射到区域颜色上。Echarts 的series-map通过data数组里的name和 GeoJSON 的properties.name做匹配匹配不上就是灰色。实际项目里数据来源五花八门区县名可能有“渝北区”和“渝北”两种写法或者带空格直接匹配必然有一部分区域是灰的。常见做法有三种一是数据侧统一清洗成和 GeoJSON 完全一致的名称二是用nameMap做映射三是改用adcode匹配。我一般推荐第一种加第三种组合名称用于展示adcode 用于匹配。如果数据里只有名称那就老老实实做一次名称对齐把“XX自治县”简写成“XX县”这类差异在 ETL 阶段处理掉别指望前端兜底。// 假设后端返回的数据里区县名可能带“区”字差异 const rawData [ { region: 渝北, value: 320 }, { region: 沙坪坝区, value: 280 }, { region: 九龙坡, value: 260 } ]; // 名称归一化统一补全或去掉后缀和 GeoJSON 对齐 function normalizeName(name) { // 这里以 GeoJSON 里是“渝北区”这种全称为例 if (!name.endsWith(区) !name.endsWith(县)) { return name 区; } return name; } const seriesData rawData.map(item ({ name: normalizeName(item.region), value: item.value }));逻辑说明normalizeName是个兜底函数真实项目里名称差异远不止补个“区”字还有“两江新区”这种不属于标准行政区划但业务上要单独统计的情况。遇到这种要么在 GeoJSON 里手动补一个虚拟区域要么在业务侧归并到所属区县。参数上value决定颜色深浅如果数据里有 0 和 null 的区别null 的区域会显示为默认色0 会显示为最小值色视觉上要区分开。3.2 visualMap 分段与连续两种模式的选型颜色映射靠visualMap控制分连续型和分段型。连续型适合展示趋势颜色渐变平滑分段型适合做等级划分比如把指标分成“高/中/低”三档业务方一眼能看懂。选哪个取决于数据分布如果数据是长尾分布连续型会导致大部分区域颜色接近看不出差异这时候分段型更实用。visualMap: { type: piecewise, // 分段型改成 continuous 就是连续型 pieces: [ { min: 300, label: 高 (≥300), color: #d73027 }, { min: 150, max: 299, label: 中 (150-299), color: #fee08b }, { max: 149, label: 低 (150), color: #1a9850 } ], left: 20, bottom: 20, textStyle: { color: #333 } }参数说明pieces数组的顺序会影响图例展示一般从高到低排。min/max的边界要覆盖数据全集否则超出范围的区域会没有颜色。分段型的一个坑是max: 149这种写法如果数据里有小数比如 149.5会落到没有匹配的区间建议用min: 0, max: 149明确闭合。连续型则要注意min和max不设的话 Echarts 会自动取数据极值但如果有 null 值可能算错手动指定更稳。3.3 区县下钻点击事件与地图切换大屏需求里十有八九要做下钻点某个区县切换到该区县的街道级地图。实现思路是监听click事件拿到区县名或 adcode动态registerMap新的地图数据再setOption。这里的关键是街道级数据要提前准备好按 adcode 命名文件点击时按需加载。chart.on(click, async (params) { if (params.componentType ! series) return; const adcode params.data?.adcode; // 需要 GeoJSON 里带 adcode 并透传到 data if (!adcode) return; // 动态加载对应区县的街道级 GeoJSON const res await fetch(/maps/${adcode}.json); const townJson await res.json(); echarts.registerMap(town_${adcode}, townJson); chart.setOption({ series: [{ type: map, map: town_${adcode}, data: [] // 街道级数据按需再请求 }] }); });逻辑说明params.data.adcode能拿到值的前提是 series 的 data 里带了 adcode 字段而 data 又来自业务数据所以业务数据里必须包含 adcode。如果只有名称就得在点击时反查一张名称到 adcode 的映射表。动态registerMap会不断往内存里加地图下钻层级多了要注意清理Echarts 没有提供反注册 API常见做法是控制下钻深度或者用 iframe 隔离。返回上一级时重新注册父级地图即可但要注意setOption的合并策略地图类型切换建议用notMerge: true避免残留配置。4. 避坑与排查重庆地图最常见的五类问题4.1 地图显示空白或只有背景色现象页面初始化后容器有大小但地图区域一片空白控制台无报错。原因通常是registerMap没执行成功或者map配置项的名字和注册名不一致。排查时先在registerMap后面打印一下echarts.getMap(chongqing)如果返回 undefined 说明注册失败多半是 GeoJSON 对象结构不对比如传了字符串路径或者 JSON 解析失败。另一个隐蔽原因是容器高度为 0Echarts 初始化时读不到尺寸给容器加个明确的height就能解决。4.2 部分区县显示为灰色现象地图出来了但有几个区县是默认灰色tooltip 也显示不出数据。原因是数据里的名称和 GeoJSON 的properties.name对不上。解决方法是把 GeoJSON 里所有name打印出来和业务数据的区县字段做一次 diff差异项在数据侧修正。重庆有几个容易出问题的名称“两江新区”不是标准行政区划“万盛经开区”在部分数据源里归在綦江这些要在需求阶段就和业务方确认归属。4.3 地图变形或位置偏移现象地图形状看起来被压扁或者拉伸。原因是 Echarts 默认按容器宽高比渲染如果容器宽高比和地图实际比例差太多就会变形。解决方法是给geo或series-map设置aspectScale默认 0.75重庆的地图可以调到 0.85 左右更接近真实比例。另外如果数据源坐标系不统一比如部分要素是 GCJ02 部分是 WGS84会出现区域错位这种只能回到数据源层面统一。4.4 大数据量下渲染卡顿现象区县数量多或者叠加了散点、飞线后缩放拖拽明显掉帧。原因是roam开启后每次交互都触发重绘加上label.show全开渲染压力大。优化手段关闭非必要的label用emphasis按需显示散点用large: true开启大数据模式如果还卡把地图渲染成静态图片作为底图交互层用 canvas 单独画。重庆主城区县面积小、数量密标签重叠严重建议默认不显示标签。4.5 下钻后返回上一级数据错乱现象下钻到区县再返回地图数据没变或者颜色映射错乱。原因是setOption默认是合并模式上一次的visualMap和series配置残留。解决方法是切换地图时用chart.setOption(option, true)强制不合并或者每次切换前chart.clear()。但clear会清掉事件监听需要重新绑定所以更推荐notMerge参数。另外下钻时visualMap的min/max要按新地图的数据范围重新计算否则颜色全挤在一档。5. 进阶技巧让重庆地图在大屏里真正好用前面四章把从数据到渲染的主链路走通了这一章讲几个让地图从“能用”到“好用”的技巧。第一个是坐标系的统一。如果地图上要叠加散点表示门店位置散点的经纬度必须和 GeoJSON 同一坐标系。公开数据源多为 WGS84而业务系统里的地址解析结果可能是 GCJ02两者直接混用会有几百米偏移在区县级别看不出来放大到街道就露馅。常见做法是统一转成 GCJ02转换算法网上有成熟实现但要注意转换是非线性的不能简单加偏移量。第二个是性能兜底。大屏通常 7x24 运行内存泄漏是隐形杀手。每次下钻registerMap都会新增一份地图数据长时间运行内存会涨。我的习惯是限制下钻层级为两级并且在返回时手动把不再使用的地图数据置空虽然 Echarts 内部还有引用但至少业务侧不再持有。另外setInterval轮询数据更新时如果地图没变化只更新series.data不要整个setOption重设前者只触发数据重绘后者会重建整个图表。第三个是视觉编码的克制。很多大屏喜欢在地图上堆特效飞线、涟漪、光晕全上结果业务方根本看不清哪个区县指标高。我的经验是颜色映射只用一个visualMap不要同时用itemStyle.areaColor和visualMap两套颜色逻辑会互相覆盖标签只在 hover 时显示飞线数量控制在 10 条以内多了就是一团乱麻。重庆的地形是山地主城和区县的数据分布往往极不均衡用分段型visualMap比连续型更能突出差异。最后一个技巧关于数据更新。如果地图数据是实时刷新的series.data的更新频率建议控制在 5 秒以上太快人眼也反应不过来还增加渲染压力。更新时用chart.setOption({ series: [{ data: newData }] })这种局部更新Echarts 会做 diff比全量setOption快很多。验证更新是否生效可以在setOption后读chart.getOption().series[0].data对比比肉眼看颜色靠谱。这套方案我在几个大屏项目里反复用过最大的教训是地图可视化的难点从来不在 Echarts 配置而在数据准备和名称对齐。前期花半小时把 GeoJSON 的name字段和业务数据的区县字段做一次完整 diff能省掉后面几小时的调试。希望帮到你。本文还有配套的精品资源点击获取