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);
});
});