企业官网建设流程全解析

1. 先把需求拆明白：geo 地图上的"动态选中"到底难在哪

做 echarts geo 地图的朋友大概都有过这样的经历：地图铺出来了，颜色也调好了，产品经理过来说"点击左边列表里的省份，右边地图上对应的区域要高亮，而且要高亮成那种一眼就能看出来的橙色"。听起来是不是特别简单？可真动手的时候你会发现，echarts geo 地图动态 select 指定高亮显示区域这件事，涉及到组件选择、状态模型、事件回传、Action 派发四个环节，任何一个环节没接上，表现就是"点了没反应"或者"高亮了但取消不掉"。

我先说结论：ECharts 里的"选中高亮"不是靠你自己改颜色实现的，而是靠内置的 select 状态 + selectedMode 开关 + dispatchAction 派发三件套。很多人第一反应是拿到点击事件后用setOption把某个区域的itemStyle.areaColor改掉，这个思路能跑，但代价很大——每次都要重建配置对象，地图会闪一下，而且和其他状态（hover 强调、默认着色、数据映射）互相打架。用原生 select 机制，这些麻烦全都省了。

这篇文章适合三类人：一是刚接手数据可视化大屏、第一次用 geo 组件的前端同学；二是被"联动高亮"需求反复折磨、想找个稳定写法的中级开发；三是想把地图交互封装成公共组件的团队。我会把 geo 组件和 series-map 的 select 差异讲透，给出可以直接抄的动态高亮代码，再把我自己踩过的坑一条条列出来。

顺手说个搜索上的小尴尬：你在搜索引擎里敲 "echarts select"，一半结果会跳到 SQL 的select语句、insert into select、select top 1000 * from ...这类内容上去，想找前端的东西得加上 "echarts geo"、"selectedMode" 或者 "dispatchAction" 才有准头。这个我在最开始查资料的时候浪费了不少时间，所以后面的关键词我都会写得尽量具体。

1.1 静态着色和动态高亮，本质是两套东西

先区分两个容易被混为一谈的东西。静态着色是"这个省的数据是多少，我就给它对应色阶上的颜色"，一般交给visualMap或者直接在data里写itemStyle，它的特点是颜色由数据决定，重新渲染才变。动态高亮是"用户此刻关注哪个区域"，颜色由交互状态决定，跟数值没关系，随时能开随时能关，而且同一时刻可能有多个区域同时处于选中态。

这两套逻辑如果是同一个区域，优先级怎么排？我的经验是：select 状态的样式优先级高于数据着色。也就是说一个省哪怕数据色是浅蓝，只要你把它选中了，它就会显示成 select 里定义的橙色。所以设计稿里那个"高亮色"最好和数据色阶拉开明显差距，不然在高值区域上根本看不出来。

还有一点容易忽略：高亮是有"记忆"的。用户点了 A 省，A 省亮着；这时候如果外部列表切换了分类，重新走一遍数据渲染，A 省的高亮是保留还是清掉？这个必须和产品确认。默认情况下，如果你只是更新数据而没有重置状态，选中态是留着的。想要干净切换，就得主动派发一次取消选中的 Action，这个后面会写。

1.2 geo 组件和 series-map，到底该用哪个来做高亮

这是最多人卡住的地方。简单粗暴的判断标准：

• 你的地图上还要叠散点、飞线、涟漪点，或者要把地图当成一个坐标系来用 —— 选geo组件；
• 你的地图就是一张分区域着色的图，每个区域带数值、带 tooltip，不需要额外的坐标系 —— 选series-map；
• 两个都要 —— 可以同时存在，但要知道高亮作用于谁。

我见过不少人把series-map和geo叠在一起用，然后发现点击地图只有一层高亮，另一层纹丝不动，就开始怀疑人生。原因很简单：它们是两个独立的状态机。series 上的选中状态归 series 管，geo 上的选中状态归 geo 管。你要么统一用一层承载交互，要么在两边的 select 事件里互相派发 Action 做同步。

