echarts rgb hsv 颜色空间-CSDN博客

本文链接：https://blog.csdn.net/qq_35516360/article/details/122065473

rgb 颜色空间

<!DOCTYPE html>
<html style="height: 100%">
<head>
  <meta charset="utf-8">
  <title>RGB 颜色空间可视化</title>
</head>
<body style="height: 100%; margin: 0;">
<div id="container" style="height: 100%;"></div>
<script type="text/javascript" src="../../js/echarts.min.js"></script>
<script type="text/javascript" src="../../js/echarts-gl.min.js"></script>
<script type="text/javascript">
  // 获取dom
  let dom = document.getElementById("container");
  // 初始化
  let myChart = echarts.init(dom);

  // 渲染的点集
  let points = []
  // 颜色间隔步长, 点集越大, 会卡...
  let step = 8

  // 颜色最大值
  let limit = 256
  for (let r = 0; r < limit; r += step) {
    for (let g = 0; g < limit; g += step) {
      for (let b = 0; b < limit; b += step) {
        points.push(
          // 一个点由五个数据组成,前三个是x,y,z坐标,最后一个是鼠标悬浮时的提示
          // 第4个是一个需要做另外配置才能生效的颜色相关值, 这里我们用不到
          [r, g, b, null, `${r}-${g}-${b}`]
        )
      }
    }
  }
  let option = {
    grid3D: {},
    // 对坐标轴重新命名
    xAxis3D: {
      name: "R"
    },
    yAxis3D: {
      name: "G"
    },
    zAxis3D: {
      name: "B"
    },
    series: [
      {
        type: 'scatter3D',
        data: points,
        // 我们颜色的渲染使用的是函数式,对每个点, 返回改点对应的rgb颜色值
        color: ({data}) => {
          console.log(data)
          let [r, g, b] = data
          return `rgb(${r},${g},${b})`
        }
      }
    ]
  };
  myChart.setOption(option, true);
  window.onresize = myChart.resize;

</script>
</body>
</html>

hsv 颜色空间

<!DOCTYPE html>
<html style="height: 100%">
<head>
  <meta charset="utf-8">
  <title>HSV 颜色空间可视化</title>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="../echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript">
  function hsv2rgb(h, s, v) {
    s = s / 100;
    v = v / 100;
    let h1 = Math.floor(h / 60) % 6;
    let f = h / 60 - h1;
    let p = v * (1 - s);
    let q = v * (1 - f * s);
    let t = v * (1 - (1 - f) * s);
    let r, g, b;
    switch (h1) {
      case 0:
        r = v;
        g = t;
        b = p;
        break;
      case 1:
        r = q;
        g = v;
        b = p;
        break;
      case 2:
        r = p;
        g = v;
        b = t;
        break;
      case 3:
        r = p;
        g = q;
        b = v;
        break;
      case 4:
        r = t;
        g = p;
        b = v;
        break;
      case 5:
        r = v;
        g = p;
        b = q;
        break;
    }
    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  }


  // 获取dom
  let dom = document.getElementById("container");
  // 初始化
  let myChart = echarts.init(dom);

  // 渲染的点集
  let points = []
  // 颜色间隔步长, 点集越大, 会卡...
  let step = 5

  for (let h = 0; h < 360; h += step)
    for (let s = 0; s < 100; s += step)
      for (let v = 0; v < 100; v += step) {
        let [r, g, b] = hsv2rgb(h, s, v)
        r = Math.round(r)
        g = Math.round(g)
        b = Math.round(b)
        console.log(r, g, b)
        let x = s * Math.cos(h * Math.PI / 180)
        let y = s * Math.sin(h * Math.PI / 180)
        if (r < 0 || g < 0 || b < 0 || v < s)
          continue
        points.push(
          [
            x, y, v,
            null,
            `${h}-${s}-${v}`,
            `rgb(${r},${g},${b})`
          ]
        )
      }

  let option = {
    grid3D: {},
    // 对坐标轴重新命名
    xAxis3D: {
      name: "R"
    },
    yAxis3D: {
      name: "G"
    },
    zAxis3D: {
      name: "B"
    },
    series: [
      {
        type: 'scatter3D',
        data: points,
        // 我们颜色的渲染使用的是函数式,对每个点, 返回改点对应的rgb颜色值
        color: ({data}) => {
          console.log(data[5])
          return data[5]
        }
      }
    ]
  };

  myChart.setOption(option, true);
</script>


<script type="text/javascript">

  // 两个浮点数求和
  function accAdd(num1, num2) {
    let r1, r2, m;
    try {
      r1 = num1.toString().split('.')[1].length;
    } catch (e) {
      r1 = 0;
    }
    try {
      r2 = num2.toString().split(".")[1].length;
    } catch (e) {
      r2 = 0;
    }
    m = Math.pow(10, Math.max(r1, r2));
    // return (num1*m+num2*m)/m;
    return Math.round(num1 * m + num2 * m) / m;
  }

  // 两个浮点数相减
  function accSub(num1, num2) {
    let r1, r2, m;
    try {
      r1 = num1.toString().split('.')[1].length;
    } catch (e) {
      r1 = 0;
    }
    try {
      r2 = num2.toString().split(".")[1].length;
    } catch (e) {
      r2 = 0;
    }
    m = Math.pow(10, Math.max(r1, r2));
    n = (r1 >= r2) ? r1 : r2;
    return (Math.round(num1 * m - num2 * m) / m).toFixed(n);
  }

  // 两数相除
  function accDiv(num1, num2) {
    let t1, t2, r1, r2;
    try {
      t1 = num1.toString().split('.')[1].length;
    } catch (e) {
      t1 = 0;
    }
    try {
      t2 = num2.toString().split(".")[1].length;
    } catch (e) {
      t2 = 0;
    }
    r1 = Number(num1.toString().replace(".", ""));
    r2 = Number(num2.toString().replace(".", ""));
    return (r1 / r2) * Math.pow(10, t2 - t1);
  }

  function accMul(num1, num2) {
    let m = 0, s1 = num1.toString(), s2 = num2.toString();
    try {
      m += s1.split(".")[1].length
    } catch (e) {
    }
    ;
    try {
      m += s2.split(".")[1].length
    } catch (e) {
    }
    ;
    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
  }

</script>

<script type="text/javascript">
  document.write("使用js原生态方法");
  document.write("<br/> 1.01 + 1.02 =" + (1.01 + 1.02));
  document.write("<br/> 1.01 - 1.02 =" + (1.01 - 1.02));
  document.write("<br/> 0.000001 / 0.0001 =" + (0.000001 / 0.0001));
  document.write("<br/> 0.012345 * 0.000001 =" + (0.012345 * 0.000001));
  document.write("<br/><hr/>");
  document.write("<br/>使用自定义方法");
  document.write("<br/> 1.01 + 1.02 =" + accAdd(1.01, 1.02));
  document.write("<br/> 1.01 - 1.02 =" + accSub(1.01, 1.02));
  document.write("<br/> 0.000001 / 0.0001 =" + accDiv(0.000001, 0.0001));
  document.write("<br/> 0.012345 * 0.000001 =" + accMul(0.012345, 0.000001));
</script>

</body>
</html>