ECharts地理坐标系属性介绍

});

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 Estimates

geo.roam   |   boolean


[ default: false ]

是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 ‘scale’ 或者 ‘move’。设置成 true 为都开启

geo.center   |   Array


当前视角的中心点,用经纬度表示

例如:

center: [115.97, 29.71]

geo.aspectScale   |   number


[ default: 0.75 ]

这个参数用于 scale 地图的长宽比。

最终的 aspect 的计算方式是:geoBoundingRect.width / geoBoundingRect.height * aspectScale

geo.boundingCoords   |   Array


[ default: null ]

二维数组,定义定位的左上角以及右下角分别所对应的经纬度。例如:

// 设置为一张完整经纬度的世界地图

map: ‘world’,

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

boundingCoords: [

// 定位左上角经纬度

[-180, 90],

// 定位右下角经纬度

[180, -90]

],

geo.zoom   |   number


[ default: 1 ]

当前视角的缩放比例。

geo.scaleLimit   |   Object


滚轮缩放的极限控制,通过 min, max 最小和最大的缩放值,默认的缩放为1。

geo.scaleLimit.min   |   number

最小的滚轮缩放值。

geo.scaleLimit.max   |   number

最大的滚轮缩放值。

geo.nameMap   |   Object


自定义地区的名称映射,如:

{

‘China’ : ‘中国’

}

geo.selectedMode   |   boolean, string


[ default: false ]

选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选’single’表示单选,或者’multiple’表示多选。

geo.zlevel   |   number


[ default: 0 ]

所有图形的 zlevel 值。

zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

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

geo.z   |   number


[ default: 2 ]

组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。

z相比zlevel优先级更低,而且不会创建新的 Canvas。

geo.left   |   string, number


[ default: ‘auto’ ]

组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’, ‘center’, ‘right’。

如果 left 的值为’left’, ‘center’, ‘right’,组件会根据相应的位置自动对齐。

geo.top   |   string, number


[ default: ‘auto’ ]

组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘top’, ‘middle’, ‘bottom’。

如果 top 的值为’top’, ‘middle’, ‘bottom’,组件会根据相应的位置自动对齐。

geo.right   |   string, number


[ default: ‘auto’ ]

组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比。

默认自适应。

geo.bottom   |   string, number


[ default: ‘auto’ ]

组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比。

默认自适应。

geo.layoutCenter   |   Array


[ default: null ]

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 无效。

geo.layoutSize   |   number, string

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值