echarts surface 曲面图 option 属性怎么配置

后知后觉
  • 61

题目描述

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>

你期待的结果是什么？实际看到的错误信息又是什么？

javascript
回复
阅读 4.4k
1 个回答
得票最新
hahahaha
  • 1
新手上路，请多包涵
<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="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的值的个数，然后就可以展示了，是个平滑的曲面。

回复
查看全部 1 个回答
宣传栏
4443