第
React?less?实现纵横柱状图示例详解
目录引言主要设计来源display布局display布局动态位置使用绝对定位styleJS
引言
之前的文章，咱们介绍过横向和竖向，具体的内容，请看
React+CSS绘制横向柱状图React+CSS绘制竖状柱状图
这次，结合起来，横向和竖向，一起画
主要设计来源
三个部分
ulclassName=vertical
liclassName=vertical_li100/li
liclassName=vertical_li75/li
liclassName=vertical_li50/li
liclassName=vertical_li25/li
liclassName=vertical_li0/li
/ul
display布局
.vertical{
height:337px;
font-size:12px;
font-weight:bold;
color:#9eadca;
display:flex;
flex-direction:column;
justify-content:space-between;
ulclassName=crosswise
li0/li
li25/li
li50/li
li75/li
li100/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;
divclassName=point_list
{list.map((item,index)={
return(
className=point
动态位置使用绝对定位
.point_list{
width:308px;
height:308px;
position:absolute;
top:0px;
left:0px;
具体的位置，是通过传入的参数来进行控制的。如果传入的参数不是具体的位置数值，前端也可以进行二次的计算。这里我就不演示了。之前的文章都有介绍，感兴趣的小伙伴可以去前两篇文章看一下。
style
ul,
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:5px16px;
background-color:#dce0e6;
border-radius:6px;
color:#ffffff;
font-size:12px;
.english{
font-size:18px;
font-weight:500;
color:#ccd6e3;
.parallel_bottom{
display:flex;