Echarts三维坐标系

一、坐标系

1.1 globe-地图组件

提供地球坐标系

可展示三维图：散点图、气泡图、柱状图、飞线图

部分属性

属性

含义

默认值

globeRadius

地球半径

100

globeOuterRadius

地球外半径，内外半径构成的空间用于绘图

150

1.2 geo3D-三维地理坐标系组件

提供三维地理坐标系

可展示三维图：散点图、气泡图、柱状图、飞线图

二、三维地图-map3D

地理区域数据可视化

三、各类gl表格

3.1 bar3D & scatter3D

支持坐标系：cartesian3D，geo3D和globe

数据格式：

数组

在 grid3D 中，每一项的前三个值分别是x, y, z。

在 geo3D 以及 globe 中，每一项的前两个值分别是经纬度 lng, lat。

var data = [

[

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

[10, 15, 12], [23, 10, 14]

]

]

JSON对象数组

在 grid3D 中，value分别是x, y, z。

在 geo3D 以及 globe 中，value前两个值分别是经纬度 lng, lat。

var data = [

{

// 数据项的名称

name: '数据1',

// 数据项值

value: [12, 14, 10]

},

{

name: '数据2',

value: [34, 50, 15]

}

]

3.2 lines3D

支持坐标系：geo3D和globe

数据格式：

//数组

var data = [

[

[120, 66, 1], // 起点的经纬度和海拔坐标

[122, 67, 2] // 终点的经纬度和海拔坐标

]

]

//JSON对象数组

var data = [

{

coords: [ [120, 66], [122, 67] ],

// 数据值

value: 10,

// 数据名

name: 'foo',

// 线条样式

lineStyle: {}

}

]

3.3 map3D-三维区域地图

特点：设置区域高度

直接展示地图：与二维地图相比，二维地图通过颜色区分各个区域，而三维地图则可通过颜色和高度进行区分。

数据格式：

var data = [

{

// 区域名-对应地图区域的名称

name: '北京市',

// 区域值-区域名对应的数据值

value: 10,

//区域高度-地图上各区域的高度(当地图为建筑物数据时，则可体现各建筑的高度)

regionHeight:20

}

]

四、坐标系预研

Echarts中坐标系具备两大功能：

图表的坐标系

坐标系组件(拥有配置坐标系的参数)

4.1 注册坐标系

/*

* 注册坐标系

* @param {string} coordSysName - 坐标系名称

* @param {any} registerCoordSys - 坐标系

*/

echarts.registerCoordinateSystem(coordSysName,registerCoordSys)

4.2 坐标系组件

4.2.1 视图

/*

* 扩展组件视图

* @param {object} opt - 视图相关参数

*/

echarts.extendComponentView(opt)

4.2.2 模型

/*

* 扩展组件模型

* @param {object} opt - 模型相关参数

*/

echarts.extendComponentModel(opt)

4.2.3 操作

/*

* 注册组件操作

* @param {object} opt - 操作参数{type,event,update}

* @param {Function} handler - 处理方法

*/

echarts.registerAction(opt,handler)

/*

* 组件遍历

* @param {object} opt - 操作参数{mainType,query}

* @param {Function} handler - 处理方法

*/

ecModel.eachComponent(opt,handler)

/*

* 例子

*/

echarts.registerAction({

type: 'globeChangeCamera',

event: 'globecamerachanged',

update: 'series:updateCamera'

}, function (payload, ecModel) {

ecModel.eachComponent({

mainType: 'globe', query: payload

}, function (componentModel) {

componentModel.setView(payload);

});

});