前言：
页面结构分为两个部分，柱状图 + 文字为一部分，标注为为一部分。
先来看柱状图 + 文字这一部分。
宽度定为 width: 55, height 高度使用百分比进行动态变化。整个部分使用 flex 布局。通过 justify-content: space-around; 属性，对里面的项目进行排列。项目 item 同样使用 flex 布局，这个是对 柱状图 + 文字 进行整体的排列。
<div className="crosswise_diagram_top">
{listData.map((item) => {
return (
<div className="crosswise_diagram_item" key={item.value}>
<div className="crosswise_diagram_item_precent">
<div
className="precent"
style={{
width: 55,
height: `${item.percent}%`
}}
>
<div>
选项三 <span>254</span>
</div>
</div>
</div>
<div className="crosswise_diagram_item_name">{item.name}</div>
</div>
)
})}
</div>.crosswise_diagram_top {
display: flex;
justify-content: space-around;
height: 100%;
.crosswise_diagram_item {
display: flex;
flex-direction: column;
width: 55px;
position: relative;
justify-content: end;
height: 100%;
.crosswise_diagram_item_name {
margin-top: 11px;
font-size: 16px;
font-weight: 400;
color: #07132b;
}
.crosswise_diagram_item_precent {
height: 100%;
display: contents;
.precent {
border-radius: 4px;
position: relative;
&::after {
content: '';
height: 102%;
border-right: 1px dashed #07132b;
position: absolute;
top: -2%;
}
> div {
position: absolute;
width: 66px;
text-align: center;
top: -2%;
height: 21px;
margin-top: -21px;
}
}
}
}
}下方的标注部分，使用绝对定位，width = 100%，height = 100%，实现标注和渐变柱形部分的重叠。
这部分将 li 标签的 width = 100%，间隔通过 top 来动态实现。
<div className="crosswise_diagram_bottom">
<ul className="crosswise_diagram_ul">
{scaleArray.map((item, itemIndex) => {
return (
<li
className="crosswise_diagram_li"
style={{ top: `${(100 / 5) * itemIndex}%` }}
key={item}
>
<span className="crosswise_diagram_name">{item}</span>
<span className="crosswise_diagram_precent" />
</li>
)
})}
</ul>
</div>.crosswise_diagram_bottom {
position: absolute;
top: -36px;
left: -55px;
height: 100%;
width: 100%;
.crosswise_diagram_ul {
width: 100%;
.crosswise_diagram_li {
width: 100%;
position: absolute;
display: flex;
flex-direction: row;
.crosswise_diagram_name {
position: relative;
top: -9px;
width: 45px;
font-size: 12px;
font-weight: bold;
color: #a6b1bf;
}
.crosswise_diagram_precent {
width: 90%;
height: 100%;
border-top: 1px dashed #d7dbe0;
color: #a6b1bf;
}
}
}
}关于数值的计算，这里笔者是找到这一组数据里面的最大值
let maxValue = 0;
data.forEach((dataItem) => {
if (dataItem.value > maxValue) maxValue = dataItem.value;
});获取最大值最近的100整数
let maxScaleNum = Math.ceil(maxValue / 100) * 100
计算每一个数据的 value，占最大值最近的100整数的百分比。
percent: (dataItem.value / maxScaleNum) * 100
标注的top，使用 for 循环生成。
const multiple = Math.floor(maxScaleNum / scaleNum)
const newArray = new Array()
for (let i = 0; i <= maxScaleNum; i += multiple) {
newArray.push(i)
}
setScaleArray(newArray.reverse())整体代码：
import React, { useState, useEffect } from 'react';
import ReactDom from 'react-dom';
const Test = ({ data, scaleNum = 5 }) => {
const [listData, setListData] = useState(
[]
)
const [scaleArray, setScaleArray] = useState([])
useEffect(() => {
if (scaleNum <= 0) {
return
}
let maxValue = 0
data.forEach((dataItem) => {
if (dataItem.value > maxValue) maxValue = dataItem.value
})
let maxScaleNum = Math.ceil(maxValue / 100) * 100
if (maxValue <= 0) {
setScaleArray(new Array(scaleNum).fill(0))
setListData(
data.map((dataItem) => {
return {
name: dataItem.name,
percent: 0,
value: 0
}
})
)
return
}
setListData(
data.map((dataItem) => {
return {
name: dataItem.name,
percent: (dataItem.value / maxScaleNum) * 100,
value: dataItem.value
}
})
)
const multiple = Math.floor(maxScaleNum / scaleNum)
const newArray = new Array()
for (let i = 0; i <= maxScaleNum; i += multiple) {
newArray.push(i)
}
setScaleArray(newArray.reverse())
}, [data, scaleNum])
return (
<section className="crosswise_diagram">
<div className="crosswise_diagram_top">
{listData.map((item) => {
return (
<div className="crosswise_diagram_item" key={item.value}>
<div className="crosswise_diagram_item_precent">
<div
className="precent"
style={{
width: 55,
height: `${item.percent}%`
}}
>
<div>
选项三 <span>254</span>
</div>
</div>
</div>
<div className="crosswise_diagram_item_name">{item.name}</div>
</div>
)
})}
</div>
<div className="crosswise_diagram_bottom">
<ul className="crosswise_diagram_ul">
{scaleArray.map((item, itemIndex) => {
return (
<li
className="crosswise_diagram_li"
style={{ top: `${(100 / 5) * itemIndex}%` }}
key={item}
>
<span className="crosswise_diagram_name">{item}</span>
<span className="crosswise_diagram_precent" />
</li>
)
})}
</ul>
</div>
</section>
)
}
ReactDom.render(<Test style={{ width: 440 }}
scaleNum={6}
data={[
{
name: '西瓜',
value: 40
},
{
name: '菠萝',
value: 56
},
{
name: '香蕉',
value: 47
}
]} />, document.getElementById('app'));运行结果：
