$.getScript( 'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js' ).done(function () { var noise = new SimplexNoise(Math.random); function generateData(theta, min, max) { var data = []; for (var i = 0; i <= 20; i++) { for (var j = 0; j <= 20; j++) { for (var k = 0; k <= 20; k++) { var value = noise.noise3D(i / 10, j / 10, k / 10); valMax = Math.max(valMax, value); valMin = Math.min(valMin, value); data.push([i, j, k, value * 2 + 4]); } } } return data; } var valMin = Infinity; var valMax = -Infinity; var data = generateData(2, -5, 5); console.log(valMin, valMax); myChart.setOption( (option = { visualMap: { show: false, min: 2, max: 6, inRange: { symbolSize: [0.5, 25], color: [ '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026' ], colorAlpha: [0.2, 1] } }, xAxis3D: { type: 'value' }, yAxis3D: { type: 'value' }, zAxis3D: { type: 'value' }, grid3D: { axisLine: { lineStyle: { color: '#fff' } }, axisPointer: { lineStyle: { color: '#fff' } }, viewControl: { // autoRotate: true } }, series: [ { type: 'scatter3D', data: data } ] }) ); });
时间: 2024-02-10 13:30:51 浏览: 48
Jquery中$.getScript()$.getJSON
这是一个使用 echarts 中的 scatter3D 图表类型来实现 Simplex Noise 效果的示例代码。具体的实现思路和前面介绍的类似,也是通过 Simplex Noise 库生成数据,然后将数据传给 scatter3D 图表进行渲染。
这段代码中,使用了 `$.getScript` 方法来异步加载 Simplex Noise 库,然后通过 `new SimplexNoise(Math.random)` 的方式来创建一个 SimplexNoise 实例。接着,通过 `generateData` 函数生成了 Simplex Noise 数据,并将数据传给了 scatter3D 图表进行渲染。
在图表的配置中,使用了 `visualMap` 来实现数据的可视化,同时也配置了坐标轴和网格等基本的图表元素。最终的效果可以在浏览器中查看。
阅读全文