import React,{useState,useEffect} from 'react';
//待引入Progress进度条。。。。
import './index.scss'
function Charts (props){
const {datas} = props;
const [nowColor, setNowColor] = useState('green');
const [nowNum, setNowNum] = useState('0%')
useEffect(()=>{
let _nowColor = 'green';
if(datas['now'].num >= datas['safe'].num){
_nowColor = 'red';
}
setNowNum(datas['now'].num+'%') //当前水位位移
setNowColor(_nowColor); //当前水位颜色
},[datas])
return(
<div className="charts">
<div className="top">
{/* legend图标 */}
<span><i style={{background:'skyblue'}}></i>驱逐水位</span>
<span><i style={{background:'purple'}}></i>安全水位</span>
<span><i style={{background:nowColor,width:5}}></i>当前水位</span>
</div>
<div className="bottom">
<div className="btm_l">
{/* y轴坐标 */}
<span style={{top:4}}>驱逐水位:<i>{datas['quzhu'].num + '%'}</i></span>
<span style={{top:25}}>安全水位:<i>{datas['safe'].num + '%'}</i></span>
</div>
<div className="btm_r">
<div className="chartsWrap">
{/* 虚线 */}
{[1,2,3,4,5,6].map(item=>{
return <span key={item} className="line"></span>
})}
{/* 水位进度条 */}
<Progress style={{position:'absolute',top:4}} color="skyblue" backgroundColor="rgba(35,35,35,0.1)" percent={datas['quzhu'].num} textRender={() => false} />
<Progress style={{position:'absolute',top:24}} color="purple" backgroundColor="hotpink" percent={datas['safe'].num} textRender={() => false} />
{/* 当前水位线 */}
<div className="nowLine" style={{background:nowColor,left:nowNum}}>
<div className="tooltip">
<span className="tipCricle" style={{background:nowColor}}></span>
<span>当前状态:{datas['now'].num + '%'}</span>
</div>
</div>
</div>
{/* x轴坐标 */}
<div className="charts_x">
{['0%','20%','40%','60%','80%','100%'].map((item,index)=>{
return <span key={index} className="line">{item}</span>
})}
</div>
</div>
</div>
</div>
)
}
export default Charts;
样式
.charts{
width: 400px;
height: 120px;
.top {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-end;
span{
font-size: 12px;
color: #000;
display: flex;
align-items: center;
i{
margin:0 7px 0 15px;
display: inline-block;
width:12px;
height: 12px;
}
}
}
.bottom{
width: 100%;
height: 80px;
display: flex;
.btm_l{
width: 100px;
height: 70px;
position: relative;
span{
font-size: 12px;
color: grey;
position: absolute;
i{
font-style: normal;
color: #000;
font-size: 14px;
font-weight: bold;
}
}
}
.btm_r{
flex: 1;
.chartsWrap{
width: 100%;
height: 60%;
position: relative;
display: flex;
justify-content: space-between;
.line{
display: inline-block;
width: 0px;
height: 100%;
border-left: 1px dashed #ccc;
}
.nowLine{
position: absolute;
width: 3px;
height: 100%;
cursor: pointer;
.tooltip{
padding-top: 4px;
width: 105px;
font-size: 12px;
color: #fff;
height: 26px;
background: rgba(48, 27, 27, 0.9);
position: absolute;
top: -9px;
left: 6px;
border-radius: 3px 3px;
display: none;
.tipCricle{
display: inline-block;
width: 5px;
height: 5px;
margin: 0 5px;
margin-top: -2px;
border-radius: 50%;
background-color: green;
}
}
&:hover{
.tooltip{
display: block;
}
}
}
.next-progress-line.next-medium .next-progress-line-overlay{
border-radius: 4px 4px!important;
}
}
.charts_x{
font-size: 12px;
width: 107%;
display: flex;
justify-content: space-between;
margin-left: -5px;
padding-top: 5px;
}
}
}
}