ECharts地理坐標(biāo)系屬性介紹

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

geo.show   |   boolean

[ default: true ]

是否顯示 ECharts 地理坐標(biāo)系組件。

geo.map   |   string

[ default: '' ]

地理坐標(biāo)系組件的地圖類型。

ECharts 3 中因?yàn)榈貓D精度的提高，不再內(nèi)置地圖數(shù)據(jù)增大代碼體積。由于 ECharts 之前提供下載的矢量地圖的部分?jǐn)?shù)據(jù)不符合國(guó)家《測(cè)繪法》規(guī)定，目前暫時(shí)無(wú)法下載地圖。但是大家可以使用以百度地圖為底圖的形式。

ECharts 中提供了兩種格式的地圖數(shù)據(jù)，一種是可以直接 script 標(biāo)簽引入的 js 文件，引入后會(huì)自動(dòng)注冊(cè)地圖名字和數(shù)據(jù)。還有一種是 JSON 文件，需要通過(guò) AJAX 異步加載后手動(dòng)注冊(cè)。

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

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 格式的數(shù)據(jù)作為地圖的輪廓，除了上述數(shù)據(jù)，你也可以通過(guò)其它手段獲取地圖的 geoJSON 數(shù)據(jù)注冊(cè)到 ECharts 中。參見(jiàn)示例 USA Population Estimates

geo.roam   |   boolean

[ default: false ]

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

geo.center   |   Array

當(dāng)前視角的中心點(diǎn)，用經(jīng)緯度表示

例如：

center: [115.97, 29.71]

geo.aspectScale   |   number

[ default: 0.75 ]

這個(gè)參數(shù)用于 scale 地圖的長(zhǎng)寬比。

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

geo.boundingCoords   |   Array

[ default: null ]

二維數(shù)組，定義定位的左上角以及右下角分別所對(duì)應(yīng)的經(jīng)緯度。例如：

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

geo.zoom   |   number

[ default: 1 ]

當(dāng)前視角的縮放比例。

geo.scaleLimit   |   Object

滾輪縮放的極限控制，通過(guò) min, max 最小和最大的縮放值，默認(rèn)的縮放為1。

geo.scaleLimit.min   |   number

最小的滾輪縮放值。

geo.scaleLimit.max   |   number

最大的滾輪縮放值。

geo.nameMap   |   Object

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

{
    'China' : '中國(guó)'
}

geo.selectedMode   |   boolean, string

[ default: false ]

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

geo.zlevel   |   number

[ default: 0 ]

所有圖形的 zlevel 值。

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

zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。

geo.z   |   number

[ default: 2 ]

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

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

geo.left   |   string, number

[ default: 'auto' ]

組件離容器左側(cè)的距離。

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

如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

geo.top   |   string, number

[ default: 'auto' ]

組件離容器上側(cè)的距離。

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

如果 top 的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

geo.right   |   string, number

[ default: 'auto' ]

組件離容器右側(cè)的距離。

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

默認(rèn)自適應(yīng)。

geo.bottom   |   string, number

[ default: 'auto' ]

組件離容器下側(cè)的距離。

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

默認(rèn)自適應(yīng)。

geo.layoutCenter   |   Array

[ default: null ]

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

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

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

設(shè)置這兩個(gè)值后 left/right/top/bottom/width/height 無(wú)效。

geo.layoutSize   |   number, string

地圖的大小，見(jiàn) layoutCenter。支持相對(duì)于屏幕寬高的百分比或者絕對(duì)的像素大小。

geo.silent   |   boolean

[ default: false ]

圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，默認(rèn)為 false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。