就"动态 select 指定高亮显示区域"这个标题来说，如果你的来源是外部程序控制的（比如点列表、定时轮播、URL 参数带过来的区域名），那么用哪一层承载高亮都行，关键是你派发的 Action 类型要和图层对上。geo 用geoSelect，series-map 用select，一字之差，用错了就是毫无反应，而且控制台连报错都不给你——这是最坑的地方。

2. select 机制原理解析：ECharts 怎么记住"谁被选中了"

搞清楚原理，后面所有问题都能自己推出来。ECharts 的图形元素（或者说数据项）有一套状态机，理解它比背 API 有用得多。

2.1 四层状态：normal、emphasis、select、blur 的关系

可以把它想成一个人的四种表情：

• normal：平时什么样，没被任何人碰；
• emphasis：鼠标悬停上去的瞬间表现，俗称 hover 态；
• select：被"选中"之后的表现，是持久态，鼠标移开也不会掉；
• blur：当有别的项被选中或高亮时，其他项"被冷落"的样子。

默认配置里，emphasis是有样式的（ECharts 会给一点加深效果），select在没开启selectedMode之前根本不存在。这就是"我配了select.itemStyle却什么也没发生"的头号原因——不是样式写错了，是这个状态压根没被激活。

四层状态的样式是分开配的，写法上：

