初试Echarts（之二）看上去像曲面的一个东西

效果图

源代码

值得一提，不仅需要echarts.min.js还需要echarts-gl.min.js

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <style>
        #main {
            /*对子元素开启弹性布局*/
            display: flex;
            /*弹性元素在必要的时候换行*/
            flex-wrap: wrap;
            /*将弹性元素居中*/
            justify-content: center;

            width: 600px;

            height: 700px;
        }
    </style>
</head>

<body>
    <div id="main">
    </div>
    <script type="text/javascript">
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        function makeDate() {
            let result = [];
            let total = 19; // 每层的数据密集程度
            for (let layer = 1; layer <= 28; ++layer) {
                for (let bs = 0; bs != total; ++bs) {
                    result.push([17.5 / total * bs, layer, 0.2 + Math.random() * 1.3])
                }
            }
            return result
        }

        let data = makeDate()
        console.log(data)

        option = {
            tooltip: {},
            xAxis3D: {
                name: 'X',
                type: 'value'
            },
            yAxis3D: {
                name: 'Y',
                type: 'value'
            },
            zAxis3D: {
                name: 'Z',
                type: 'value',
                min: 0,
                max: 1.8,
            },
            visualMap: {
                type: 'continuous',
                calculable: true, 
                itemHeight: 350, 
                left: 'right',
                top: 'center',
                show: true,
                dimension: 2,
                min: 0,
                max: 1.8,
                inRange: {
                    color: [
                        '#313695',
                        '#4575b4',
                        '#74add1',
                        '#abd9e9',
                        '#e0f3f8',
                        '#ffffbf',
                        '#fee090',
                        '#fdae61',
                        '#f46d43',
                        '#d73027',
                        '#a50026'
                    ],
                }
            },
            grid3D: {
                viewControl: {
                    distance: 300
                },
            },
            series: [
                {
                    type: 'surface',
                    wireframe: {
                        show: true,
                    },
                    data: data
                }
            ]
        };

        option && myChart.setOption(option);
    </script>
</body>

</html>

相关阅读:
spring boot cli 知识点
 OSX Homebrew 安装 Spring Boot CLI
前端重定向，index.html文件被浏览器缓存，导致整个应用都是旧的
 单页面应用，接入cdn
Spring Cloud 之 Hystrix 知识点：隔离、熔断、降级
 Spring Cloud 之 Ribbon 知识点：服务器负载均衡
 Spring Cloud 之 Feign 知识点：封装了 REST 调用
 spring cloud 学习资料
 Gradle 知识点
 Gradle 学习资料
原文地址：https://www.cnblogs.com/xkxf/p/16172404.html