Echarts数据可视化第11章 Echarts高级功能 11.5 三维可视化制作

灰太狼 2024-03-25 20:47 13阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第11章 Echarts高级功能
         *   *  11.5 三维可视化制作

> Echarts数据可视化：入门、实战与进阶

#### 第11章 Echarts高级功能 ####

##### 11.5 三维可视化制作 #####

Echarts GL提供了大量三维可视化组件，考虑到不再增加Echarts的体积，所以作为了扩展方式引入。

官网

![在这里插入图片描述][bc1b33766e164cb496c901fe690c451a.png_pic_center]

[https://echarts.apache.org/zh/download-extension.html][https_echarts.apache.org_zh_download-extension.html]

![在这里插入图片描述][15388978b6e44375b282a094feae6095.png_pic_center]

一些相关的配置项[https://echarts.apache.org/zh/option-gl.html\#globe][https_echarts.apache.org_zh_option-gl.html_globe]

![在这里插入图片描述][d7ce12b701bd40f9b16e51c5c85e9887.png_pic_center]

还是举个栗子吧，绘制一个三维散点图

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ECharts三维散点图</title>
        <script src="../js/echarts.js"></script>
        <script src="../js/echarts-gl.js"></script>
    </head>
    <body>
    <div id="main" style="width:500px;height:600px;margin: 0 auto;"></div>
    </body>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var data = [
            [100, 50, 70],
            [40, 240, 60],
            [100, 30, 50],
            [200, 70, 40],
            [150, 30, 50]
        ];
    
        myChart.setOption({
          
            xAxis3D: {
          
                name: "x",
                type: 'value',
            },
            yAxis3D: {
          
                name: "y",
                type: 'value',
            },
            zAxis3D: {
          
                name: "z",
                type: 'value',
            },
            grid3D: {
          
                viewControl: {
           // 用于鼠标的旋转，缩放等视角控制
                    beta: 100 // 视角绕 y 轴，即左右旋转的角度。
                },
                boxWidth: 100,
                boxHeight: 100,
                boxDepth: 100,
                top: 'middle' // 组件的视图离容器上侧的距离
            },
    
            series: [{
          
                type: 'scatter3D', // 三维散点图
                data: data,
                symbolSize: 15,// 点的大小
                itemStyle: {
          
                    color: "#F00" // 点的颜色
                }
            }]
        });
    </script>
    </html>

浏览器渲染效果

![在这里插入图片描述][f46c3906859d4a4c893509e667d1fe1c.gif_pic_center]

酷，OK，就这样。

[bc1b33766e164cb496c901fe690c451a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f92b88d14b3b414189b1f7913b3e2c0a.png
[https_echarts.apache.org_zh_download-extension.html]: https://echarts.apache.org/zh/download-extension.html
[15388978b6e44375b282a094feae6095.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f58ef61efd9b42b3aee277948cf24d15.png
[https_echarts.apache.org_zh_option-gl.html_globe]: https://echarts.apache.org/zh/option-gl.html#globe
[d7ce12b701bd40f9b16e51c5c85e9887.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f3781f213fb24fe5a5131180c8e7e83e.png
[f46c3906859d4a4c893509e667d1fe1c.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7bb50fec7769466993ed1a68de0e06f8.png