rui.jiang
/
performance-test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3D Scatter Chart with ECharts-GL</title>
    <!-- 引入 ECharts 和 ECharts-GL -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
  </head>
  <body>
    <!-- 准备一个具备宽高的 DOM 容器 -->
    <div id="main" style="width: 600px; height: 600px"></div>

    <script>
      // 初始化图表
      const myChart = echarts.init(document.getElementById("main"));

      // 生成随机测试数据（100个点）
      function generateRandomData(count) {
        let data = [];
        for (let i = 0; i < count; i++) {
          data.push([
            Math.random() * 10, // x
            Math.random() * 10, // y
            Math.random() * 10, // z
            Math.random(), // 用于颜色映射的第四个维度（可选）
          ]);
        }
        return data;
      }

      // 配置项
      const option = {
        // 启用 3D 坐标系
        globe: {
          environment: "auto",
          backgroundColor: "#FFFFFF", // 设置背景为白色
          baseTexture: null, // 移除默认的球体纹理（不显示黑色球体）
        },
        // 3D 坐标轴配置
        xAxis3D: {
          type: "value",
          name: "X Axis",
        },
        yAxis3D: {
          type: "value",
          name: "Y Axis",
        },
        zAxis3D: {
          type: "value",
          name: "Z Axis",
        },
        // 3D 网格配置
        grid3D: {
          viewControl: {
            autoRotate: true, // 自动旋转
            autoRotateSpeed: 10, // 旋转速度（1-10）
          },
          axisPointer: {
            show: true,
            color: "#fff",
          },
        },
        // 数据集（使用随机生成的数据）
        dataset: {
          source: generateRandomData(100),
        },
        // 系列配置
        series: [
          {
            type: "scatter3D",
            // 数据维度映射（x, y, z）
            encode: {
              x: 0,
              y: 1,
              z: 2,
            },
            // 点的大小
            symbolSize: 8,
            // 颜色配置（使用第四个维度）
            itemStyle: {
              color: function (params) {
                // 使用第四个维度值映射到颜色
                const value = params.value[3];
                return echarts.color.modifyHSL(
                  "#5A94DF",
                  undefined,
                  undefined,
                  undefined,
                  value * 0.5
                );
              },
            },
          },
        ],
        // 工具栏
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              show: true,
              type: "png",
            },
            myTool: {
              show: true,
              title: "切换视角",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z",
              onclick: function () {
                myChart.setOption({
                  grid3D: {
                    viewControl: {
                      alpha: 45,
                      beta: 30,
                    },
                  },
                });
              },
            },
          },
        },
      };

      // 应用配置
      myChart.setOption(option);

      // 窗口大小改变时自动调整图表
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    </script>
  </body>
</html>