ECharts地圖系列

series[i]-map

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

多個地圖類型相同的系列會在同一地圖上顯示，這時候使用第一個系列的配置項作為地圖繪制的配置。

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

示例：

點擊編輯實例 》》

ECharts 地圖屬性

type

type 的值為 map。

name

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

map

地圖類型。

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

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

roam

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

center

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

例如：

center: [115.97, 29.71]

aspectScale

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

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

boundingCoords

二維數(shù)組，定義定位的左上角以及右下角分別所對應(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' : '中國'
}

selectedMode

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

label

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

itemStyle

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

zlevel

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

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

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

z

組件的所有圖形的z值，默認(rèn)值為2。控制圖形的前后順序。z值小的圖形會被z值大的圖形覆蓋。

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

left

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

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

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

top

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

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

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

right

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

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

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

bottom

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

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

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

layoutCenter

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

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

layoutSize

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

geoIndex

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

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

參見：

點擊編輯實例 》》

mapValueCalculation

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

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

showLegendSymbol

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

data[i]

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

[12, 34, 56, 10, 23]

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

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

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

更多時候我們需要指定每個數(shù)據(jù)項的名稱，這時候需要每個項為一個對象：

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

需要對個別內(nèi)容指定進行個性化定義時：

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

markPoint

地圖的標(biāo)注。

markLine

地圖的標(biāo)線。

markArea

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

silent

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