{ itemStyle: { areaColor: '#e8f3ff' }, // normal，基础态 emphasis: { // hover 态 itemStyle: { areaColor: '#c6e2ff' }, label: { show: true, color: '#1a1a1a' } }, select: { // 选中态，需要 selectedMode 打开 itemStyle: { areaColor: '#ff7a45' }, label: { show: true, color: '#ffffff' } }, blur: { // 被冷落态 itemStyle: { opacity: 0.5 }, label: { show: false } }, selectedMode: 'multiple' // 关键开关 }

注意select.label里的show: true。很多人只写了color，发现区域亮了但名字没出来，因为 label 默认是不显示的，select状态不会帮你继承emphasis里的配置。状态样式之间是平级覆盖，不是继承关系，这一点务必记住。

另外blur态在selectedMode为'single'或'multiple'时会有明显效果：选中 A 省之后，其他省进入 blur，视觉上焦点非常集中。做汇报大屏的时候我经常故意把 blur 的 opacity 压到 0.4 左右，效果比单纯点亮一个省好得多。

2.2 geo 与 series 的 select 配置位置差异

这张表建议直接存书签。我见过一次事故就是有人把geoSelect写成了select，seriesIndex也写了，控制台不报错，但是高亮永远不动，查了两小时。因为select这个 Action 在派发时如果找不到对应的 series（比如地图其实挂在 geo 上），ECharts 会静默忽略。

还有一个细节：series-map支持在data里直接声明selected: true来做初始高亮，这个非常方便，页面一加载就带着状态。而 geo 组件没有这个声明式入口，只能用chart.dispatchAction在setOption之后补一刀。geo 的变通办法是通过regions预设样式，但那是样式不是状态，从geoselectchanged事件里拿到的选中列表是不认它的——所以如果你需要状态一致性，老老实实派发 Action。

2.3 事件回传和 Action 派发，构成一个闭环

ECharts 的交互是双向的，理解这个闭环，联动就顺理成章：

上行（用户操作 → 你的代码）：用户点击区域，ECharts 内部状态变更，然后抛事件。geo 抛geoselectchanged，事件对象里有name（当前操作区域）和selected（当前所有被选中项的数组，元素是{name, selected}结构）。注意：selected返回的是全量选中列表，不是增量的，单选的场景它也是一个长度为 1 的数组，别被selected[0]之外还有别的项给骗了。

下行（你的代码 → 图表）：你调dispatchAction，图表按指令改状态并重绘。常用的三种：

// 选中某个区域（geo 图层） chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name: '广东' }); // 取消选中（name 支持数组，可批量） chart.dispatchAction({ type: 'geoUnSelect', geoIndex: 0, name: ['广东', '浙江'] }); // 切换选中（选中则取消，未选中则选中） chart.dispatchAction({ type: 'geoToggleSelect', geoIndex: 0, name: '江苏' });

这个闭环有个容易出问题的点：事件回传触发你的代码，你的代码又派发 Action，Action 又触发事件。如果不加控制，就会形成循环。典型场景是"列表 ↔ 地图"双向联动：点地图 → 事件里更新列表选中项 → 列表组件 onChange 又去调地图geoSelect→ 又触发事件……表现出来就是闪烁、卡顿，甚至栈溢出。解决办法是在派发前打个标记位（比如isSyncing = true），或者在一次同步后短暂忽略事件，具体写法在第 4 章。

注意：派发geoSelect时如果selectedMode是'single'，你传入两个 name 也只会生效最后一个，并且在同一次派发里先选后取消，最终只留一个。批量高亮一定要用'multiple'。

3. 手把手搭一个能跑的最小工程

原理讲完，直接上代码。这一节我给一个完整可运行的页面骨架，你复制到一个 HTML 文件里，改一下地图数据的引用路径就能看到效果。

3.1 地图数据准备与注册

ECharts 5 之后，官方包不再内置地图边界数据，需要你自己注册。数据来源一般有两种：项目里已有的 GeoJSON 文件，或者团队内部数据平台提供的行政区划边界。不管从哪来，使用前确认数据精度和来源满足你们项目的要求，别随便从网上抓一份五年前的数据就用，边界对不上很难看。

注册代码很简单：

import * as echarts from 'echarts'; // 假设你本地有一份 china.json import chinaGeoJson from './geo/china.json'; echarts.registerMap('china', chinaGeoJson);

注册名'china'是自定义的，后面配置里map: 'china'要对上。同一个页面要显示多张地图（比如中国 + 某省下钻），就注册多个名字，'china'、'guangdong'各注册一份，互不干扰。

如果 GeoJSON 是通过接口异步拉的，注册时机要注意：必须在setOption之前完成注册，否则图表会报Map china not exists。异步场景我一般这样写：

async function init() { const geojson = await fetch('/api/geo/china').then(r => r.json()); echarts.registerMap('china', geojson); chart.setOption(myOption); }

别用setTimeout猜时间，异步就用await，这个偷懒不值得。

3.2 完整配置项逐行拆解

下面这份配置是"geo 组件 + 散点 + 单/多选高亮"的组合，注释我写得比较细：

const option = { tooltip: { trigger: 'item', // tooltip 自动换行的小技巧，后面第 5 章细说 formatter: function (p) { return p.name + '<br/>状态：' + (p.selected ? '已选中' : '未选中'); } }, geo: { map: 'china', roam: true, // 允许缩放拖拽 zoom: 1.15, selectedMode: 'multiple', // 关键：打开多选，单选写 'single' label: { show: false, fontSize: 11 }, itemStyle: { areaColor: '#e8f3ff', borderColor: '#9dc4e8', borderWidth: 1 }, emphasis: { label: { show: true, color: '#1a1a1a' }, itemStyle: { areaColor: '#c6e2ff' } }, select: { label: { show: true, color: '#ffffff' }, itemStyle: { areaColor: '#ff7a45', borderColor: '#ff4d19', borderWidth: 1.5 } }, blur: { itemStyle: { opacity: 0.45 }, label: { show: false } }, // 针对个别区域单独覆盖 select 样式 regions: [ { name: '广东', select: { itemStyle: { areaColor: '#2f8feb' }, label: { show: true, color: '#fff' } } } ] }, series: [ { type: 'effectScatter', coordinateSystem: 'geo', // 挂在 geo 上 data: [ { name: '广州', value: [113.27, 23.13, 100] } ], symbolSize: 8 } ] };

几处值得说的：

selectedMode放在geo里，不是放顶层。写在顶层不起作用，这是配置层级的常见错误。

regions里可以给特定区域单独设 select 样式，但注意这里只覆盖样式，不改变状态。我上面的例子里广东是蓝色高亮，其他省是橙色，这种"重点区域用专属色"的做法在汇报场景里很常见。

blur的 opacity 建议不要低于 0.4，再低就是一片糊，用户看不出地图轮廓了，数据感知会断掉。

3.3 用 dispatchAction 动态点亮指定区域

页面加载完，你想默认高亮两三个省，就写：

chart.setOption(option); // 注意：必须在 setOption 之后，图表实例已经渲染完成 chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name: ['广东', '江苏'] });

如果用的是series-map，写法换成：

chart.dispatchAction({ type: 'select', seriesIndex: 0, name: ['广东', '江苏'] });

这里有个实操心得：name必须和 GeoJSON 里properties.name的值逐字符一致。我遇到过一次，GeoJSON 里写的是"广西壮族自治区"，代码里传的是"广西"，结果派发下去毫无反应。排查办法是把地图数据里的 name 全遍历打印一遍，跟你的业务数据做一次比对，对不上的做个映射表：

function normalizeName(raw) { const map = { '广西': '广西壮族自治区', '内蒙古': '内蒙古自治区', '新疆': '新疆维吾尔自治区' }; return map[raw] || raw; }

这几十行映射代码，能省掉你未来几小时的困惑，非常值得。

4. 真实业务里的四种动态高亮场景

最小例子跑通之后，真正的挑战在业务联动的细节上。下面四种场景我都在项目里落地过，写法经过多轮迭代，直接拿走改。

4.1 外部列表与地图双向联动，重点是防循环

需求长这样：左边一个省份列表，点某一项，地图上对应区域高亮；反过来点地图，列表对应项也要选中。麻烦在于两边都会触发对方的回调。

我的做法是加一个同步锁，只允许一个方向在某一时刻生效：

let syncing = false; // 地图 → 列表 chart.on('geoselectchanged', function (params) { if (syncing) return; syncing = true; const selectedNames = (params.selected || []) .filter(item => item.selected) .map(item => item.name); listComponent.setValue(selectedNames); // 更新你的列表 syncing = false; }); // 列表 → 地图 listComponent.onChange(function (names) { if (syncing) return; syncing = true; chart.dispatchAction({ type: 'geoUnSelect', geoIndex: 0, name: 'all' }); if (names.length) { chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name: names }); } syncing = false; });

geoUnSelect的 name 传'all'可以清空全部选中态，这是官方支持的写法，比记住旧列表逐个取消靠谱得多。别自己维护"上一次选中了谁"的数组，迟早会漏。

4.2 自动轮播高亮，别用 setInterval 硬怼

大屏常见需求：每 3 秒自动高亮下一个省，循环播放。我见过不少人用setInterval+ 计数器派发 Action，能跑，但有三个问题：切到后台标签页时定时器继续空转；用户手动点击时轮播和手点打架；长时间运行后如果某次派发失败，状态会错位。

改进方案是在每一轮只依赖当前真实的选中列表来算下一个，而不是靠内部计数器：

const allNames = ['北京', '上海', '广东', '江苏', '浙江', '四川']; let timer = null; function playNext() { const current = chart.getOption().geo[0].selectedMap || {}; const selected = allNames.filter(n => current[n]); const currentName = selected[0]; const idx = allNames.indexOf(currentName); const nextName = allNames[(idx + 1) % allNames.length]; chart.dispatchAction({ type: 'geoUnSelect', geoIndex: 0, name: 'all' }); chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name: nextName }); } function start() { stop(); timer = setInterval(playNext, 3000); playNext(); } function stop() { if (timer) { clearInterval(timer); timer = null; } }

注意这里用了chart.getOption().geo[0].selectedMap来读当前状态，这是判断"谁被选中了"最可靠的方式，比自己在外面记一份更稳。另外记得在页面隐藏时stop()，切回来再start()，用visibilitychange监听就行，能省不少无谓的重绘。

用户手动点击时怎么处理？我的做法是监听geoselectchanged，如果事件来自鼠标（params.event存在），就临时暂停轮播 10 秒再恢复，体验上不会"我刚点完就被切走"。

4.3 多选、全选与批量取消的状态同步

多选场景的坑主要在"全选"上。全选不能一个个派发geoToggleSelect，那样每次都要重绘一次，40 个区域就是 40 次渲染，卡顿肉眼可见。正确的做法是一次派发传数组：

// 全选 chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name: allRegionNames }); // 全不选 chart.dispatchAction({ type: 'geoUnSelect', geoIndex: 0, name: 'all' });

批量派发时有个实测结论：一次传 60 个 name 和传 6 个 name，渲染耗时差距大概在 3~4 倍，但仍然是毫秒级，完全可接受。真正慢的是"派发 60 次"这种写法，千万不要。

还有个细节：geoSelect派发完成后会触发一次geoselectchanged，事件里的selected是全量列表。你如果在这个回调里去更新侧边的统计数字（比如"已选 12 个区域，总 GDP 是多少"），一定要用params.selected.filter(i => i.selected)过滤，因为没有被选中的项也会出现在数组里，只是selected: false。这个结构我第一次见的时候也被绕了一下。

4.4 和飞线、散点的联动高亮

地图上有飞线的时候，高亮一个区域，往往希望对应的飞线也亮起来，其他的暗下去。ECharts 的lines系列没有 select 状态（它不支持selectedMode），所以这条路走不通，得用换数据的方式：

function highlightRegion(name) { const relatedLines = lineData.filter(l => l.from === name || l.to === name); chart.setOption({ series: [{ type: 'lines', data: relatedLines }] }); }

这是setOption的合并更新，只影响lines系列，地图的选中态不会丢。飞线的视觉强化我一般靠加大lineStyle.width和提升opacity来对比，而不是改颜色，因为改颜色在小屏幕上区分度很低。

5. 踩坑记录：高亮不生效的八个典型原因

这一节是我实际遇到问题的汇总，按出现频率从高到低排。遇到"点了没反应"，按表从上往下查，基本五分钟内能定位。

除此之外还有几个更隐蔽的：

版本差异。ECharts 5.1.0 才开始支持geo组件的selectedMode，更早的版本只有series-map支持。如果你在 5.0 或者 4.x 上折腾 geo 的高亮，那真的是白费功夫，先升版本。项目里如果用的是低版本 CDN，而且短期内动不了，那就把交互层换成series-map来实现，别硬啃。

同一页面多实例串扰。一个页面上有两个地图实例，事件监听写在了echarts全局对象上（而不是实例上），会导致 A 图的操作触发 B 图的逻辑。监听一定要挂在实例上：chart.on(...)，不是echarts.on(...)。

容器尺寸变化后错位。这个和第 6 章相关，地图容器如果用了 rem 或者百分比，窗口变化后地图没重绘，高亮的区域位置和鼠标点击位置会错开，表现为"我点的是广东，亮的是江苏"。这不是 select 的问题，是没调resize()。

tooltip 自动换行没生效。地图上的 tooltip 内容稍微长一点就撑成一条横线，很丑。ECharts 的 tooltip 不会自动换行，需要在formatter里手动插换行，或者给extraCssText加white-space: normal; word-break: break-all;并且限制max-width：

tooltip: { trigger: 'item', extraCssText: 'max-width: 260px; white-space: normal; word-break: break-all;' }

这几行加完，tooltip 的观感提升非常明显，尤其是区域名带全称的时候。

注意：排查 select 相关问题，控制台基本不会给你任何报错。所以高效的办法是在派发前后各打一次日志，把chart.getOption().geo[0].selectedMap打出来。这个对象能直接告诉你"状态到底有没有进去"，比猜快一百倍。

6. 工程化打磨：性能、缩放与代码复用

最后聊点把功能做稳做久的经验。这部分不是必答题，但做完之后，后面维护你的人会感谢你。

6.1 容器缩放与 pxtorem 失效

有个经典组合拳问题：项目里用pxtorem做移动端适配，结果发现它对 ECharts完全不起作用，地图该多大还多大。原因很简单，ECharts 把画布尺寸算好之后画在canvas里，后续 CSS 层面的根字号变化，图表是感知不到的。解决办法只有一个：在容器尺寸变化后主动调用chart.resize()。

const wrap = document.getElementById('map-wrap'); const ro = new ResizeObserver(() => { chart.resize(); }); ro.observe(wrap); // 组件销毁时记得断开 // ro.disconnect();

用ResizeObserver比监听window.resize好，因为它能捕捉到父容器因为布局变化导致的尺寸改变，比如侧边栏折叠、Tab 切换显示。我用window.resize的时候就被侧边栏折叠坑过，折叠后地图右半边是白的。

6.2 高频派发的性能处理

轮播、鼠标滑过、拖拽联动这些场景里，dispatchAction可能被触发得非常频繁。虽然单次开销不大，但叠加起来还是会影响流畅度。我的处理原则是：

第一，能不派发就不派发。判断状态是否真的要变，比如用户点了一个已经选中的区域，如果你用的是geoSelect，ECharts 内部还是会走一遍状态比对，不如在业务层先查一下selectedMap，状态没变直接 return。

第二，合并同帧内的多次操作。用requestAnimationFrame做一次批量提交：

let pending = null; function scheduleSelect(name) { if (pending) cancelAnimationFrame(pending); pending = requestAnimationFrame(() => { chart.dispatchAction({ type: 'geoUnSelect', geoIndex: 0, name: 'all' }); chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name }); pending = null; }); }

