思路1：设置两层地图叠加，底层地图使用粗边框，上层地图使用正常边框
*缺点：暂无法实现两层地图同步放大和拖放功能
思路2：引入 echarts-gl.js 插件，使用自带3d效果
缺点：放大缩小可实现，图例如同只支持svg路径格式，未找到插入png或者者base64格式图片的方法
代码示例
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>echarts 地图设置边框</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.js"></script> <script src="./js/china.js"></script> <style> #main { width: 800px; height: 800px; border: 1px solid #eee; } </style> </head> <body> <div id="main"></div> <script> var chart = echarts.init(document.getElementById("main")); chart.setOption({ // 底层 geo: { map: "china", // 底层增加边框 itemStyle: { borderColor: "blue", borderWidth: 5, }, }, // 上层地图覆盖 series: [ { type: "map", map: "china", // roam: true, }, ], }); </script> </body></html>效果图
四周带边框地图
开启roam后无法同步缩放移动代码示例
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>echarts 地图设置边框</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/1.1.2/echarts-gl.js"></script> <script src="./js/china.js"></script> <style> #main { width: 800px; height: 800px; border: 1px solid #eee; } </style> </head> <body> <div id="main"></div> <script> var chart = echarts.init(document.getElementById("main")); chart.setOption({ geo3D: { map: "china", }, }); </script> </body></html>效果图
echarts-gl