series[i]-map

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

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

Tip:?在 ECharts 3 中不再建議在地圖類型的圖表使用?markLine?和?markPoint。如果要實現點數據或者線數據的可視化，可以使用在地理坐標系組件上的散點圖和線圖。

示例：

ECharts 地圖屬性type

type 的值為 map。name

系列名稱，用于tooltip的顯示，legend?的圖例篩選，在?setOption?更新數據和配置項時用于指定對應的系列。map

地圖類型。

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

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

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

JavaScript 引入示例：

var chart = echarts.init(document.getElementById('main'));

chart.setOption({

series: [{

type: 'map',

map: 'china'

}]

});

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 Estimatesroam

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

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

例如：center: [115.97, 29.71]aspectScale

這個參數用于 scale 地圖的長寬比，默認為 0.75。

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

二維數組，定義定位的左上角以及右下角分別所對應的經緯度。例如：// 設置為一張完整經緯度的世界地圖

map: 'world',

left: 0, top: 0, right: 0, bottom: 0,

boundingCoords: [

// 定位左上角經緯度

[-180, 90],

// 定位右下角經緯度

[180, -90]

],zoom

當前視角的縮放比例，默認為1。scaleLimit

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

自定義地區的名稱映射，如：{

'China' : '中國'

}selectedMode

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

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

地圖區域的多邊形 圖形樣式，有?normal?和?emphasis?兩個狀態。normal?是圖形在默認狀態下的樣式；emphasis?是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。zlevel

所有圖形的 zlevel 值，默認為 0。

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

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

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

z相比zlevel優先級更低，而且不會創建新的 Canvas。left

組件離容器左側的距離。

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

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

組件離容器上側的距離。

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

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

組件離容器右側的距離。

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

默認自適應。bottom

組件離容器下側的距離。

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

默認自適應。layoutCenter

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

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

// 如果寬高比大于 1 則寬度為 100，如果小于 1 則高度為 100，保證了不超過 100x100 的區域

layoutSize: 100

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

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

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

當設定了?geoIndex?后，series-map.map?屬性，以及?series-map.itemStyle?等樣式配置不再起作用，而是采用?geo?中的相應屬性。

參見：

mapValueCalculation

多個擁有相同地圖類型的系列會使用同一個地圖展現，如果多個系列都在同一個區域有值，ECharts 會對這些值統計得到一個數據。這個配置項就是用于配置統計的方式，目前有：'sum'?取和(默認)。

'average'?取平均值。

'max'?取最大值。

'min'?取最小值。showLegendSymbol

在圖例相應區域顯示圖例的顏色標識(系列標識的小圓點)，存在?legend?組件時生效。data[i]

地圖系列中的數據內容數組。數組項可以為單個數值，如：[12, 34, 56, 10, 23]

如果需要在數據中加入其它維度給?visualMap?組件用來映射到顏色等其它圖形屬性。每個數據項也可以是數組，如：[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]

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

更多時候我們需要指定每個數據項的名稱，這時候需要每個項為一個對象：[{

// 數據項的名稱

name: '數據1',

// 數據項值8

value: 10

}, {

name: '數據2',

value: 20

}]

需要對個別內容指定進行個性化定義時：[{

name: '數據1',

value: 10

}, {

// 數據項名稱

name: '數據2',

value : 56,

//自定義特殊 tooltip，僅對該數據項有效

tooltip:{},

//自定義特殊itemStyle，僅對該item有效

itemStyle:{}

}]markPoint

地圖的標注。markLine

地圖的標線。markArea

地圖的標域，常用于標記圖表中某個范圍的數據，例如標出某段時間投放了廣告。silent

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

總結

以上是生活随笔為你收集整理的echaer 地图_ECharts地图系列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。