第三，避免setOption和高亮混用。如果你在一次交互里既要更新数据又要改高亮，先setOption再派发 Action，顺序反了的话，setOption有可能会把选中状态覆盖掉，表现就是"亮了一下又灭了"。

6.3 封成一个可复用的高亮控制器

同一个项目里地图可能出现在三四个页面，每个页面都复制一遍上面这些逻辑，改需求的时候你会疯。我一般封一个不到 100 行的小控制器，职责很清晰：只管高亮，不管业务数据。

class GeoHighlighter { constructor(chart, options = {}) { this.chart = chart; this.geoIndex = options.geoIndex ?? 0; this.mode = options.mode ?? 'geo'; // 'geo' | 'series' this.syncing = false; } get actionTypes() { return this.mode === 'geo' ? { select: 'geoSelect', unselect: 'geoUnSelect', toggle: 'geoToggleSelect', indexKey: 'geoIndex' } : { select: 'select', unselect: 'unselect', toggle: 'toggleSelect', indexKey: 'seriesIndex' }; } select(names) { const a = this.actionTypes; const params = { type: a.select, name: names }; params[a.indexKey] = this.geoIndex; this.syncing = true; this.chart.dispatchAction(params); this.syncing = false; } clear() { const a = this.actionTypes; const params = { type: a.unselect, name: 'all' }; params[a.indexKey] = this.geoIndex; this.chart.dispatchAction(params); } replace(names) { this.clear(); if (names && names.length) this.select(names); } getSelected() { const opt = this.chart.getOption(); const holder = this.mode === 'geo' ? opt.geo[this.geoIndex] : opt.series[this.geoIndex]; const map = holder.selectedMap || {}; return Object.keys(map).filter(k => map[k]); } }

有了它，业务页面里就三行：const hl = new GeoHighlighter(chart); hl.replace(['广东'])。切换模式只要改一个mode参数，geo和series都能用，前面表格里那些差异全被封装掉了。

收尾分享一个我自己反复验证过的小习惯：每次接入新地图数据，先写个临时的脚本把 GeoJSON 里的 name 全部列出来，跟业务侧的字典做一次 diff 打印。这一次性花掉的五分钟，能挡掉后面 80% 的"高亮不生效"问题。另外把那句name: 'all'的清空写法记牢，我见过太多人费劲维护选中历史数组，最后都是自己给自己找麻烦。地图这东西看着花哨，真正难的地方全在状态同步上，把状态当唯一真相源，代码自然就简单了。