建站
咨詢
售后
建站咨詢
新聞中心
在 ECharts 地理坐標系的屬性設置中，如果您要將地理坐標系組件顯示出來，那么，請使用 geo 組件的 show 屬性。在 geo 組件中提供了兩種類型的地圖數(shù)據(jù)：javascript 文件與 JSON 文件。通過 geo 組件，您可以自定義地區(qū)的名稱映射。更多關(guān)于地理坐標系組件的屬性設置，我們將在下文中詳細介紹。
成都創(chuàng)新互聯(lián)公司主營中牟網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app軟件開發(fā)公司,中牟h5小程序開發(fā)搭建,中牟網(wǎng)站營銷推廣歡迎中牟等地區(qū)企業(yè)咨詢
geo.show | boolean
[ default: true ]
是否顯示 ECharts 地理坐標系組件。
geo.map | string
[ default: '' ]
地理坐標系組件的地圖類型。
ECharts 3 中因為地圖精度的提高，不再內(nèi)置地圖數(shù)據(jù)增大代碼體積。由于 ECharts 之前提供下載的矢量地圖的部分數(shù)據(jù)不符合國家《測繪法》規(guī)定，目前暫時無法下載地圖。但是大家可以使用以百度地圖為底圖的形式。
ECharts 中提供了兩種格式的地圖數(shù)據(jù)，一種是可以直接 script 標簽引入的 js 文件，引入后會自動注冊地圖名字和數(shù)據(jù)。還有一種是 JSON 文件，需要通過 AJAX 異步加載后手動注冊。
下面是兩種類型的使用示例：
JavaScript 引入示例
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
geo.roam | boolean
[ default: false ]
是否開啟鼠標縮放和平移漫游。默認不開啟。如果只想要開啟縮放或者平移，可以設置成 'scale' 或者 'move'。設置成 true 為都開啟
geo.center | Array
當前視角的中心點，用經(jīng)緯度表示
例如：
center: [115.97, 29.71]geo.aspectScale | number
[ default: 0.75 ]
這個參數(shù)用于 scale 地圖的長寬比。
最終的 aspect 的計算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale
geo.boundingCoords | Array
[ default: null ]
二維數(shù)組，定義定位的左上角以及右下角分別所對應的經(jīng)緯度。例如：
// 設置為一張完整經(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 ]
當前視角的縮放比例。
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 ]
選中模式，表示是否支持多個選中，默認關(guān)閉，支持布爾值和字符串，字符串取值可選'single'表示單選，或者'multiple'表示多選。
geo.zlevel | number
[ default: 0 ]
所有圖形的 zlevel 值。
zlevel用于 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內(nèi)存開銷的增大，在手機端上需要謹慎使用以防崩潰。
zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。
geo.z | number
[ default: 2 ]
組件的所有圖形的z值。控制圖形的前后順序。z值小的圖形會被z值大的圖形覆蓋。
z相比zlevel優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。
geo.left | string, number
[ default: 'auto' ]
組件離容器左側(cè)的距離。
left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'left', 'center', 'right'。
如果 left 的值為'left', 'center', 'right'，組件會根據(jù)相應的位置自動對齊。
geo.top | string, number
[ default: 'auto' ]
組件離容器上側(cè)的距離。
top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。
如果 top 的值為'top', 'middle', 'bottom'，組件會根據(jù)相應的位置自動對齊。
geo.right | string, number
[ default: 'auto' ]
組件離容器右側(cè)的距離。
right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。
默認自適應。
geo.bottom | string, number
[ default: 'auto' ]
組件離容器下側(cè)的距離。
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ā)鼠標事件。
網(wǎng)頁標題：創(chuàng)新互聯(lián)ECharts教程：ECharts地理坐標系屬性介紹
瀏覽地址：http://www.dlmjj.cn/article/cogccgs.html
