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