如何在ECharts 3D曲面图中缩放到指定坐标点？

我看了你的代码和问题，你现在只调整了相机的distance属性，但这只是拉近了相机和整个图表的距离，并没有让相机精准对准你指定的点。ECharts GL的viewControl.center属性确实是实现这个需求的关键，我来帮你修改代码解决这个问题：

核心修改点 #

要实现缩放到指定点，需要同时设置两个关键属性：

• viewControl.center：指定相机的注视目标点，也就是你要聚焦的[x,y,z]坐标
• viewControl.distance：调整相机到目标点的距离，数值越小，视觉上的“缩放”程度越高
• 额外建议：关闭autoRotate（如果开启的话），避免自动旋转导致偏离目标

修改后的完整代码 #

JavaScript部分

const chart = echarts.init(document.getElementById('chart'));

function generateSurfaceData() {
    const data = [];
    const xCount = 50;
    const yCount = 50;
    for (let i = 0; i < xCount; i++) {
        for (let j = 0; j < yCount; j++) {
            const x = i / xCount * 50;
            const y = j / yCount * 50;
            const z = Math.sin(x / 10) * Math.cos(y / 10) * 5; 
            data.push([x, y, z]);
        }
    }
    return data;
}

chart.setOption({
    tooltip: {},
    xAxis3D: {
        type: 'value',
        name: 'X Axis',
        min: 0,
        max: 50
    },
    yAxis3D: {
        type: 'value',
        name: 'Y Axis',
        min: 0,
        max: 50
    },
    zAxis3D: {
        type: 'value',
        name: 'Z Axis',
        min: -5,
        max: 5
    },
    grid3D: {
        viewControl: {
            projection: 'perspective',
            autoRotate: false, // 关闭自动旋转，避免干扰聚焦效果
            distance: 100 // 初始相机距离
        },
        boxWidth: 100,
        boxDepth: 100,
        boxHeight: 50 
    },
    series: [{
        type: 'surface',
        data: generateSurfaceData(),
        shading: 'realistic',
        realisticMaterial: {
            roughness: 0.8,
            metalness: 0
        }
    }]
});

function zoomToPoint(chart, point) {
    const [x, y, z] = point;

    const option = chart.getOption();

    // 关键：设置相机注视的目标点为指定坐标
    option.grid3D[0].viewControl.center = [x, y, z];
    // 调整相机到目标点的距离，数值越小，缩放程度越高
    option.grid3D[0].viewControl.distance = 30;

    // 可选：添加过渡动画，让缩放过程更平滑
    chart.setOption(option, { transitionDuration: 1000 });
}

document.getElementById('zoom-button').addEventListener('click', () => {
    const pointToZoom = [25, 25, 2.5]; // x, y, z coordinates
    zoomToPoint(chart, pointToZoom);
});

HTML部分

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>

<div id="chart" style="width: 600px; height: 400px;"></div>
<button id="zoom-button" style="margin-top: 20px;">Zoom to Point</button>

效果说明 #

点击按钮后，相机会平滑过渡（如果加了transitionDuration）到以(25,25,2.5)为中心的视角，同时拉近到30的距离，实现精准的“缩放到指定点”效果。你可以根据需求调整distance的数值，或者修改过渡时长来优化体验。

备注：内容来源于stack exchange，提问作者Raphael Rlt