React 柱状图
鹿鱼 人气:0前言:
页面结构分为两个部分,柱状图 + 文字为一部分,标注为为一部分。
先来看柱状图 + 文字这一部分。
宽度定为 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'));
运行结果:
加载全部内容