问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

各们老师，有见过这种图表吗，竖轴0-30号每天值，横轴1月1日-12月31日每天值，这种图表我用什么插件做？

头像
豫则立
    29111973

    有见过这种图表吗，竖轴0-30号每天值，横轴1月1日-12月31日每天值，这种图表我用什么插件做？

    技术栈：html,javascript,css

    前端javascriptecharts
    阅读 2.6k
    4 个回答
    得票最新
    头像头饰
    汝何不上九霄
      4.6k51744
      ✓ 已被采纳
      头像
      Chr_Isme
        121

        这就是一个设置了一些背景色的普通表格，自己手写就好了，不需要第三方组件。

        头像
        豫则立
          29111973
          <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图表</title>
  <style>
    #chart {
      width: 900px;
      background-color: rgba(255, 255, 255, 1);
      display: flex;
      font-size: 12px;
    }

    /*---y轴 小时---*/

    /* 小时 */
    #chart .y-axis {
      width: 30px;
      height: 168px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    #chart .y-axis div {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: calc(100% - 30px);
    }

    #chart .y-axis span {
      height: 15px;
      text-align: center;
    }

    /*---右侧内容---*/

    #chart .container {
      width: 870px;
      overflow-x: auto;
      overflow-y: hidden;
    }

    #chart .container .datas {
      width: 2555px;
      display: flex;
      justify-content: flex-start;
    }

    #chart .container .datas div {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    #chart .container .datas div span {
      width: 5px;
      height: 5px;
      border: .25px solid rgba(255, 255, 255);
    }

    /* x轴 所有月份 */
    #chart .container .x-axis {
      width: 2555px;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-around;
    }

    /*---颜色档位---*/
    .color-level {
      font-size: 12px;
      width: 900px;
      display: flex;
      justify-content: flex-end;
      margin: 10px 0 0;
    }

    .color-level .colors {
      display: flex;
      margin: 0 5px;
    }

    .color-level .colors span {
      font-size: 9px;
      width: 15px;
      height: 15px;
      line-height: 15px;
      text-align: center;
      border: .5px solid white;
    }
  </style>
</head>

<body>
  <h1>图形</h1>
  <div id="chart">
    <div class="y-axis"></div>
    <div class="container">
      <div class="datas"></div>
      <div class="x-axis"></div>
    </div>
  </div>
  <!-- 颜色档位 -->
  <div class="color-level">
    <span>更少的</span>
    <div class="colors"></div>
    <span>更多的</span>
  </div>

  <script>
    // 所有颜色值，11个
    const colors = [
      "rgba(240, 240, 240, 1)",
      "rgba(237, 255, 255, 1)",
      "rgba(217, 255, 255, 1)",
      "rgba(197, 239, 255, 1)",
      "rgba(177, 219, 255, 1)",
      "rgba(157, 199, 239, 1)",
      "rgba(137, 179, 219, 1)",
      "rgba(117, 159, 199, 1)",
      "rgba(97, 139, 179, 1)",
      "rgba(77, 119, 159, 1)",
      "rgba(37, 79, 119, 1)"
    ]

    // 生成颜色块的spans
    const colorsDiv = document.querySelector('.colors');
    let spans = "";
    for (let i = 0; i < colors.length; i++) {
      spans += `<span style="background-color: ${colors[i]}">${i / 10}</span>`
    }
    colorsDiv.innerHTML = spans;


    // 生成一天的小时，图表y轴坐标值
    const YAxisVal = document.querySelector('.y-axis');
    let hourSpans = `<span class="top">23</span><div><span>20</span><span>16</span><span>12</span><span>8</span><span>4</span></div><span class="bottom">0</span>`;
    // for (let i = 23; i >= 0; i--) {
    //   hourSpans += `<span>${i}</span>`
    // }
    YAxisVal.innerHTML = hourSpans;

    // 生成一年的月份，图表x轴坐标值
    let XAxisVal = document.querySelector('.x-axis');
    let monthSpans = "";
    for (let i = 0; i < 12; i++) {
      monthSpans += `<span>${i + 1}月</span>`
    }
    XAxisVal.innerHTML = monthSpans;


    /**
     * 生成一年的小时数据
    */
    function getYearHours() {
      let data = [];
      for (let i = 0; i < 8760; i++) {
        data.push(Math.random().toFixed(1))
      }
      return data;
    }

    // 全年的小时数
    const yearHours = getYearHours()

    console.log(yearHours);

    // 循环全年的小时数据增加span标签
    let yearHourDivs = ""
    let dayDiv = ""
    for (let i = 0; i < yearHours.length; i++) {
      if (i % 24 == 0) {
        // 一天的第1个值，放在字符的最前面
        dayDiv = `<span data-val='${yearHours[i]}' style="background-color: ${colors[parseInt(yearHours[i] * 10)]}"></span></div>`
      } else if (i % 24 == 23) {
        // 一天的最后1个值，放在字符的最前面
        dayDiv = dayDiv.replace(/^/, `<div><span data-val='${yearHours[i]}' style="background-color: ${colors[parseInt(yearHours[i] * 10)]}"></span>`);
        yearHourDivs += dayDiv
      } else {
        // 1天的中间值，放在字符的最前面
        dayDiv = dayDiv.replace(/^/, `<span data-val='${yearHours[i]}' style="background-color: ${colors[parseInt(yearHours[i] * 10)]}"></span>`);
      }
    }

    // console.log(yearHourDivs);

    // 给 datas div赋值
    const hoursAllData = document.querySelector('.datas');
    hoursAllData.innerHTML = yearHourDivs



  </script>
</body>

</html>
          头像
          我养了一窝汪汪
            9741517
            查看全部 4 个回答
            推荐问题
            宣传栏