Echarts GL初次体验

参考：https://www.cnblogs.com/wsyblog/p/8544283.html

https://echarts.apache.org/zh/tutorial.html#%E4%BD%BF%E7%94%A8%20ECharts%20GL%20%E5%AE%9E%E7%8E%B0%E5%9F%BA%E7%A1%80%E7%9A%84%E4%B8%89%E7%BB%B4%E5%8F%AF%E8%A7%86%E5%8C%96

<!DOCTYPE html>
<html>

<body>

<div id="main" style="800px;height:600px;"></div>
<script type="text/javascript">
function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {
return function(amplitude, x0, y0, sigmaX, sigmaY, x, y) {
var exponent = -(
(Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2))) +
(Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))
);
return amplitude * Math.pow(Math.E, exponent);
}.bind(null, amplitude, x0, y0, sigmaX, sigmaY);
}
// 创建一个高斯分布函数
var gaussian = makeGaussian(50, 0, 0, 20, 20);
//实例一：
// var data = [];
// for(var i = 0; i < 1000; i++) {
// // x, y 随机分布
// var x = Math.random() * 100 - 50;
// var y = Math.random() * 100 - 50;
// var z = gaussian(x, y);
// data.push([x, y, z]);
// }
// //基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'), 'light');
// var option = {
// // 需要注意的是我们不能跟 grid 一样省略 grid3D
// grid3D: {},
// // 默认情况下, x, y, z 分别是从 0 到 1 的数值轴
// xAxis3D: {},
// yAxis3D: {},
// zAxis3D: {
// max: 100
// },
// series: [{
// type: 'scatter3D',
// data: data
// }]
// }
// myChart.setOption(option);
//实例二：
//基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'),'light');
// $.get('js/gl例子.json', function (data) {
// myChart.setOption({
// grid3D: {},
// xAxis3D: {},
// yAxis3D: {},
// zAxis3D: {},
// dataset: {
// source: data
// },
// series: [
// {
// type: 'scatter3D',
// symbolSize: 2.5
// }
// ]
// })
// });
//实例三：
var myChart = echarts.init(document.getElementById('main'), 'light');
var data = [];
// 曲面图要求给入的数据是网格形式按顺序分布。
for (var y = -50; y <= 50; y++) {
for (var x = -50; x <= 50; x++) {
var z = gaussian(x, y);
data.push([x, y, z]);
}
}
option = {
grid3D: {},
xAxis3D: {},
yAxis3D: {},
zAxis3D: { max: 60 },
series: [{
type: 'surface',
data: data
}]
}
myChart.setOption(option);
</script>
</body>

</html>

实例一：

实例二：

实例三：