ECharts 3D地图自定义区域颜色解决方案
本文介绍在Vue项目中如何使用ECharts实现3D地图中特定城市的高亮显示。通过修改geo3D配置中的regions参数，调整itemStyle.color属性，可解决常规geo配置在3D模式下无效的问题，实现郑州、南阳等城市的自定义颜色展示。
问题
根据项目需求，我们需要在省级地图中对部分城市进行高亮显示，并使用不同颜色区分。
延伸
首先介绍地图的展示方式：
- 项目采用Vue框架结合ECharts进行开发。
- 地图渲染使用了geo3D和scatter3D组件。
其实现过程相对简单。
第一步是初始化ECharts实例。
let echartsMap = this.$echarts.init(this.$refs.echartsMap);
第二步是注册地图数据。
this.$echarts.registerMap('河南', dataGeoLocation);
//后面的dataGeoLocation是我们下载下载的地图json文件然后引入到当前
//组件中进行使用的，前面的河南则是我们要注册的地图
第三步是设置option配置对象。
具体配置需根据项目需求调整，官方文档中有详细说明。
this.echartsDataMap = {
visualMap: {
min: 0,
max: 500,
show: false,
inRange: {
color: ['#eac736', '#6EAFE3'].reverse()
},
},
globeRadius: 100,
globeOuterRadius: 100,
geo3D: {
map: mapName,
viewControl: {
center: [0, 0, 0],
alpha: 100,//上下旋转角度
beta: 10,//左右旋转角度
animation: true,//是否动画显示
animationDurationUpdate: 1000,//动画时间
distance: 130,//视角到主题距离
minBeta: -9999,//最小（左）旋转度数
maxBeta: 9999,//最多（右）旋转角度
autoRotate: false,
autoRotateDirection: 'cw',
autoRotateSpeed: 10,
},
splitArea:{
areaStyle:{
color:'red',
}
},
light: {
main: {
intensity: 1.2,
// color: 'transparent',
color: '#0D3867',
shadowQuality: 'ultra',
shadow: true,
alpha: 150,
beta: 200
},
ambient: {
intensity: 1,//环境光强度
},
ambientCubemap: {
diffuseIntensity: 1,
texture: ''
}
},
groundPlane: {
show: false
},
postEffect: {
enable: false
},
itemStyle: {
color: '#175096',
borderColor: 'rgb(62,215,213)',
opacity: 0.8,//透明度
borderWidth: 1
},
label: {
show: false
},
emphasis: {
label: {
show: false
},
itemStyle: {
}
},
silent: false, // 不响应和触发鼠标事件
},
series: [
{
type: 'scatter3D',
coordinateSystem: 'geo3D',
data: this.areaName
symbol: 'circle',
symbolSize: 0,
silent: false, // 不响应和触发鼠标事件
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
distance: 30,
show: true,
formatter: '{b}',
position: 'bottom',
bottom: '100',
textStyle: {
color: '#fff',
marginTop: 40,
fontSize: 16,
// fontWeight:'bold',
backgroundColor: 'transparent',
}
}
},
{
type: 'scatter3D',
coordinateSystem: 'geo3D',
data: pinArr,
color: '#6EAFE3',
symbol: 'pin',
symbolSize: 56,
symbolOffset: ['100%','50%','0'],
silent: false, // 不响应和触发鼠标事件
itemStyle: {
textAlign: 'center',
borderColor: '#6EAFE3',
backgroundColor: '#6EAFE3',
borderWidth: 0
},
zlevel: -10,
label: {
show: true,
distance: -45,
// left:-10,
position: 'bottom',
formatter: (data) => {
return data.value[3] + ' ';
},
textStyle: {
color: '#333',
backgroundColor: 'transparent'
}
}
},
]
};
最后将配置好的option实例应用到ECharts图表中。
echartsMap.setOption(this.echartsDataMap);
解决问题
回到文章开头提到的问题，网上有很多解决方案，但经过尝试大多无效。最终通过改进网络上的方法实现了目标。
这是经过筛选后较为可靠的一种方案。网上建议是在geo中添加regions，但在geo3D中直接添加却无效。经过多次尝试发现，两者主要区别在于配置写法不同。
regions: [
{
name: '郑州市', /
itemStyle: {
color: 'green'
}
},{
name: '南阳市',
itemStyle: {
color: 'green'
}
},{
name: '商丘市',
itemStyle: {
color: 'green'
}
}]
只需修正color的设置形式，并将其添加到geo3D配置中即可生效。
总结
本文介绍了ECharts 3D地图自定义颜色的方法，更多相关内容可搜索本站历史文章或继续浏览后续内容，感谢支持！
Mock.js 拦截失效或数据格式错误的常见原因及排查
2026-11-05 10:11:59
Java和JavaScript名字像但没关系：辨析Java、JavaWeb与JS
2026-11-04 09:30:54
CodePen、JSFiddle与RunJS对比：哪款JS在线运行工具更适合你？
2026-11-03 16:46:57
JS 统计图渲染空白或报错怎么排查？常见问题解决指南
2026-11-03 09:49:40
flv.js 常见报错 MediaError 与解码失败排查指南
2026-11-02 10:29:29