ECharts地理坐標系屬性介紹

在 ECharts 地理坐標系的屬性設置中，如果您要將地理坐標系組件顯示出來，那么，請使用 geo 組件的 show 屬性。在 geo 組件中提供了兩種類型的地圖數據：javascript 文件與 JSON 文件。通過 geo 組件，您可以自定義地區(qū)的名稱映射。更多關于地理坐標系組件的屬性設置，我們將在下文中詳細介紹。

geo.show   |   boolean

[ default: true ]

是否顯示 ECharts 地理坐標系組件。

geo.map   |   string

[ default: '' ]

地理坐標系組件的地圖類型。

ECharts 3 中因為地圖精度的提高，不再內置地圖數據增大代碼體積。由于 ECharts 之前提供下載的矢量地圖的部分數據不符合國家《測繪法》規(guī)定，目前暫時無法下載地圖。但是大家可以使用以百度地圖為底圖的形式。

ECharts 中提供了兩種格式的地圖數據，一種是可以直接 script 標簽引入的 js 文件，引入后會自動注冊地圖名字和數據。還有一種是 JSON 文件，需要通過 AJAX 異步加載后手動注冊。

下面是兩種類型的使用示例：

JavaScript 引入示例

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

JSON 引入示例：

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

ECharts 使用 geoJSON 格式的數據作為地圖的輪廓，除了上述數據，你也可以通過其它手段獲取地圖的 geoJSON 數據注冊到 ECharts 中。參見示例 USA Population Estimates

geo.roam   |   boolean

[ default: false ]

是否開啟鼠標縮放和平移漫游。默認不開啟。如果只想要開啟縮放或者平移，可以設置成 'scale' 或者 'move'。設置成 true 為都開啟

geo.center   |   Array

當前視角的中心點，用經緯度表示

例如：

center: [115.97, 29.71]

geo.aspectScale   |   number

[ default: 0.75 ]

這個參數用于 scale 地圖的長寬比。

最終的 aspect 的計算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale

geo.boundingCoords   |   Array

[ default: null ]

二維數組，定義定位的左上角以及右下角分別所對應的經緯度。例如：

// 設置為一張完整經緯度的世界地圖
map: 'world',
left: 0, top: 0, right: 0, bottom: 0,
boundingCoords: [
    // 定位左上角經緯度
    [-180, 90],
    // 定位右下角經緯度
    [180, -90]
],

geo.zoom   |   number

[ default: 1 ]

當前視角的縮放比例。

geo.scaleLimit   |   Object

滾輪縮放的極限控制，通過 min, max 最小和最大的縮放值，默認的縮放為1。

geo.scaleLimit.min   |   number

最小的滾輪縮放值。

geo.scaleLimit.max   |   number

最大的滾輪縮放值。

geo.nameMap   |   Object

自定義地區(qū)的名稱映射，如：

{
    'China' : '中國'
}

geo.selectedMode   |   boolean, string

[ default: false ]

選中模式，表示是否支持多個選中，默認關閉，支持布爾值和字符串，字符串取值可選'single'表示單選，或者'multiple'表示多選。

geo.zlevel   |   number

[ default: 0 ]

所有圖形的 zlevel 值。

zlevel用于 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內存開銷的增大，在手機端上需要謹慎使用以防崩潰。

zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。

geo.z   |   number

[ default: 2 ]

組件的所有圖形的z值?？刂茍D形的前后順序。z值小的圖形會被z值大的圖形覆蓋。

z相比zlevel優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。

geo.left   |   string, number

[ default: 'auto' ]

組件離容器左側的距離。

left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值為'left', 'center', 'right'，組件會根據相應的位置自動對齊。

geo.top   |   string, number

[ default: 'auto' ]

組件離容器上側的距離。

top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值為'top', 'middle', 'bottom'，組件會根據相應的位置自動對齊。

geo.right   |   string, number

[ default: 'auto' ]

組件離容器右側的距離。

right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。

默認自適應。

geo.bottom   |   string, number

[ default: 'auto' ]

組件離容器下側的距離。

bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。

默認自適應。

geo.layoutCenter   |   Array

[ default: null ]

layoutCenter 和 layoutSize 提供了除了 left/right/top/bottom/width/height 之外的布局手段。

在使用 left/right/top/bottom/width/height 的時候，可能很難在保持地圖高寬比的情況下把地圖放在某個盒形區(qū)域的正中間，并且保證不超出盒形的范圍。此時可以通過 layoutCenter 屬性定義地圖中心在屏幕中的位置，layoutSize 定義地圖的大小。如下示例：

layoutCenter: ['30%', '30%'],
// 如果寬高比大于 1 則寬度為 100，如果小于 1 則高度為 100，保證了不超過 100x100 的區(qū)域
layoutSize: 100

設置這兩個值后 left/right/top/bottom/width/height 無效。

geo.layoutSize   |   number, string

地圖的大小，見 layoutCenter。支持相對于屏幕寬高的百分比或者絕對的像素大小。

geo.silent   |   boolean

[ default: false ]

圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。