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