如何利用 ECharts-GL 库创建发光的 3D 图标？

如何使用 echarts 创建类似于 3d 发光的图标

这项特殊图标的创建涉及使用 ECharts-GL 库，这是一个附加库，专门用于扩展 ECharts 的 3D 图表功能。

具体步骤如下：

1. 安装 ECharts-GL 库：

   npm install echarts-gl

2. 在代码中导入 ECharts-GL：

   import * as echarts from 'echarts/core';import 'echarts-gl';  // 引入ECharts-GL

3. 创建 WebGL 渲染器：

   // 创建WebGL渲染器const renderer = echarts.renderer['webgl'];

4. 设置 Renderer 和 Camera 视图控制器的选项：

   // 设置渲染器的选项const rendererOpts = {  // 灯光配置  lights: [ {   type: 'ambient', // 环境光   intensity: 0.8 }, {   type: 'directional', // 平行光   intensity: 0.5,   normal: [0.5, 1, 0.5] // 平行光的方向，确保了光从摄像机向外投射 }  ],  terrain: { downsampling: 512, // 指定采样的数量 maxTileSize: 128  // 指定切片的最大大小  },  fog: { type: 'exponential', // 指定雾的类型，此处为指数雾 color: 'rgba(0,0,0,0.5)', // 指定雾的颜色 near: 100, // 指定雾的近边界距离 far: 2000 // 指定雾的远边界距离  }};// 创建渲染器const renderer = new renderer.WebGLRenderer(rendererOpts);// 设置相机视图控制器的选项const viewControlOpts = {  projection: 'perspective',  // 指定投影类型，此处为透视投影  fov: 40, // 指定视野角，单位为度  near: 60, // 指定相机近平面的距离  far: 2000, // 指定相机远平面的距离  zAxis: 1,  // 指定用于z轴旋转的方向，此处为 y 轴  maxPitch: 60, // 指定最大的俯仰角限制，避免俯仰超过规定度数  minPitch: -40, // 指定最小的俯仰角限制，避免俯仰低于规定度数  distanceMin: 60, // 指定相机到场景实际最小距离限制  distanceMax: 2000, // 指定相机到场景实际最大距离限制  target: [0, 0, 0] // 指定相机的目标点};// 创建相机视图控制器const viewControl = new renderer.ViewControl(viewControlOpts);