101 lines
2.4 KiB
TypeScript
101 lines
2.4 KiB
TypeScript
import React, {useEffect, useRef} from "react";
|
|
import intl from "react-intl-universal";
|
|
import * as echarts from 'echarts';
|
|
|
|
import '../../../lanhuapp/common.css';
|
|
import "../../../lanhuapp/index.css";
|
|
import "../../style/standard.css"
|
|
import theme from "../../style/theme";
|
|
|
|
import {useAppSelector} from "../../../store/hooks";
|
|
import {selectWeekProductionRates} from "../../../store/ProductionMonitoringEntity";
|
|
|
|
|
|
function CenterDownChartWeek() {
|
|
const CenterDownChartRef = useRef(null)
|
|
const ProductionRates = useAppSelector(selectWeekProductionRates);
|
|
let ValueSeries: any[] = [];
|
|
let xAxisData: Array<string> = [];
|
|
// @ts-ignore
|
|
ProductionRates[Object.keys(ProductionRates)[0]].map((item) => {
|
|
xAxisData.push(new Date(item.time).toLocaleDateString('en-US', {
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
weekday: 'short',
|
|
}))
|
|
})
|
|
|
|
for (let item in ProductionRates) {
|
|
let dataValue: Array<number> = []
|
|
// @ts-ignore
|
|
ProductionRates[item].map((item) => {
|
|
dataValue.push(item.passRate);
|
|
})
|
|
ValueSeries.push({
|
|
name: item,
|
|
data: dataValue,
|
|
lineStyle: {width: 2},
|
|
symbol: "roundRect",
|
|
type: "line",
|
|
label: {show: true, color: 'white'}
|
|
})
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
// @ts-ignore
|
|
let chartInstance = echarts.init(CenterDownChartRef.current, theme);
|
|
|
|
const option = {
|
|
grid: {
|
|
top: "15%",
|
|
bottom: "0%",
|
|
left: "1.5%",
|
|
right: "0",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
selectedMode: false,
|
|
itemHeight: 8,
|
|
itemWidth: 13,
|
|
textStyle: {
|
|
fontSize: 10,
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xAxisData,
|
|
splitLine: {
|
|
show: false,
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: intl.get('Output'),
|
|
scale: true,
|
|
nameTextStyle: {
|
|
align: "right",
|
|
fontSize: 11,
|
|
color: "rgba(255, 255, 255, 1)",
|
|
verticalAlign: "middle",
|
|
padding: [0, 5, 0, 0]
|
|
}
|
|
},
|
|
series: ValueSeries
|
|
}
|
|
|
|
chartInstance.setOption(option);
|
|
chartInstance.resize();
|
|
|
|
return () => {
|
|
chartInstance.dispose()
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div ref={CenterDownChartRef} className="chart2"/>
|
|
);
|
|
}
|
|
|
|
export default CenterDownChartWeek; |