ECharts地圖系列

series[i]-map

用于控制 ECharts 中的地圖。地圖主要用于地理區(qū)域數(shù)據(jù)的可視化，配合 visualMap 組件用于展示不同區(qū)域的人口分布密度等數(shù)據(jù)。

多個(gè)地圖類型相同的系列會(huì)在同一地圖上顯示，這時(shí)候使用第一個(gè)系列的配置項(xiàng)作為地圖繪制的配置。

Tip: 在 ECharts 3 中不再建議在地圖類型的圖表使用 markLine 和 markPoint。如果要實(shí)現(xiàn)點(diǎn)數(shù)據(jù)或者線數(shù)據(jù)的可視化，可以使用在地理坐標(biāo)系組件上的散點(diǎn)圖和線圖。

示例：

點(diǎn)擊編輯實(shí)例 》》

ECharts 地圖屬性

type

type 的值為 map。

name

系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。

map

地圖類型。

ECharts 3 中因?yàn)榈貓D精度的提高，不再內(nèi)置地圖數(shù)據(jù)增大代碼體積，建議大家使用以百度地圖為底圖的形式，參考實(shí)例：http://echarts.baidu.com/demo.html#map-polygon

ECharts 中提供了兩種格式的地圖數(shù)據(jù)，一種是可以直接 script 標(biāo)簽引入的 js 文件，引入后會(huì)自動(dòng)注冊(cè)地圖名字和數(shù)據(jù)。還有一種是 JSON 文件，需要通過 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ù)，你也可以通過其它手段獲取地圖的 geoJSON 數(shù)據(jù)注冊(cè)到 ECharts 中。參見示例 USA Population Estimates

roam

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

center

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

例如：

center: [115.97, 29.71]

aspectScale

這個(gè)參數(shù)用于 scale 地圖的長(zhǎng)寬比，默認(rèn)為 0.75。

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

boundingCoords

二維數(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]
],

zoom

當(dāng)前視角的縮放比例，默認(rèn)為1。

scaleLimit

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

nameMap

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

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

selectedMode

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

label

圖形上的文本標(biāo)簽，可用于說明圖形的一些數(shù)據(jù)信息，比如值，名稱等，label選項(xiàng)在 ECharts 2.x 中放置于itemStyle.normal下，在 ECharts 3 中為了讓整個(gè)配置項(xiàng)結(jié)構(gòu)更扁平合理，label 被拿出來(lái)跟 itemStyle 平級(jí)，并且跟 itemStyle 一樣擁有 normal, emphasis 兩個(gè)狀態(tài)。

itemStyle

地圖區(qū)域的多邊形 圖形樣式，有 normal 和 emphasis 兩個(gè)狀態(tài)。normal 是圖形在默認(rèn)狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r。

zlevel

所有圖形的 zlevel 值，默認(rèn)為 0。

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

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

z

組件的所有圖形的z值，默認(rèn)值為2?？刂茍D形的前后順序。z值小的圖形會(huì)被z值大的圖形覆蓋。

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

left

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

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

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

top

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

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

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

right

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

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

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

bottom

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

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

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

layoutCenter

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

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

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

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

layoutSize

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

geoIndex

默認(rèn)情況下，map series 會(huì)自己生成內(nèi)部專用的 geo 組件。但是也可以用這個(gè) geoIndex 指定一個(gè) geo 組件。這樣的話，map 和 其他 series（例如散點(diǎn)圖）就可以共享一個(gè) geo 組件了。并且，geo 組件的顏色也可以被這個(gè) map series 控制，從而用 visualMap 來(lái)更改。

當(dāng)設(shè)定了 geoIndex 后，series-map.map 屬性，以及 series-map.itemStyle 等樣式配置不再起作用，而是采用 geo 中的相應(yīng)屬性。

參見：

點(diǎn)擊編輯實(shí)例 》》

mapValueCalculation

多個(gè)擁有相同地圖類型的系列會(huì)使用同一個(gè)地圖展現(xiàn)，如果多個(gè)系列都在同一個(gè)區(qū)域有值，ECharts 會(huì)對(duì)這些值統(tǒng)計(jì)得到一個(gè)數(shù)據(jù)。這個(gè)配置項(xiàng)就是用于配置統(tǒng)計(jì)的方式，目前有：

• 'sum' 取和（默認(rèn)）。
• 'average' 取平均值。
• 'max' 取最大值。
• 'min' 取最小值。

showLegendSymbol

在圖例相應(yīng)區(qū)域顯示圖例的顏色標(biāo)識(shí)（系列標(biāo)識(shí)的小圓點(diǎn)），存在 legend 組件時(shí)生效。

data[i]

地圖系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項(xiàng)可以為單個(gè)數(shù)值，如：

[12, 34, 56, 10, 23]

如果需要在數(shù)據(jù)中加入其它維度給 visualMap 組件用來(lái)映射到顏色等其它圖形屬性。每個(gè)數(shù)據(jù)項(xiàng)也可以是數(shù)組，如：

[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]

這時(shí)候可以將每項(xiàng)數(shù)組中的第二個(gè)值指定給 visualMap 組件。

更多時(shí)候我們需要指定每個(gè)數(shù)據(jù)項(xiàng)的名稱，這時(shí)候需要每個(gè)項(xiàng)為一個(gè)對(duì)象：

[{
    // 數(shù)據(jù)項(xiàng)的名稱
    name: '數(shù)據(jù)1',
    // 數(shù)據(jù)項(xiàng)值8
    value: 10
}, {
    name: '數(shù)據(jù)2',
    value: 20
}]

需要對(duì)個(gè)別內(nèi)容指定進(jìn)行個(gè)性化定義時(shí)：

[{
    name: '數(shù)據(jù)1',
    value: 10
}, {
    // 數(shù)據(jù)項(xiàng)名稱
    name: '數(shù)據(jù)2',
    value : 56,
    //自定義特殊 tooltip，僅對(duì)該數(shù)據(jù)項(xiàng)有效
    tooltip:{},
    //自定義特殊itemStyle，僅對(duì)該item有效
    itemStyle:{}
}]

markPoint

地圖的標(biāo)注。

markLine

地圖的標(biāo)線。

markArea

地圖的標(biāo)域，常用于標(biāo)記圖表中某個(gè)范圍的數(shù)據(jù)，例如標(biāo)出某段時(shí)間投放了廣告。

silent

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