Echarts 引用
实现 3D 凸起必须装 echarts-gl：
npm install echarts-gl@1 --save
ECharts 实现 PC 端大屏地图：完整功能清单 + 详细说明 + 适用场景
ECharts 是国内大屏地图最常用、最简单、性价比最高的方案，零 GIS 基础也能快速开发，完美适配政府 / 企业 / 运营 / 监控类 PC 大屏。
一、ECharts 地图 核心基础功能
1. 全国 / 省 / 市 / 区县 行政地图展示
支持中国地图、34 省、所有地级市、区县地图
支持自定义边界（可导入 GeoJSON）
支持地图底色、边框色、区域高亮色完全自定义
支持隐藏 / 显示地图文字标注
2. 地图 缩放、平移、拖拽
PC 端鼠标滚轮缩放
鼠标拖拽平移
支持设置缩放范围（防止缩太小 / 太大）
3. 地图 区域选中、hover 高亮
鼠标移入省份 / 城市自动高亮
支持点击选中区域
支持多区域选中
可自定义高亮颜色、透明度
4. 多地图 联动下钻（省→市→区县）
大屏最常用功能：
点击全国地图某省 → 自动切换为该省地图
点击某市 → 自动切换为该市区县地图
支持返回上一级
二、ECharts 地图 所有可视化图表类型（超级全）
1. 散点图（点位标记）
展示设备、门店、传感器、点位
支持自定义图标、图片、大小、颜色
支持按数值自动映射大小 / 颜色
支持海量点渲染（万级不卡）
2. 气泡图
数值越大，气泡越大 / 颜色越深
适合展示：人口、GDP、销量、活跃度、监控量
3. 热力图（热度分布）
颜色深浅表示密度 / 数值
适合：人流热力、监控热度、区域强度、信号强度
4. 航线图 / 流向图
两点之间画曲线 / 直线
适合：物流路线、迁徙图、资金流向、网络连接、航班路线
5. 迁徙图（飞线图）
带动画的流动飞线
适合：人口迁徙、外卖配送、电信信号、数据传输
6. 路径图 / 轨迹回放
车辆 / 人员 / 设备移动轨迹
支持动态播放、速度控制
适合：监控大屏、物流大屏、车辆调度
7. 网格图 / 区块图
按经纬度网格渲染强度
适合：信号覆盖、区域统计
8. 饼图 / 柱状图 嵌入地图
在地图点位上直接显示小饼图、小柱状图
适合：多维度数据同时展示（如一个城市的多指标占比）
9. 区域染色地图（分级着色）
按数值给省份 / 城市染色
经典大屏：GDP、销量、疫情分布、用电量
三、ECharts 地图 3D 功能（echarts-gl）
ECharts 搭配 echarts-gl 插件可实现 PC 大屏 3D 地图，效果非常炫酷：
1. 3D 地球（ Globe ）
3D 球形地球
支持飞线、散点、区域高亮
适合：全球业务大屏、国际监控大屏
2. 3D 地图（棱柱地图）
城市 / 区域变成 3D 柱子
高度 = 数据大小
视觉冲击力极强
3. 3D 散点、3D 飞线、3D 热力
3D 空间点位
3D 立体飞线流动效果
4. 3D 视角控制
旋转、俯仰、缩放
支持自动旋转动画
四、ECharts 地图 强大交互功能
PC 大屏必须的交互全部支持：
1. 鼠标 hover 显示提示框（tooltip）
自动显示名称、数值、自定义信息
样式 100% 自定义（背景、文字颜色、边框）
2. 点击事件
点击省份 / 城市 / 点位触发事件
可跳转、弹窗、下钻、查询接口
3. 图例控制
点击图例显示 / 隐藏图层
支持多图层切换
4. 地图图层开关
同时显示：散点 + 热力 + 飞线 + 区域
可控制显隐
5. 动态刷新
实时更新点位、热力、数值
适合监控大屏
五、ECharts 地图 多图层叠加能力（超级实用）
ECharts 支持无限图层叠加，一个地图里可以同时放：
1、区域染色地图
2、散点图
3、 热力图
4、飞线图
5、轨迹图
6、 3D 棱柱
大屏行业叫 "一底多叠"，是标准架构。
六、ECharts 地图 数据驱动能力
1、支持 JSON 数据直接渲染
2、支持异步加载（AJAX/axios 请求后端接口）
3、支持动态更新数据（实时大屏）
4、支持视觉映射：
数值 → 颜色
数值 → 大小
数值 → 透明度
七、ECharts 地图 视觉样式自定义（100% 定制）
满足所有大屏 UI 设计需求：
1、 地图背景色
2、 区域边框
3、文字颜色 / 大小 / 字体
4、高亮颜色
5、渐变颜色
6、图标 / 图片自定义
7、 飞线颜色、动画速度
8、3D 光照、材质、透明度
八、ECharts 地图 PC 大屏专属能力
1. 全屏展示
支持浏览器全屏
自适应 1080P / 2K / 4K 大屏
2. 响应式适配
窗口大小变化自动适配
3. 无闪烁刷新
数据更新不卡顿、不闪烁
4. 高性能
1 万以内散点流畅运行
热力图、飞线均做过性能优化
九、ECharts 地图 不能做什么（避坑）
为了让你不踩坑，必须明确：
1、❌ 不能做：
真实卫星地图、街道地图（百度 / 高德那种瓦片地图）
复杂 GIS 空间分析（缓冲区、叠加分析）
高精度 GPS 导航
海量点（10 万 +）高性能渲染
2、✅ 能做：
所有行政区域大屏
所有数据可视化大屏
所有政府 / 企业 / 运营 / 监控 / 智慧城市类地图
十、总结
ECharts 可以实现 PC 大屏地图 95% 的需求：
- 中国地图 / 省 / 市 / 区县展示
- 区域染色、散点、气泡、热力
- 飞线、迁徙、轨迹、航线
- 3D 地图、3D 地球
- 下钻、联动、点击、提示框
- 自定义样式、多图层、实时刷新
- 完美适配 PC 大屏、4K 屏
总结：ECharts地图在大屏场景的核心优势
- 灵活性：支持内置地图与自定义地图，适配多种地理范围；
- 可视化能力：热力图、区域地图、轨迹动画等满足复杂数据展示需求；
- 交互性：数据联动、钻取、实时更新，支持多维度分析；
- 大屏适配：全屏模式、响应式设计，优化大屏显示效果。
Echarts地图各配置项详解
html
option: {
backgroundColor: "#fff", // 画布颜色
//工具提示
tooltip: {
backgroundColor: "rgba(255,255,255,1)",
borderColor: "#333",
// 提示文字内容及样式
formatter: function (params) {
console.log("2323", params.data);
var result = "";
result += params.data.name + "<br>";
result += "<span>" + params.data.address + "</span><br>";
result += "<span>" + params.data.phone + "</span><br>";
result += "<span>" + params.data.workRule + "</span>";
return result;
},
},
//地理坐标系组件用于地图的绘制
geo: [
{
map: "hebei", // 使用 registerMap 注册的地图名称 注册可用的地图，只在 geo 组件或者 map 图表类型中使用
aspectScale: 1, // 这个参数用于 scale 地图的长宽比
roam: false, // 是否允许缩放
zoom: 1.1, // 当前视角的缩放比例
center: [116.692385, 39.198286], // 河北省地图中心点坐标
layoutSize: "90%", //地图的大小,支持相对于屏幕宽高的百分比或者绝对的像素大小。
layoutCenter: ["50%", "50%"], //地图中心在屏幕中的位置
label: {
show: true, // 是否地图显示区域的文字，各省市的名字
color: "#fff",
fontSize:14,// 省市名称文字大小
},
itemStyle: {
// 区域颜色
areaColor: {
type: "radial", //渐变方式
x: 0.7,
y: 0.5,
r: 0.4,
// 修改地图颜色 渐变效果
colorStops: [
{
offset: 0,
color: "#0160AD", // 0% 处的颜色
},
{
offset: 1,
color: "#0160AD", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
emphasis: {
areaColor: "blue", // 鼠标移入区域背景颜色
borderWidth: 0,
},
borderColor: "#FFFFFF",
borderWidth: 1,
},
//高亮状态下的多边形和标签样式。
emphasis: {
itemStyle: {
areaColor: "#0160AD",
},
label: {
show: 1,
color: "#fff",
},
},
// zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
zlevel: 3,
},
],
// 图表系列信息
series: [
{
type: "scatter", // 散点（气泡）图,有多个type可以选择
coordinateSystem: "geo", // 坐标系 geo使用地理坐标系
symbolSize:16, // 闪烁点的大小
zlevel: 10, // 这里是关键，一定要放在 series中，显示层级，
// 是否开启高亮后的放大效果。从 5.3.2 版本开始支持 number，用以设置高亮放大倍数，默认放大 1.1 倍
emphasis: {
scale: true,
},
symbol:'image://' + logo, // 标记的图形 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI
itemStyle: {
// 点的颜色可以根据 params 参数里面的值去设定不通的颜色
color: function () {
return "white";
},
// shadowBlur: 10,
// shadowColor: "#333", //图形阴影
},
data: [], // 点的数据，包含经纬度
},
],
},ECharts 图表系列类型 (series.type) 对照表
ECharts 通过 series.type 属性定义图表类型，以下为所有内置系列类型及其释义的快速参考表格：
| 系列类型 (series.type) | 释义 |
|---|---|
line |
折线图 / 面积图 |
bar |
柱状图 |
pie |
饼图 |
scatter |
散点（气泡）图 |
effectScatter |
带有涟漪特效动画的散点（气泡）图 |
radar |
雷达图 |
tree |
树图 |
treemap |
『树状数据』的可视化形式 |
sunburst |
旭日图（Sunburst） |
boxplot |
『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』 |
candlestick |
K线图 |
heatmap |
热力图 |
map |
地图 |
parallel |
平行坐标系 |
lines |
路径图 |
graph |
用于展现节点以及节点之间的关系数据 |
sankey |
桑基图 |
funnel |
漏斗图 |
gauge |
仪表盘 |
pictorialBar |
象形柱图 |
themeRiver |
主题河流图 |
custom |
自定义系列 |
提示 ：在地图可视化中，
scatter、effectScatter、lines、heatmap等类型常与coordinateSystem: 'geo'结合使用，以在地理坐标系上绘制数据。