108 lines
2.1 KiB
JavaScript
108 lines
2.1 KiB
JavaScript
import cls from './index.module.css';
|
|
import GraphBase from '../GraphBase';
|
|
import ReactECharts from 'echarts-for-react';
|
|
import { useState } from 'react';
|
|
|
|
function FaultType(props) {
|
|
const options = {
|
|
colors: [
|
|
'#2760FF',
|
|
'#5B9BFF',
|
|
'#FFD160',
|
|
'#8167F6',
|
|
'#99D66C',
|
|
'#FF8A40',
|
|
'#12FFF5',
|
|
],
|
|
grid: {
|
|
left: 24,
|
|
top: 10,
|
|
bottom: 10,
|
|
right: 24,
|
|
},
|
|
legend: {
|
|
icon: 'circle',
|
|
top: 32,
|
|
right: 0,
|
|
bottom: 32,
|
|
width: 296,
|
|
height: 130,
|
|
itemGap: 30,
|
|
formatter: function (name) {
|
|
return `${name} {sub|${
|
|
options.series[0].data.find((o) => o.name == name).value
|
|
}}`;
|
|
},
|
|
textStyle: {
|
|
color: '#DFF1FE',
|
|
fontSize: 18,
|
|
rich: {
|
|
sub: {
|
|
color: '#fff9',
|
|
fontSize: 18,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
center: ['26%', '54%'],
|
|
radius: ['55%', '75%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
formatter: '{d}%',
|
|
fontSize: 14,
|
|
color: 'inherit',
|
|
},
|
|
labelLine: {
|
|
length: 0,
|
|
},
|
|
data: [
|
|
{ value: 1048, name: '缺陷1' },
|
|
{ value: 735, name: '缺陷2' },
|
|
{ value: 580, name: '缺陷3' },
|
|
{ value: 484, name: '缺陷4' },
|
|
{ value: 300, name: '缺陷5' },
|
|
{ value: 300, name: '缺陷6' },
|
|
{ value: 300, name: '缺陷8' },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
const [lines, setLines] = useState([
|
|
{ id: 1, label: '产线1', value: 'l1' },
|
|
{ id: 2, label: '产线2', value: 'l2' },
|
|
{ id: 3, label: '产线3', value: 'l3' },
|
|
{ id: 4, label: '产线4', value: 'l4' },
|
|
{ id: 5, label: '产线5', value: 'l5' },
|
|
]);
|
|
|
|
function handleDateChange(v) {
|
|
console.log('date ', v);
|
|
}
|
|
|
|
// 根据使用的页面决定背景的大小
|
|
const bgSize =
|
|
props.page == 'home' ? ['middle', 'short'] : ['middle', 'short'];
|
|
|
|
return (
|
|
<GraphBase
|
|
icon="battery"
|
|
title="产线当日缺陷分类"
|
|
dateOptions={lines.map((item) => item.label)}
|
|
onDateChange={handleDateChange}
|
|
size={bgSize}
|
|
style={{ width: '600px' }}
|
|
>
|
|
<div className={cls.chart}>
|
|
<ReactECharts option={options} style={{ height: '100%' }} />
|
|
</div>
|
|
</GraphBase>
|
|
);
|
|
}
|
|
|
|
export default FaultType;
|