<body>
<div id="test" style="height: 600px; width: 900px; margin: 220x auto 0; border: 1px solid red;">
</div>
</body>
<script data-original="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script data-original="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script>
<script data-original="https://www.echartsjs.com/zh/dist/echarts-gl.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//8
var arrX = ["1W", "2W", "1M", "2M", "3M", "6M", "9M", "1Y"];
//17
var arrY = ["10D P", "15D P", "-10D P", "25D P", "35D P", "40D P", "45D P", "ATM", "45D C", "40D C", "35D C", "30D C", "25D C", "20D C", "15D C", "10D C", "30D P"];
var arrZ = [
3.57, 2.87, 2.44, 2.65, 3.05, 3.55, 4.07, 4.17,
3.01, 2.58, 2.32, 2.5, 2.87, 3.39, 3.92, 4.03,
2.56, 2.34, 2.22, 2.39, 2.74, 3.28, 3.83, 3.95,
2.26, 2.2, 2.17, 2.33, 2.67, 3.24, 3.82, 3.95,
2.02, 2.14, 2.2, 2.34, 2.69, 3.34, 3.96, 4.12,
2.02, 2.17, 2.24, 2.38, 2.74, 3.42, 4.07, 4.24,
2.03, 2.2, 2.28, 2.42, 2.8, 3.51, 4.18, 4.34,
2.04, 2.21, 2.29, 2.45, 2.83, 3.56, 4.24, 4.4,
2.03, 2.19, 2.27, 2.45, 2.84, 3.58, 4.28, 4.44,
2.0, 2.15, 2.23, 2.45, 2.85, 3.6, 4.32, 4.48,
2.0, 2.14, 2.2, 2.47, 2.88, 3.65, 4.39, 4.56,
2.06, 2.17, 2.22, 2.53, 2.96, 3.78, 4.54, 4.72,
2.23, 2.28, 2.3, 2.67, 3.13, 4.01, 4.81, 5.02,
2.52, 2.48, 2.46, 2.86, 3.37, 4.33, 5.18, 5.41,
2.97, 2.77, 2.66, 3.08, 3.65, 4.67, 5.58, 5.83,
3.53, 3.11, 2.87, 3.31, 3.94, 5.01, 5.99, 6.25,
2.1, 2.14, 2.17, 2.32, 2.66, 3.27, 3.87, 4.02
];
var datas = [];
arrY.forEach( function(y, j) {
arrX.forEach( function(x, i) {
console.log([y, x, arrZ[i+arrX.length*j]]);
datas.push([x, y, arrZ[i+arrX.length*j]]);
})
})
var option3d = {
tooltip: {},
backgroundColor: '#fff',
visualMap: {
show: true,
type: 'continuous',
dimension: 2,
min: 4,
max: 2,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
grid3D: {
viewControl: {
// projection: 'orthographic'
}
},
xAxis3D: {
type: 'category',
step: 1
},
yAxis3D: {
type: 'category',
step: 1
},
zAxis3D: {
type: 'value'
},
color: "#383f52",
series: [{
type: 'surface',
wireframe: {
show: false,
lineStyle: {
color: '#66AEFF'
},
},
data: datas ,
}]
};
var box = document.getElementById("test");
var myChar = echarts.init(box);
myChar.setOption(option3d);
</script>你的代码中的数据组合不对，x y z各自循环 最后得到了很多个点，所以出来的图很奇怪。
我改了下你的代码，z不做循环了，最后想要展现的点就是z的值的个数，然后就可以展示了，是个平滑的曲面。