forked from Gitlink/forgeplus-react
52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import StackImg from './stackImg';
|
|
import { Select } from 'antd';
|
|
|
|
function DataStack({ data }){
|
|
const [ keys , setKeys ] = useState([]);
|
|
const [ values , setValues ] = useState([]);
|
|
|
|
|
|
const [ userDrop , setUserDrop ] = useState([]);
|
|
const [ userValue , setUserValue ] = useState([]);
|
|
useEffect(()=>{
|
|
if(data){
|
|
let drop = Object.keys(data);
|
|
console.log("---",drop);
|
|
setUserDrop(drop);
|
|
setUserValue(drop[0]);
|
|
}
|
|
},[data])
|
|
|
|
useEffect(()=>{
|
|
if(data && userValue){
|
|
let arr = data[userValue];
|
|
let ks = arr && Object.keys(arr);
|
|
let vs = arr && Object.values(arr);
|
|
setKeys(ks);
|
|
setValues(vs);
|
|
}
|
|
},[data,userValue])
|
|
|
|
return(
|
|
<div>
|
|
{
|
|
userValue && userDrop && userDrop.length>0 &&
|
|
<div style={{textAlign:"left",paddingLeft:20}}>
|
|
<span className='mr10'>公司名:</span>
|
|
<Select
|
|
value={userValue}
|
|
style={{ width: 220 }}
|
|
onChange={(e)=>{setUserValue(e);}}
|
|
>
|
|
{userDrop.map(value => {
|
|
return <Option key={value}>{value}</Option>
|
|
})}
|
|
</Select>
|
|
</div>
|
|
}
|
|
<StackImg x={keys} values={[{name:"", type: 'line',stack: 'Total',data:values}]} id={"companyNum"}/>
|
|
</div>
|
|
)
|
|
}
|
|
export default DataStack; |