1. 基本的地图配置：
var option = {
series: [{
type: 'map',
map: 'world', // 地图类型，可以是国家/地区的 ISO 3166-1 alpha-3 代码，或者特殊值 'world'
data: [
{name: 'China', value: 100},
{name: 'United States', value: 50},
{name: 'Russia', value: 80},
// 更多数据...
]
}]
};
在上面的例子中，通过 series 中的 type: 'map' 配置创建了一个简单的地图，其中 map 属性指定了地图的类型，data 数组包含了各个区域的数值和名称。
2. 自定义地图数据：
var option = {
series: [{
type: 'map',
map: 'customMap', // 自定义地图的名称
data: [
{name: 'City A', value: 100},
{name: 'City B', value: 50},
{name: 'City C', value: 80},
// 更多数据...
]
}],
geo: {
map: 'customMap', // 关联自定义地图
roam: true // 启用鼠标缩放和平移漫游
}
};
如果需要使用自定义的地图数据，可以在 geo 中设置 map 属性关联自定义地图的名称，并通过 roam 启用鼠标缩放和平移漫游。
3. 地图上添加标记点：
var option = {
series: [
{
type: 'map',
map: 'world',
data: [
{name: 'China', value: 100},
{name: 'United States', value: 50},
{name: 'Russia', value: 80},
// 更多数据...
]
},
{
type: 'effectScatter',
coordinateSystem: 'geo', // 使用地理坐标系
data: [
{name: 'Beijing', value: 100},
{name: 'New York', value: 50},
{name: 'Moscow', value: 80},
// 更多数据...
],
symbolSize: function (val) {
return val[2] / 10; // 根据数值设置标记点的大小
},
showEffectOn: 'emphasis', // 高亮时显示涟漪特效
rippleEffect: {
brushType: 'stroke' // 涟漪特效的绘制方式
},
hoverAnimation: true,
label: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
label: {
show: true
}
}
}
]
};
在上面的例子中，通过在 series 中添加一个 effectScatter 类型的系列，可以在地图上添加标记点。可以通过 symbolSize 设置标记点的大小，通过 rippleEffect 和 hoverAnimation 配置涟漪特效。
这只是地图组件的一些基本配置和操作示例，具体的使用方式可能会根据你的需求和地图类型而有所不同。你可以根据官方文档和示例进一步了解地图组件的配置和使用：[ECharts 地图](https://echarts.apache.org/zh/option.html#series-map)。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5085/ECharts