本文介绍如何在 ECharts 中使用 areaColor 属性为地图区域添加纹理图片填充。通过构建 HTMLImageElement 或 HTMLCanvasElement 对象，可实现比纯色更丰富的地图展示效果。文中提供了获取区域 JSON 数据的方法及完整的 Vue 集成代码示例，并包含解决图片模糊和渲染延迟的实用建议。
ECharts 地图纹理填充实现指南：使用图片替代纯色
本文以广西南宁地图为例，演示如何在 ECharts 中实现地图区域的纹理渲染及图片填充操作。
配置 areaColor 属性
查阅 ECharts 文档可知，geo 组件的 areaColor 属性支持通过图片对地图区域进行纹理填充，同时也支持直接修改颜色。
相关配置文档的具体地址为：https://echarts.apache.org/zh/option.html#color
需要注意的是，该纹理填充功能仅支持 HTMLImageElement 和 HTMLCanvasElement 类型，不支持直接使用路径字符串，因此需要手动构建图片对象。
展示图片有多种实现方式，以下列举两种常用方法，其他方案可根据实际需求选择。
//方法一
let img = document.createElement('img')
img.src = require('../../../assets/image/2.jpg')
//方法二
<img ref="mapSvg" id="mapSvg" v-show="false" hidden style="width:500px;height:500px;" src="../../../assets/image/2.jpg">
this.$refs.mapSvgAreaMap
获取区域 JSON 数据
首先需要获取对应区域的 JSON 数据文件，可通过指定网站下载，也可从 GitHub 仓库直接获取，用户可根据需要自行选择数据来源。
//阿里的获取地图json文件的
http://datav.aliyun.com/portal/school/atlas/area_selector
//gitHub上面可以直接获取完整所有的省份和市区的
https://github.com/ljy-110/china-geojson-map
代码实现与注意事项
以下是具体的代码实现部分。
（1）数据格式说明
dataMapList : [
//坐标是为了展现label的定位
{name:"兴业区",value:[108.320189,22.819511],datas:12},
...
]
（2）关于叠加层及发光效果的实现可参考下方代码。
initAreaMap(){
var myChart = echarts.init(this.$refs.areaMap);
//GuangXi 引入的地图json文件
echarts.registerMap("mapStype", GuangXi);
let option = {}
//label的图片引入
let mapLabel = require('../../../assets/image/home/mapLabel.png');
let data = this.dataMapList
option={
tooltip: {
trigger: "item",
formatter: function(params) {
return params.name;
}
},
geo: [
{
map: "mapStype",
geoIndex: 1,
zoom: 1,
layoutCenter: ["50%", "44%"],
layoutSize: "80%",
zlevel: 4,
show: true,
label: {
normal: {
show: false,
textStyle: {
color: "#fff",
fontSize: "16"
}
},
emphasis: {
show: true,
label: {
formatter: function(params) { // 鼠标经过的回调函数
return params.name
},
},
textStyle: {
color: "#fff"
}
}
},
roam: false, // 是否允许缩放
itemStyle: {
normal: {
areaColor:'rgb(0,0,0,0)',
borderWidth: 1,
borderColor: 'rgb(222, 238, 255,0.5)',
shadowColor: '#1773c3',
shadowBlur: 20,
},
emphasis: {
borderColor: 'rgb(222, 238, 255,0.5)',
areaColor:'rgb(26, 92, 158,0.6)',
}
}
},
{
map: "mapStype",
geoIndex: 3,
zoom: 1,
layoutCenter: ["50%", "44%"],
layoutSize: "80%",
zlevel: 2,
// aspectScale: 1,
silent: true,
label: {
emphasis: {
show: false
}
},
roam: false, // 是否允许缩放
itemStyle: {
areaColor: {
image: this.$refs.mapSvgAreaMap, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
},
}
},
{
map: "mapStype",
animation:true,
animationDurationUpdate:0,
geoIndex: 4,
zoom: 1,
layoutCenter: ["50%", "45.5%"],
layoutSize: "80%",
zlevel: 1,
// aspectScale: 1,
silent: true,
label: {
emphasis: {
show: false
}
},
roam: false, // 是否允许缩放
itemStyle: {
borderWidth: 1,
areaColor:'#030a17',
shadowColor: '#1773c3',
shadowBlur: 60,
}
}
],
series: [
{
type: 'map',
geoIndex: 1,
zoom: 1.2,
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
color: 'rgba(255,255,255,0.9)'
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: false,
data: data
},
{
type: "scatter",
coordinateSystem: "geo",
label: {
normal: {
show: true,
color: "#fff",
fontWeight:500,
fontSize:18,
verticalAlign:'top',
lineHeight:-26,
formatter: function(params) {
return params.data.name + ' '+ params.data.datas;
},
},
emphasis: {
show: false
},
},
itemStyle: {
opacity: 1
},
symbol:'image://' + mapLabel,
symbolSize: [160, 70],
symbolOffset: [0, 0],
zlevel: 6,
data: data
},
]
}
if (option && typeof option === 'object') {
myChart.setOption(option,true);
}
window.addEventListener('resize', myChart.resize);
},
提示
1. 图片展示时可能会出现模糊现象。
2. 若图片无法显示，可尝试使用 setTimeout 进行延迟渲染。
可能还存在其他问题，欢迎大家共同探讨解决。
最后附上纹理图片示例，用户也可自行通过卫星地图截取所需图片。
总结
至此，关于 ECharts 展示区域地图添加纹理图片的介绍已完成，更多相关内容请搜索本站历史文章或浏览后续文章，感谢大家的支持！