hahahaha

hahahaha 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

hahahaha 回答了问题 · 2020-01-02

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

<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的值的个数,然后就可以展示了,是个平滑的曲面。

关注 2 回答 1

认证与成就

  • 获得 2 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2020-01-02
个人主页被 167 人浏览