70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import ReactECharts from "echarts-for-react";
|
|
import TitleBox from "../Component/TitleBox";
|
|
import SwitchButton from "../Component/SwitchButton";
|
|
import getOptions from "./SummaryBarChart/chart.config";
|
|
import { useState } from "react";
|
|
function LeftUp() {
|
|
// 假数据
|
|
const dataSource = {
|
|
day: {
|
|
xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
|
|
yData1: [236, 214, 196, 239, 224],
|
|
yData2: [346, 296, 327, 311, 322],
|
|
yData3: [78, 85, 56, 106, 66],
|
|
sumData: [660, 595, 579, 656, 612],
|
|
},
|
|
week: {
|
|
xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
|
|
yData1: [1336, 1223, 1313, 1134, 1119],
|
|
yData2: [2146, 1996, 2053, 1857, 1798],
|
|
yData3: [892, 658, 467, 758, 435],
|
|
sumData: [4374, 3877, 3833, 3749, 3352],
|
|
},
|
|
month: {
|
|
xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
|
|
yData1: [5789, 6432, 4679, 5456, 5004],
|
|
yData2: [8762, 9732, 8137, 8820, 9122],
|
|
yData3: [2468, 3120, 2782, 2395, 1924],
|
|
sumData: [17019, 19284, 15598, 16671, 16050],
|
|
},
|
|
};
|
|
const nameList = [
|
|
{ name: "天", ename: "day" },
|
|
{ name: "周", ename: "week" },
|
|
{ name: "月", ename: "month" },
|
|
];
|
|
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
|
let chartData = (dataSource as { [key: string]: any })[activeName];
|
|
const handleButtonChange = (activeName: string) => {
|
|
setActiveName(activeName);
|
|
};
|
|
const options = getOptions(chartData);
|
|
return (
|
|
<div className="left_up">
|
|
<TitleBox title={"left_up"} />
|
|
<div className="left_up_switch">
|
|
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
|
</div>
|
|
{options && (
|
|
<div className="left_up_chart">
|
|
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
|
</div>
|
|
)}
|
|
{!options && (
|
|
<p
|
|
style={{
|
|
color: "#cccf",
|
|
fontSize: "24px",
|
|
userSelect: "none",
|
|
textAlign: "center",
|
|
paddingTop: "72px",
|
|
}}
|
|
>
|
|
暂无数据
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
export default LeftUp;
|