91 lines
2.2 KiB
TypeScript
91 lines
2.2 KiB
TypeScript
import React, {useEffect, useRef, useState} 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 {selectWeekProductionDets} from "../../../store/ProductionMonitoringEntity";
|
|
|
|
const color = ["#50f4e3", "#c69dff", "#ffb70c", "#1a99ff",]
|
|
|
|
interface barValue {
|
|
value: number,
|
|
itemStyle: {
|
|
color: string
|
|
}
|
|
}
|
|
|
|
function ChartWeek() {
|
|
const chartRef = useRef(null)
|
|
const ProductionDets = useAppSelector(selectWeekProductionDets);
|
|
|
|
useEffect(() => {
|
|
// @ts-ignore
|
|
let chartInstance = echarts.init(chartRef.current, theme);
|
|
const lineNameList: Array<string> = [];
|
|
const outputNumList: Array<barValue> = [];
|
|
ProductionDets.map((item, index) => {
|
|
lineNameList.push(item.lineName);
|
|
outputNumList.push({value: item.outputNum, itemStyle: {color: color[index]}});
|
|
})
|
|
|
|
const option = {
|
|
grid: {
|
|
top: "15%",
|
|
bottom: "0%",
|
|
left: "5%",
|
|
right: "5%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: lineNameList,
|
|
splitLine: {
|
|
show: false,
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: intl.get('Output'),
|
|
scale: false,
|
|
nameTextStyle: {
|
|
align: "right",
|
|
fontSize: 10,
|
|
color: "rgba(255, 255, 255, 1)",
|
|
verticalAlign: "middle",
|
|
padding: [0, 8, 0, 0]
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
data: outputNumList,
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
symbol: "none",
|
|
label: {
|
|
show: true,
|
|
rotate: 90,
|
|
fontSize: 16,
|
|
color: "rgba(255, 255, 255, 1)",
|
|
offset:[0,22]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
chartInstance.setOption(option);
|
|
chartInstance.resize();
|
|
return () => {
|
|
chartInstance.dispose()
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div ref={chartRef} className="chart1"/>
|
|
);
|
|
}
|
|
|
|
export default ChartWeek; |