1. 功能介绍
- 实现地图点位的波纹效果
- 可直接以图片的形式充当节点（替换波纹效果）
- 可对标题做图片显示和文字显示
2. 效果图
-
冰岛
-
深圳
3. 本文冰岛源码测试
-
到 echarts 官网的
示例
代码中整体覆盖就能看到效果 -
快捷跳转到echarts官网某个示例
4. 如果以国内其他城市为地图
-
本文以 冰岛 作为示例，如果想要更换为国内其他城市
可点这里去获取 json 数据
-
使用：
// map.json 是你复制的json数据然后扔到一个json文件里面 import * as echarts from 'echarts'; const geoJson: any = require('./map.json'); // 注意如果发现echarts找不到，react 请用 useEffect(() => { ... }, [])， vue请用 this.$nextTick(() => { ... }); ... 为以下代码 echarts.registerMap('myMap', geoJson); const option = { // ... 这个 option 就是上面的配置项 option } setOption(option)
5. 地图实现源码
$.get(ROOT_PATH + '/data/asset/geo/Map_of_Iceland.svg', function (svg) {
echarts.registerMap('myMap', { svg: svg });
const labelSize = 100;
const labelSizeTranslation = (params) => {
return (params[2] / 100) * 15 + 5;
};
option = {
tooltip: {},
geo: {
map: 'myMap',
aspectScale: 0.75,
layoutCenter: ['50%', '50%'],
layoutSize: '90%',
silent: true,
roam: false, // 是否开启鼠标缩放和平移漫游
zoom: 1,
z: 0,
itemStyle: {
areaColor: '#12235c',
shadowColor: '#1a3578',
// 底层偏移量
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 8,
borderColor: 'rgba(0, 0, 0, 0.7)',
borderWidth: 0.5
}
},
series: [
{
type: 'map',
label: {
// 是否显示地图上的名称
show: true,
color: '#c3fdff'
},
// roam: true,
itemStyle: {
borderColor: '#2ab8ff',
borderWidth: 1,
// borderType: 'dashed',
areaColor: {
color: '',
// image: webGlBgIcon,
repeat: 'repeat'
},
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 1,
color: 'red'
},
emphasis: {
label: {
color: '#c3fdff'
},
itemStyle: {
// areaColor: {
// color: '',
// // 鼠标hover状态下区域图片
// image: webGlBgIconHover,
// repeat: 'repeat',
// },
borderColor: '#2ab8ff',
borderWidth: 1,
shadowColor: 'rgba(0, 255, 255, 0.7)',
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 1,
label: {
show: true
}
}
},
z: 1,
zoom: 1,
map: 'myMap'
},
// 设置标注点图标
{
type: 'scatter',
coordinateSystem: 'geo',
name: '测试',
itemStyle: {
// color: '#f00',
// borderColor: '#fff',
// padding: 10
},
label: {
show: true,
position: 'right',
formatter: (p) => {
console.log(p, 'pp');
return [`{a|${p.value[3].label}}`].join('\n');
},
rich: {
a: {
color: '#fff',
lineHeight: 24,
fontSize: '13px',
padding: [4, 0, 0, 0]
},
b: {
height: 20,
width: 20
// borderRadius: [10,10,10,10],
// border: '1px solid #f60',
}
}
},
// 此处图片地址是bese64位，所以需要在前面拼接 【'image://'】，否则不会显示图片
// symbol: (value: any, params: any) => 'image://' + params.data.img,
symbol: (value, params) => 'image://' + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAATCAYAAACdkl3yAAADDUlEQVQ4jYVU3WsUVxT/nbkzd9yP7M4a87GTpO2alMTiB4b0pQ8VEYkGSqGWRjDii28+6x9Q6EsLvvlYEKyPfWipWJo+WFBokVZrIpiENaS227iucVfX/ZiZe4/MJLvVkG0OzHDuuef3u7977zmX8OUMOhh1iPNWQXOL2GaC1pg7jNeJkifGI6f67R+0CWx0AOoNfz1+4RvupMgYPDvqxi3rfSLkADgABIA1Zjysev6vha8XHm8Q/rdyMn+xrSbz8dt230DqGIC9pbq3WF+slryVasC+Vnauy46NdXXvissxBs8X/3lx/dl3K82Wqrai7lPDss9JnG4qpf6+8eR7v1h14CmXmdPhgvV5r1xfKK++yCaWhj7sm8gOpmeMU8NXnl7NeyFeeIM9kZrdh4Y+8rU2V35cvRWs1Xqsd3Z9Zo9lz8k9/dNypGfKzDofkDSl/6iSf/6oMZ8aSbpdMemWbhcXcXQ/ifC359w+l4gO/XWvci14XEvt2DdwwXSdMyTNNIiM8CNppkQmPiEy8d6gUL5Z1+JBpn/H4e6J3sXS7WItuhlBdKAR6D+DkhfId3uPGDsTn2xVK9FNOPEpOdp/zF9tBA3F88Kgg2hdMYGGKz6WI9Kd8ZOdSFomnPh0VDI+8gZoGK/VSrpZDMowDQ1TjG5HBEuMQQrVKAflEPs6kWBlKLKE6tQCm4yjXIqKMso3kifGQ6fcNSAcI2EHAN/ZnkbfCXNTGSsF4HlYR5EiBi+lLNpNtqmh+NK2RIovhblxEzkNzre3RkR3pUEHZdY2dbU5C9Zf/Y+ai7ravGYP2ZY06IBB9HubaLkgCgxecB2eNBKSueZ/AaU/BXAj3DaACoBfoPQ01/zPRUoim+CjDJ6bi50vhRztFiGi6wKYeWuIp/59af7sPdWzUHoWvlrvcktEhyr7TTub5OOCKIzPtvFh07Ys5yoLwCSA9zzFd+uKHlYqWAvn0mlkYoJHpKD9AO4D+Gkudj5oYd94RpYLwgfwQ85Vv0lB41JgMt2DzMb0M4CWAFxeLognb5wbgFevgSg+9EcEvQAAAABJRU5ErkJggg==',
symbolSize: labelSizeTranslation,
symbolOffset: [0, 0],
z: 99999,
// data: myData,
data: [
[
1111.859781,
664.099918,
labelSize,
{
label: '測試1',
color: 'rgba(25, 208, 128, 1)'
}
]
]
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: labelSizeTranslation,
z: 99999,
symbol: 'circle',
itemStyle: {
// borderColor: '#000',
// 设置闪烁节点颜色的地方
color: (value) => {
return value.value[3].color;
}
},
rippleEffect: {
scale: 3.5
},
label: {
show: true,
position: 'right',
formatter: (p) => {
return [
p.value[3].icon ? '{b| }' : '',
`{a|${p.value[3].label}}`
].join('\n');
},
rich: {
a: {
color: '#fff',
lineHeight: 30,
fontSize: '13px',
padding: [0, 0, 10, 10]
},
b: {
// 这里是设置 lable 中图标的地方
backgroundColor: {
image:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAATCAYAAACdkl3yAAADDUlEQVQ4jYVU3WsUVxT/nbkzd9yP7M4a87GTpO2alMTiB4b0pQ8VEYkGSqGWRjDii28+6x9Q6EsLvvlYEKyPfWipWJo+WFBokVZrIpiENaS227iucVfX/ZiZe4/MJLvVkG0OzHDuuef3u7977zmX8OUMOhh1iPNWQXOL2GaC1pg7jNeJkifGI6f67R+0CWx0AOoNfz1+4RvupMgYPDvqxi3rfSLkADgABIA1Zjysev6vha8XHm8Q/rdyMn+xrSbz8dt230DqGIC9pbq3WF+slryVasC+Vnauy46NdXXvissxBs8X/3lx/dl3K82Wqrai7lPDss9JnG4qpf6+8eR7v1h14CmXmdPhgvV5r1xfKK++yCaWhj7sm8gOpmeMU8NXnl7NeyFeeIM9kZrdh4Y+8rU2V35cvRWs1Xqsd3Z9Zo9lz8k9/dNypGfKzDofkDSl/6iSf/6oMZ8aSbpdMemWbhcXcXQ/ifC359w+l4gO/XWvci14XEvt2DdwwXSdMyTNNIiM8CNppkQmPiEy8d6gUL5Z1+JBpn/H4e6J3sXS7WItuhlBdKAR6D+DkhfId3uPGDsTn2xVK9FNOPEpOdp/zF9tBA3F88Kgg2hdMYGGKz6WI9Kd8ZOdSFomnPh0VDI+8gZoGK/VSrpZDMowDQ1TjG5HBEuMQQrVKAflEPs6kWBlKLKE6tQCm4yjXIqKMso3kifGQ6fcNSAcI2EHAN/ZnkbfCXNTGSsF4HlYR5EiBi+lLNpNtqmh+NK2RIovhblxEzkNzre3RkR3pUEHZdY2dbU5C9Zf/Y+ai7ravGYP2ZY06IBB9HubaLkgCgxecB2eNBKSueZ/AaU/BXAj3DaACoBfoPQ01/zPRUoim+CjDJ6bi50vhRztFiGi6wKYeWuIp/59af7sPdWzUHoWvlrvcktEhyr7TTub5OOCKIzPtvFh07Ys5yoLwCSA9zzFd+uKHlYqWAvn0mlkYoJHpKD9AO4D+Gkudj5oYd94RpYLwgfwQ85Vv0lB41JgMt2DzMb0M4CWAFxeLognb5wbgFevgSg+9EcEvQAAAABJRU5ErkJggg=='
},
height: 24,
align: 'center'
}
}
},
data: [
[
1111.859781,
564.099918,
40,
{
color: 'rgba(252, 0, 0, 1)',
label: '測試數據1',
icon: true
}
],
[
1214.123885,
822.555341,
80,
{
color: 'rgba(0, 179, 0, 1)',
label: '測試數據2',
icon: true
}
],
[
514.235366,
882.655769,
60,
{
color: 'rgba(0, 0, 128, 1)',
label: '測試數據3'
}
]
]
}
]
};
myChart.setOption(option);
myChart.getZr().on('click', function (params) {
var pixelPoint = [params.offsetX, params.offsetY];
var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
console.log(dataPoint);
});
});
版权声明：本文为weixin_47436633原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。