115 lines
2.8 KiB
TypeScript
115 lines
2.8 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 {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
|
|
|
|
function RightTopChartMonthQ() {
|
|
const ChartRef = useRef(null)
|
|
const AllData = useAppSelector(selectQualityMonitorEntity);
|
|
const LineQualityAll = AllData.monthQualityLineAll;
|
|
|
|
let ValueSeries: any[] = [];
|
|
let xAxisData: Array<string> = [];
|
|
|
|
for (let item in LineQualityAll) {
|
|
// @ts-ignore
|
|
LineQualityAll[item].map((item) => {
|
|
if (!xAxisData.includes(item.content)) {
|
|
xAxisData.push(item.content)
|
|
}
|
|
})
|
|
}
|
|
|
|
for (let LineItem in LineQualityAll) {
|
|
let dataValue: Array<number> = []
|
|
xAxisData.map((TypeItem) => {
|
|
let thisdata = 0
|
|
// @ts-ignore
|
|
LineQualityAll[LineItem].map((item) => {
|
|
if (item.content == TypeItem) {
|
|
thisdata = thisdata + item.num;
|
|
}
|
|
})
|
|
dataValue.push(thisdata)
|
|
})
|
|
ValueSeries.push({
|
|
name: LineItem,
|
|
data: dataValue,
|
|
type: "bar",
|
|
itemStyle: {
|
|
borderRadius: [100, 100, 0, 0]
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
// @ts-ignore
|
|
let chartInstance = echarts.init(ChartRef.current, theme);
|
|
|
|
const option = {
|
|
grid: {
|
|
top: "15%",
|
|
bottom: "0%",
|
|
left: "0%",
|
|
right: "0",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
selectedMode: false,
|
|
itemHeight: 8,
|
|
itemWidth: 13,
|
|
textStyle: {
|
|
fontSize: 10,
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xAxisData,
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
width: 1200 / xAxisData.length,
|
|
interval: 0,
|
|
overflow: "truncate",
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: intl.get('DefectNumber'),
|
|
scale: false,
|
|
nameTextStyle: {
|
|
align: "left",
|
|
fontSize: 12,
|
|
color: "rgba(255, 255, 255, 1)",
|
|
verticalAlign: "middle",
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
borderWidth: 0,
|
|
textStyle: {
|
|
color: "rgba(255, 255, 255, 1)",
|
|
fontSize: 12
|
|
}
|
|
},
|
|
series: ValueSeries
|
|
}
|
|
|
|
chartInstance.setOption(option);
|
|
chartInstance.resize();
|
|
})
|
|
return (
|
|
<div ref={ChartRef} className="chart5"/>
|
|
)
|
|
}
|
|
|
|
export default RightTopChartMonthQ; |