echarts 地图 滚轮 缩放
原文链接:https://blog.csdn.net/weixin_42707181/article/details/94755890
一: 简单应用
echarts地图 鼠标滚动控制缩放大小比例
添加以下代码就可以
series: [{
type: "map",
map: name,
// center: [104.114129, 37.550339],//当前视角的中心点
zoom: 1, //当前视角的缩放比例
roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
}]
可以去官方文档再详细看看
https://echarts.baidu.com/option.html#series-map.roam
二:复杂应用
echart 散点图、百度地图(需下载bmap.js、申请百度ak)、 iview tabs 一起使用时,出现滚轮缩放却向左移动的问题!
1此时需要关闭iview tabs 的 CSS3 动画效果
<Tabs v-bind:animated="false" >
2可能还会出现高度为0问题,修改样式:
.full-content{
position: relative;
height: 100%;
width:100%;
}
.full-content .ivu-tabs{
position: relative;
height: 100%;
width:100%;
}
.full-content .ivu-tabs .ivu-tabs-content{
height: calc(100% - 52px);
width:100%;
}
.full-content .ivu-tabs .ivu-tabs-content .ivu-tabs-tabpane{
height: 100%;
width:100%;
}
3还需要tabs 上层所有 div、 Layout ,修改宽度高度为100%
<div id="contentFirst" style="width:100%;height:100%">
<Layout style="width:100%;height:100%">
你可能会还会遇到以下问题:echarts +iview tabs 散点图 不显示、缩成一团
https://www.cnblogs.com/hao-1234-1234/p/13566005.htmlfalse