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);});
});

echarts地图各种点位实现相关推荐

Echarts地图初体验
根据黑马pink老师的视频制作的echarts地图最近沉迷P社的钢4,断断续续几天才做好效果预览 echart拿来做这种动态图还是不错的官网百度的echarts 仓库地址链接: link. h ...
mysql+地图网格数据下载_echarts 中国各省市 echarts地图数据，含世界地图
[实例简介] echarts 中国各省市 echarts地图数据,含世界地图,含各省地市数据 [实例截图] [核心代码] echarts_map_data ├── anhui │ ├── anhu ...
Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档
Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档类资源-CSDN下载
echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
echarts 地图常见效果
echarts 地图常见效果!! 引入echarts包(最全的那个,不要下简易版的)和地图包 ----------------------------------------------------- ...
vue 引入json地图_在vue2.x中使用echarts,地图或者theme引入js 文件，会有问题，地图的json文件重新注册可以...
One-line summary [问题简述] 在vue2.x中使用echarts,地图或者theme引入会有问题 import echarts from 'echarts/dist/echarts' ...
html海南地图插件,Echarts 地图（map）插件之鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
Vue+Echarts地图消失（高度变成0）的完美解决方案
地图消失了! 最近项目突然发现了一个奇怪的问题,当且到别的页面之后停留一会(20min+),首页的Echarts地图就会消失掉,而且还不一定复现,好不容易复现了一次,查看元素发现地图的容器.svg元素 ...
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示文章目录 0.前言 1.引用模块 2.界面设计 3.数据准备 4.实例地图 5.动态修改气泡图标 6.结束语 0.前言实现的效果 ...
Vue 使用echarts 地图自定义图标和修改图标样式，点击切换图标
效果图:如下注意事项: 1.使用echarts最好看官方文档,官方文档(链接如下) https://echarts.apache.org/examples/zh/index.html#chart-t ...

echarts地图各种点位实现

1. 功能介绍

2. 效果图

3. 本文冰岛源码测试

4. 如果以国内其他城市为地图

5. 地图实现源码

echarts地图各种点位实现相关推荐

最新文章

热门文章