如何实现Chart3D的无限放大？解决鼠标滚轮放大受限问题

• 修改内置缩放限制配置
  多数3D图表库会通过配置参数限制最大缩放比例，找到对应项（比如scaleLimit.max、maxScale）并设为Infinity或极大值即可取消放大上限。以ECharts 3D组件为例：

  option = {
    grid3D: {
      roam: true, // 确保开启鼠标滚轮漫游
      scaleLimit: {
        max: Infinity // 取消放大上限
      }
    },
    // 其余图表配置项...
  };
  

• 自定义滚轮事件绕过限制
  如果库未提供直接配置项，可手动监听鼠标滚轮事件，自行控制视图缩放比例：

  const chart = echarts.init(document.getElementById('chart-dom'));
  let scale = 1;
  const step = 0.1; // 每次滚轮的缩放幅度
  
  chart.getZr().on('mousewheel', (e) => {
    e.preventDefault(); // 阻止默认缩放逻辑
    // 根据滚轮方向调整缩放值
    scale += e.wheelDelta > 0 ? step : -step;
    scale = Math.max(scale, 0.1); // 保留原有无限缩小的特性，仅限制最小缩放值
    // 更新3D视图的相机距离实现缩放（不同库的实现逻辑可能不同）
    chart.setOption({
      grid3D: {
        viewControl: {
          distance: 80 / scale
        }
      }
    });
  });
  

• 实用提示

  • 无限放大可能导致图形像素化，若库支持矢量渲染，建议开启以保证清晰度。
  • 过度放大可能引发性能卡顿，可根据实际需求设置一个较大的上限（比如max: 50），兼顾需求与流畅度。

内容的提问来源于stack exchange，提问作者kood