echarts 地图设置边框
思路1：设置两层地图叠加，底层地图使用粗边框，上层地图使用正常边框
*缺点：暂无法实现两层地图同步放大和拖放功能
思路2：引入 echarts-gl.js 插件，使用自带3d效果
缺点：放大缩小可实现，图例好像只支持svg路径格式，未找到插入png或者base64格式图片的方法
测试可适用版本 echarts 4.9.0，echarts-gl 1.1.2
方法一 地图叠加
代码示例
<!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不能开启，不然会出现如下情况
开启roam后无法同步缩放移动
方法二 echarts-gl.js
代码示例
<!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
*注：echarts-gl暂只支持svg坐标点格式图例，png和base64格式图片图例无法插入，使用前需查看文档新版本是否添加该功能
发表评论 (审核通过后显示评论)：