rui.jiang
/
performance-test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <style>
      body {
        margin: 0;
      }
      #plot {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="plot"></div>
    <script>
      //反转字符串
      // let str = "1234567";
      // 方法1:
      // str.split("").reverse().join("");
      // 方法2:
      // const brr = str.split("").reduce((rev, ch) => {
      //   return ch + rev;
      // }, "");
      // console.log(brr, "brr");
      // //递归
      // function recursionFn(n) {
      //   if (n === 0) return 0; // 递归终止条件
      //   return n + recursionFn(n - 1);
      // }
      // console.log(recursionFn(10));

      //js map 方法
      // if (!Array.prototype.myMap) {
      //   Array.prototype.myMap = function (callback, thisArg) {
      //     if (typeof callback !== "function") {
      //       console.error("callback 必须是一个函数");
      //     }
      //     console.log(this, thisArg);
      //     const arr = this;
      //     const result = new Array(arr.length);
      //     for (let i = 0; i < arr.length; i++) {
      //       if (!(i in arr)) continue;
      //       result[i] = callback.call(thisArg, arr[i], i, arr);
      //     }
      //     return result;
      //   };
      // }
      // const numArray = [1, 4, null, 7, 3];
      // const numResult = numArray.myMap(
      //   function (val, index) {
      //     console.log("myMap 回调函数", this.obj, val, index);
      //     return this.obj + val;
      //   },
      //   { obj: "这个是this" }
      // );
      // console.log(numResult, "numResult");

      // const xLabels = ["A", "B", "C"];
      // const yLabels = ["Monday", "Tuesday", "Wednesday"];
      // const dataMatrix = [
      //   [5, 8, 6],
      //   [4, 2, 9],
      //   [7, 3, 5],
      // ];

      // // 构造立方体柱子
      // const traces = [];
      // const barWidth = 0.8;

      // for (let xi = 0; xi < xLabels.length; xi++) {
      //   for (let yi = 0; yi < yLabels.length; yi++) {
      //     const height = dataMatrix[yi][xi];

      //     const x = xi;
      //     const y = yi;
      //     const z = 0;

      //     // 立方体8个顶点
      //     const vertices = [
      //       [x, y, z],
      //       [x + barWidth, y, z],
      //       [x + barWidth, y + barWidth, z],
      //       [x, y + barWidth, z],
      //       [x, y, z + height],
      //       [x + barWidth, y, z + height],
      //       [x + barWidth, y + barWidth, z + height],
      //       [x, y + barWidth, z + height],
      //     ];

      //     // 每个立方体的面（两个三角形组成一个面）
      //     const faces = [
      //       [0, 1, 2],
      //       [0, 2, 3], // bottom
      //       [4, 5, 6],
      //       [4, 6, 7], // top
      //       [0, 1, 5],
      //       [0, 5, 4], // front
      //       [1, 2, 6],
      //       [1, 6, 5], // right
      //       [2, 3, 7],
      //       [2, 7, 6], // back
      //       [3, 0, 4],
      //       [3, 4, 7], // left
      //     ];

      //     // 拆解为 Plotly mesh3d 的输入格式
      //     const xVals = vertices.map((v) => v[0]);
      //     const yVals = vertices.map((v) => v[1]);
      //     const zVals = vertices.map((v) => v[2]);

      //     const i = faces.map((f) => f[0]);
      //     const j = faces.map((f) => f[1]);
      //     const k = faces.map((f) => f[2]);

      //     traces.push({
      //       type: "mesh3d",
      //       x: xVals,
      //       y: yVals,
      //       z: zVals,
      //       i,
      //       j,
      //       k,
      //       opacity: 1,
      //       color: `rgb(${50 + xi * 50}, ${100 + yi * 50}, 200)`,
      //       flatshading: true,
      //       showscale: false,
      //     });
      //   }
      // }

      // const layout = {
      //   scene: {
      //     xaxis: {
      //       title: "X",
      //       tickvals: [0.4, 1.4, 2.4],
      //       ticktext: xLabels,
      //     },
      //     yaxis: {
      //       title: "Y",
      //       tickvals: [0.4, 1.4, 2.4],
      //       ticktext: yLabels,
      //     },
      //     zaxis: { title: "Z" },
      //     aspectratio: {
      //       x: 2.2,
      //       y: 1.7,
      //       z: 1,
      //     },
      //     bgcolor: "#e5ecf6",
      //     aspectmode: "manual",
      //     gridcolor: "#fff",
      //     camera: {
      //       up: {
      //         x: 0.200292643688136,
      //         y: 0.2488259353493132,
      //         z: 0.947612004346693,
      //       },
      //       center: {
      //         x: -0.052807476121180814,
      //         y: 0.02451796399554085,
      //         z: -0.022911006648570736,
      //       },
      //       eye: {
      //         x: -2.126379643342493,
      //         y: -2.551422475965373,
      //         z: 1.0917667684145647,
      //       },
      //       projection: {
      //         type: "orthographic",
      //       },
      //     },
      //     staticPlot: false,
      //     showlegend: true,
      //     legend: {
      //       itemsizing: "constant", // ✅ 统一图例 marker 大小
      //       font: {
      //         size: 12,
      //       },
      //       marker: {
      //         size: 10,
      //       },
      //     },
      //   },
      //   margin: { t: 50, b: 50, l: 50, r: 50 },
      // };

      // Plotly.newPlot("plot", traces, layout);
    </script>
  </body>
</html>