题目描述
echarts surface 曲面图 option 属性怎么配置;为什么自己写出来的和官网差距这么大; 是数据本身的原因, 还是因为自己什么属性没配置正确
题目来源及自己的思路
网上搜的相关代码看起来都很平滑,感觉像是自己的data没组对,试了几次都没什么大的差异;不知道究竟是什么原因
求大神指点下, 怎么配置才能使曲面看起来平滑一些
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
<body>
<div id="test" style="height: 600px; width: 900px; margin: 220x auto 0; border: 1px solid red;">
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/echarts-gl.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var arrX = ["1W", "2W", "1M", "2M", "3M", "6M", "9M", "1Y"];
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 = [];
arrX.forEach((x, i) => {
arrY.forEach((y, j) => {
arrZ.forEach((z, k) => {
console.log([x, y, z[i]]);
datas.push([y, x, z[i]]);
})
})
})
var option3d = {
tooltip: {},
backgroundColor: '#fff',
visualMap: {
show: true,
type: 'continuous',
dimension: 2,
min: -1,
max: 1,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
grid3D: {
viewControl: {
// projection: 'orthographic'
}
},
xAxis3D: {
type: 'category',
},
yAxis3D: {
type: 'category',
step: 1
},
zAxis3D: {
type: 'value'
},
color: "#383f52",
![series: \[{][1]
type: 'surface',
wireframe: {
show: false,
lineStyle: {
color: '#66AEFF'
},
},
data: datas ,
}]
};
var box = document.getElementById("test");
var myChar = echarts.init(box);
myChar.setOption(option3d);
</script>
- 1
新手上路,请多包涵你的代码中的数据组合不对,x y z各自循环 最后得到了很多个点,所以出来的图很奇怪。
我改了下你的代码,z不做循环了,最后想要展现的点就是z的值的个数,然后就可以展示了,是个平滑的曲面。