前端 - 如何在ECharts中使用parametricEquation生成平滑圆柱体曲面？

Question

大佬们 echarts曲面图生成的圆柱体曲面，怎么根据数据坐标生成这种光滑的曲面呢

用这个parametricEquation方法配置曲面和数据坐标对应不上，但是用这些数据坐标生成的是很多圆环

Answer 1

在 ECharts 中使用 parametricEquation 生成平滑的圆柱体曲面可能不是直接支持的，因为 ECharts 的 surface 图表的 parametricEquation 主要是用于更复杂的参数化曲面，如心形曲面、莫比乌斯环等，而不是直接用于生成标准的几何形状如圆柱体。

然而，你可以通过调整 surface 图表的 x, y, z 坐标来间接地绘制一个近似的圆柱体曲面。这里的关键是确保 x 和 y 坐标能够代表圆柱体的底面或侧面的位置，而 z 坐标则代表高度或深度。

以下是一个使用 ECharts 绘制近似圆柱体曲面的基本示例：

option = {
    tooltip: {},
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    grid3D: {
        viewControl: {
            // 调整视角以便更好地观察圆柱体
            projection: 'orthographic'
        }
    },
    series: [{
        type: 'surface',
        data: function () {
            var data = [];
            var radius = 5; // 圆柱体的半径
            var height = 10; // 圆柱体的高度
            var num = 36; // 圆柱体底面的细分数量
            for (var i = 0; i <= num; i++) {
                for (var j = 0; j <= num; j++) {
                    var theta = 2 * Math.PI * i / num;
                    var phi = Math.PI * j / num;
                    var x = radius * Math.cos(theta);
                    var y = radius * Math.sin(theta);
                    var z = phi * height / Math.PI - height / 2;
                    data.push([x, y, z]);
                }
            }
            return data;
        }(),
        shading: 'lambert',
        wireframe: {
            show: false
        },
        silent: true
    }]
};

注意：

1. 上述代码示例通过计算圆柱体表面的点来生成数据。这里使用了极坐标转换来生成圆柱体的侧面点。
2. shading: 'lambert' 提供了更好的光照效果，使得曲面看起来更加平滑。
3. wireframe: { show: false } 隐藏了网格线，使曲面看起来更平滑。
4. 你可以通过调整 radius 和 height 来改变圆柱体的大小，通过调整 num 来改变底面的细分程度，从而影响曲面的平滑度。

这种方法虽然不是使用 parametricEquation 直接生成圆柱体，但可以有效地在 ECharts 中绘制出平滑的圆柱体曲面。如果你确实需要使用 parametricEquation，那么你可能需要自定义一个能够生成圆柱体曲面的参数方程，但这通常比较复杂且不是 ECharts 的直接功能。