echartGL

安装

• pnpm install echarts-gl

文档

• GL配置

使用场景

• bar3D，line3D: 三维直角坐标系
• globe: 地球仪
• map3D: 地图
• scatter3D: 散点图、气泡图
• lines3D: 飞线图
• surface: 曲面图金属零件
• polygons3D: 建筑群
• graphGL: 关系图
• flowGL: 风场气象等量子场

三维直角坐标系要素

• grid3D：控制图形的位置
• xAxisD：控制x轴坐标
• yAxis3D：控制y轴坐标
• zAxis3D：控制z轴坐标

其他

• mapbox3D：基于 mapbox-gl-js 的地理组件，地图上绘制三维的散点图、飞线图、柱状图、地图
• geo3D：三维的地理坐标系组件，地图上绘制三维的散点图、气泡图、柱状图、飞线图
• globe：地球组件。展示三维的散点图、气泡图、柱状图、飞线图

灯光

• 在三维图形中，灯光必不可少
• 通过设置light决定图形的影子与物体的距离
• 另外series中的对象也需要设置着色效果shading

如何隐藏网格线和视觉坐标辅助线

• 在grid3D中show: false,解决视觉坐标线条
• axisTick，axisLabel，splitLine，splitArea解决网格线，坐标轴线，标签等显隐

如何不让物体随鼠标左右滑动而移动，也不受滑轮影响

• 通过grid中的viewControl

  projection: 'orthographic', // 投影方式
  orthographicSize: 110, //控制地图大小
  maxOrthographicSize: 110, // 投影最大值
  minOrthographicSize: 110, // 投影最小值
  alpha:60, // 确定视线角度
  beta:10,
  autoRotate:false, // 是否开启自动旋转
  rotateSensitivity: 0, // 设置为0 无法旋转

scatter3D

• symbol: 决定物体的形状，可以添加svg路径
• symbolSize: 设置物体的宽高[宽,高]
• data：要以[{value：[x, y, z]}]的形式
• 像是做一些自定义的图案，比如3D金字塔比较方便