echarts地图做地图城市添加点、图形标记或柱形时需要获取对应坐标,话不多说,直接上代码
var geoCoordMap = {};
/*获取地图数据*/
var mapFeatures = echarts.getMap(mapName).geoJson.features;
mapFeatures.forEach(function (item) {
// 地区名称
var name = item.properties.name;
// 地区经纬度
geoCoordMap[name] = item.properties.cp;
});
var pointData = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
pointData.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
下述在城市添加动态点与图标
{
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'fill',
},
label: {
show: true,
color: '#fff',
formatter: function (obj) {
return obj.name;
},
},
symbolSize: function (val) {
var value = val[2];
if (value < max) {
return 15;
}
return 20;
},
showEffectOn: 'render', //加载完毕显示特效
itemStyle: {
normal: {
color: '#FEBE13', // 圆点的颜色
shadowBlur: 10,
shadowColor: '#333',
},
},
zlevel: 6,
data: pointData,
},
{
type: 'custom',
coordinateSystem: 'geo',
renderItem: function (params, api) {
//具体实现自定义图标的方法
return {
type: 'image',
style: {
image: uploadedDataURL, // 自定义的图片地址
x:
api.coord([pointData[params.dataIndex].value[0], pointData[params.dataIndex].value[1]])[0] -
6, // 数据的设置
y:
api.coord([pointData[params.dataIndex].value[0], pointData[params.dataIndex].value[1]])[1] -
34,
},
};
},
zlevel: 10,
data: pointData,
},