React + less 实现纵横柱状图

之前的文章，咱们介绍过横向和竖向，具体的内容，请看

• React + CSS 绘制横向柱状图
• React + CSS 绘制竖状柱状图

这次，结合起来，横向和竖向，一起画

主要设计来源

www.zcool.com.cn/work/ZNjE5M…

三个部分

---

<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>

动态位置，使用绝对定位

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

具体的位置，是通过传入的参数来进行控制的。如果传入的参数不是具体的位置数值，前端也可以进行二次的计算。这里我就不演示了。之前的文章都有介绍，感兴趣的小伙伴可以去前两篇文章看一下。