echarts 设置地图外边框以及多个geo实现缩放拖曳同步

一、文章简述：

1.如何设置地图外边框

2.geo设置roam=true时，怎么实现多个geo缩放拖曳同步

3.本文并不是echarts的入门教程，具体的echarts官方文档可访问：echarts官方文档

二、echart设置地图外边框

为了方便起见，其他的冗余代码我就省略了，只展示关键代码

var option={geo: [{zlevel:2,//geo显示级别，默认是0map: 'china',//地图名roam: false,//设置为false,不启动roam就无所谓缩放拖曳同步了zoom:1.1,//缩放级别itemStyle:{//顶层地图的样式，如地图区域颜色，边框颜色，边框大小等normal:{areaColor:'#08407D',borderColor:'#00FFFF',borderWidth:0.5}},},{map: 'china',roam: false,//roam与上一个geo配置相同zoom:1.1,itemStyle:{//底层地图样式normal:{//此处border设置你想要显示的地图外边框样式，可设置border颜色，阴影等borderColor:'#0A609D',borderWidth:2},},},],series:[{name:'china',type:'map',mapType:map,roam:false,geoIndex: 0,//指定要用哪个geo的配置，这里使用第一个geo，因为第一个geo的显示级别zlevel更高，展示数据需要在最顶层展示//注意：当你设置了geoindex以后，就会使用对应geo的label、itemstyle样式，当前series的label等样式就无效了，data:[],//设置地图数据}]
};

如果代码无误的话，显示效果应该会如下图所示：

可以根据要求，自己设置外边框的大小，颜色以及阴影效果等等，只要修改第二个geo的itemstyle->normal即可。

三、geo设置roam=true时，怎么实现多个geo缩放拖曳同步

由于我们第二部分中，设置roam为false，因此我们的地图是不可缩放拖曳的。

一旦我们设置roam为true，对地图进行缩放拖曳时，上下2层geo是不会同步缩放拖曳，就会导致2个geo分层。如下图所示：

解决办法：添加如下js代码，捕捉georoam事件，使下层geo跟着上层geo一起缩放拖曳：

chart=echarts.init(document.getElementById(''));//chart为当前ECharts实例
//捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳
chart.on('georoam',function(params){var option = chart.getOption();//获得option对象if(params.zoom!=null&&params.zoom!=undefined){ //捕捉到缩放时option.geo[1].zoom=option.geo[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变option.geo[1].center=option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变}else{//捕捉到拖曳时option.geo[1].center=option.geo[0].center;//下层的geo的中心位置随着上层geo一起改变}chart.setOption(option);//设置option
});

本文到此结束，有什么不对的地方还请大家多多指教。

echarts 设置地图外边框以及多个geo实现缩放拖曳同步相关推荐

echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点
一.设置地图外边框给地图添加外边框,同时地图中的区域添加细一点的边框.效果图如下: 这里涉及两种边框 ,分别在 geo 和 series 种设置 .主要代码如下: option = {backgr ...
echarts 地图外边框投影阴影立体效果
echarts 中国地图外边框投影阴影立体效果,每一级地图都加上立体边框效果直接上图,
vue echarts 地图外边框阴影
这里部分写的假数据,根据需求修改 data() {return {myEcharts: null,scatterData: [{name: '广州市',value: [113.280637,23.12 ...
echarts图表增加外边框或者外阴影内边框或者内阴影
如果能给echarts图表增加阴影或者边框呢?效果如下图所示的浅蓝色区域具体的代码如下图所示 series: [{name: '费用类型分布统计',type: 'pie',center:['50%' ...
计算机考试中如何设置表格外边框,Excel表格中怎么为单元格区域设置边框
在Excel表格工作表中,我们可以为选中的单元格区域设置各种类型的边框.Excel表格中为单元格区域设置边框的方法其实很简单,下面由学习啦小编告诉你! Excel表格中为单元格区域设置边框的方法 01 ...
el-table设置表格显示外边框和表头的下边框
el-table会自带下边框,去除所有的边框 //去除table的每一条数据的下边框 .el-table td {border-bottom: none;} //去除表格的最下面一行的边框 .tabl ...
EduCoder-Web程序设计基础-html5—表格高级样式的设置-第2关：设置表格的外边框样式
目录任务描述相关知识编程要求测试说明代码示例任务描述本关任务:创建一个两行两列的表格.实现的效果如下图所示: 外边框设置相关知识为了完成本关任务,你需要掌握:1.table标签的一般 ...
eacharts地图加外边框阴影，增加立体效果
echarts中国地图上加边框阴影,是给每一级都加上了阴影默认是这个样子的,很难看,也不清晰,想要实现只给地图外边框加阴影在网上查说是echarts官方暂时还没有给地图外侧加阴影的设置既然官方没 ...
java echarts 散点图,echarts在地图上绘制散点图（任意点）
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...
给地图的外边框加阴影(给地图的外边框设置与内边框不同的颜色)
1.先看效果图 2.说一下整体的思路因为地图暂无内外边框分开设置边框的属性,所以我们可以利用地理极坐标组件,采用--双层地图-覆盖--思想,底层的地图设置自己需要的边框颜色和加阴影与否,顶层的地图设 ...

echarts 设置地图外边框以及多个geo实现缩放拖曳同步

echarts 设置地图外边框以及多个geo实现缩放拖曳同步相关推荐

最新文章

热门文章