揭秘ECharts地图颜色调整技巧：轻松实现个性化地图配色，让你的数据可视化更吸睛

Jan 16, 2026

—

引言
在数据可视化领域，地图是一种非常直观且富有表现力的图表类型。ECharts作为一款强大的可视化库，提供了丰富的地图功能。其中，地图颜色调整是提升地图视觉效果的关键。本文将详细介绍如何在ECharts中调整地图颜色，实现个性化地图配色，让你的数据可视化更吸睛。
一、ECharts地图颜色调整概述
ECharts地图颜色调整主要涉及以下几个方面：
地图底图颜色
：调整地图底图的颜色，使其与整体风格相协调。
区域颜色
：根据数据值调整地图区域颜色，实现数据可视化。
边框颜色
：调整地图区域边框颜色，增强地图的层次感。
高亮颜色
：设置鼠标悬停或点击时的高亮颜色，突出显示特定区域。
二、地图底图颜色调整
2.1 背景颜色
在ECharts中，可以通过
backgroundColor
属性设置地图底图的背景颜色。以下是一个示例代码：
var myChart = echarts.init(document.getElementById(‘main’));

var option = {
backgroundColor: ‘#f7f7f7’ // 设置地图底图背景颜色为浅灰色
};

myChart.setOption(option);
2.2 地图底图样式
除了背景颜色，还可以通过
mapStyle
属性设置地图底图的样式。以下是一个示例代码：
var myChart = echarts.init(document.getElementById(‘main’));

var option = {
mapStyle: {
areaColor: ‘#f7f7f7’, // 设置地图区域颜色为浅灰色
label: {
show: false // 隐藏地图区域标签
}
}
};

myChart.setOption(option);
三、区域颜色调整
3.1 数据驱动颜色
在ECharts中，可以通过
series
属性的
data
属性设置地图区域颜色。以下是一个示例代码：
var myChart = echarts.init(document.getElementById(‘main’));

myChart.setOption(option);
3.2 预设颜色
ECharts还提供了预设颜色，可以通过
itemStyle.color
属性直接使用。以下是一个示例代码：
var myChart = echarts.init(document.getElementById(‘main’));

var option = {
series: [{
type: ‘map’,
mapType: ‘china’,
data: [{
name: ‘北京’,
value: 100
}, {
name: ‘上海’,
value: 200
}],
itemStyle: {
color: ‘red’ // 使用预设颜色红色
}
}]
};

myChart.setOption(option);
四、边框颜色调整
在ECharts中，可以通过
itemStyle.border
属性设置地图区域边框颜色。以下是一个示例代码：
var myChart = echarts.init(document.getElementById(‘main’));

var option = {
series: [{
type: ‘map’,
mapType: ‘china’,
data: [{
name: ‘北京’,
value: 100
}, {
name: ‘上海’,
value: 200
}],
itemStyle: {
color: ‘red’,
borderColor: ‘#000’ // 设置边框颜色为黑色
}
}]
};

myChart.setOption(option);
五、高亮颜色调整
在ECharts中，可以通过
emphasis
属性设置鼠标悬停或点击时的高亮颜色。以下是一个示例代码：
var myChart = echarts.init(document.getElementById(‘main’));

var option = {
series: [{
type: ‘map’,
mapType: ‘china’,
data: [{
name: ‘北京’,
value: 100
}, {
name: ‘上海’,
value: 200
}],
itemStyle: {
color: ‘red’,
borderColor: ‘#000’,
emphasis: {
borderColor: ‘#ff0000’, // 设置高亮边框颜色为红色
borderWidth: 2 // 设置高亮边框宽度为2
}
}
}]
};

myChart.setOption(option);
六、总结
通过以上介绍，相信你已经掌握了ECharts地图颜色调整的技巧。在实际应用中，可以根据需求灵活运用这些技巧，实现个性化地图配色，让你的数据可视化更吸睛。希望本文对你有所帮助！