Echarts三维坐标系

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);
    });
});
    原文作者:CCC_ZERO
    原文地址: https://blog.csdn.net/shylot/article/details/101017483
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