React?less?實現(xiàn)縱橫柱狀圖示例詳解

更新時間：2022年09月19日 10:09:48 作者：鹿魚

這篇文章主要介紹了React?less?實現(xiàn)縱橫柱狀圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

之前的文章，咱們介紹過橫向和豎向，具體的內(nèi)容，請看

這次，結(jié)合起來，橫向和豎向，一起畫

主要設(shè)計來源

三個部分

<ul className="vertical">
  <li className="vertical_li">100</li>
  <li className="vertical_li">75</li>
  <li className="vertical_li">50</li>
  <li className="vertical_li">25</li>
  <li className="vertical_li">0</li>
</ul>

display 布局

.vertical {
  height: 337px;
  font-size: 12px;
  font-weight: bold;
  color: #9eadca;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<ul className="crosswise">
  <li>0</li>
  <li>25</li>
  <li>50</li>
  <li>75</li>
  <li>100</li>
</ul>

display 布局

.crosswise {
  width: 335px;
  font-size: 12px;
  font-weight: bold;
  color: #9eadca;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: -31px;
  margin-left: -21px;
}

<div className="point_list">
  {list.map((item, index) => {
    return (
      <div
        className="point"
        style={{ top: `${100 - parseFloat(item.y)}%`, left: `${item.x}%` }}
        onMouseEnter={() => onMouseEnter(item, index)}
        onMouseLeave={() => onMouseLeave(index)}
        key={index}
      >
        {item.name}
      </div>
    )
  })}
</div>

動態(tài)位置使用絕對定位

.point_list {
  width: 308px;
  height: 308px;
  position: absolute;
  top: 0px;
  left: 0px;
}

具體的位置，是通過傳入的參數(shù)來進行控制的。如果傳入的參數(shù)不是具體的位置數(shù)值，前端也可以進行二次的計算。這里我就不演示了。之前的文章都有介紹，感興趣的小伙伴可以去前兩篇文章看一下。

style

ul,
li {
  list-style: none;
  padding: 0;
}
.parallel-comparison {
  height: 300px;
  padding-left: 35px;
  padding-top: 49px;
  padding-right: 29px;
  // height: 100%;
  .parallel_top {
    display: flex;
    height: 33px;
    align-items: center;
    .samll {
      display: inline-block;
      width: 4px;
      height: 24px;
      background-color: #085dff;
      border-radius: 3px;
    }
    .text {
      font-size: 24px;
      font-weight: 500;
      color: #085dff;
      line-height: 33px;
      margin-left: 8px;
      margin-right: 24px;
    }
    .history {
      padding: 5px 16px;
      background-color: #dce0e6;
      border-radius: 6px;
      color: #ffffff;
      font-size: 12px;
    }
  }
  .english {
    font-size: 18px;
    font-weight: 500;
    color: #ccd6e3;
  }
  .parallel_bottom {
    display: flex;
    margin-top: 48px;
    .left {
      height: 424px;
      box-shadow: 0px 0px 32px 0px rgba(0, 40, 96, 0.07);
      border-radius: 8px;
      padding-top: 15px;
      padding-left: 25px;
      h3 {
        font-size: 18px;
        font-weight: 400;
        color: #07132b;
      }
      .left_bottom {
        display: flex;
        width: 553px;
        .content {
          display: flex;
          flex-direction: column;
          .willingness {
            color: #9eadca;
            margin-left: 140px;
          }
          .gradual_change {
            display: flex;
            flex-direction: row;
            align-items: center;
            .box {
              width: 308px;
              height: 308px;
              background-color: #f2f6f6;
              margin-left: 27px;
              position: relative;
              .vertical {
                height: 337px;
                font-size: 12px;
                font-weight: bold;
                color: #9eadca;
                display: flex;
                flex-direction: column;
                margin-top: -8px;
                margin-left: -21px;
                justify-content: space-between;
              }
              .crosswise {
                width: 335px;
                font-size: 12px;
                font-weight: bold;
                color: #9eadca;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin-top: -31px;
                margin-left: -21px;
              }
              .point_list {
                width: 308px;
                height: 308px;
                position: absolute;
                top: 0px;
                left: 0px;
                .point {
                  position: absolute;
                  background-color: #ffffff;
                  text-align: center;
                  padding: 2px 5px;
                  font-size: 12px;
                  border-radius: 20px;
                  background: #e6eef4;
                  box-shadow: 20px 20px 60px #c4cacf, -20px -20px 60px #ffffff;
                }
              }
            }
            .good_value {
              display: inline-block;
              width: 15px;
              writing-mode: vertical-lr;
              color: #9eadca;
              font-size: 14px;
              margin-left: 12px;
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
}

JS

import React, { useState, useEffect } from 'react';
import ReactDom from 'react-dom';
const ParallelComparison = ({ gradualChangeDataList }) => {
  const [list, setList] = useState(gradualChangeDataList)
  useEffect(() => {
    const _list = list
      .map((item) => {
        return {
          ...item,
          sum: parseFloat(item.x) + parseFloat(item.y),
          isHover: false
        }
      })
      .sort((a, b) => b.sum - a.sum)
  }, [gradualChangeDataList])
  return (
    <div className="parallel-comparison">
      <div className="parallel_bottom">
        <div className="left">
          <div className="left_bottom">
            <div className="content">
              <div className="gradual_change">
                <div className="box">
                  <ul className="vertical">
                    <li className="vertical_li">100</li>
                    <li className="vertical_li">75</li>
                    <li className="vertical_li">50</li>
                    <li className="vertical_li">25</li>
                    <li className="vertical_li">0</li>
                  </ul>
                  <ul className="crosswise">
                    <li>0</li>
                    <li>25</li>
                    <li>50</li>
                    <li>75</li>
                    <li>100</li>
                  </ul>
                  <div className="point_list">
                    {list.map((item, index) => {
                      return (
                        <div
                          className="point"
                          style={{ top: `${100 - parseFloat(item.y)}%`, left: `${item.x}%` }}
                          key={index}
                        >
                          {item.name}
                        </div>
                      )
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
const Test = function () {
  const _arr = new Array()
for (let i = 0; i < 5; i++) {
  _arr.push({
    id: i,
    x: (Math.random() * 100).toFixed(2),
    y: (Math.random() * 100).toFixed(2),
    name: '碧螺春',
  })
}
  return (
    <ParallelComparison gradualChangeDataList={_arr} />
  );
};
ReactDom.render(<Test />, document.getElementById('app'));

以上就是React less 實現(xiàn)縱橫柱狀圖示例詳解的詳細內(nèi)容，更多關(guān)于React less縱橫柱狀圖的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: