|
|
@@ -7,6 +7,88 @@ import { randomInt } from '../../../utils'; |
|
|
|
import { useState } from 'react'; |
|
|
|
|
|
|
|
function FaultType(props) { |
|
|
|
const options = { |
|
|
|
// tooltip: { |
|
|
|
// trigger: 'item', |
|
|
|
// }, |
|
|
|
colors: [ |
|
|
|
'#2760FF', |
|
|
|
'#5B9BFF', |
|
|
|
'#FFD160', |
|
|
|
'#8167F6', |
|
|
|
'#99D66C', |
|
|
|
'#FF8A40', |
|
|
|
'#12FFF5', |
|
|
|
], |
|
|
|
grid: { |
|
|
|
left: 0, |
|
|
|
top: 0, |
|
|
|
bottom: 0, |
|
|
|
right: 0, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
icon: 'circle', |
|
|
|
top: 32, |
|
|
|
right: 0, |
|
|
|
bottom: 32, |
|
|
|
width: 296, |
|
|
|
height: 130, |
|
|
|
itemGap: 30, |
|
|
|
formatter: function (name) { |
|
|
|
// console.log('name o', name, options.series[0].data.find(o => o.name == name).value) |
|
|
|
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, |
|
|
|
}, |
|
|
|
// emphasis: { |
|
|
|
// label: { |
|
|
|
// show: true, |
|
|
|
// fontSize: 40, |
|
|
|
// fontWeight: 'bold', |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// labelLine: { |
|
|
|
// show: false, |
|
|
|
// }, |
|
|
|
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' }, |
|
|
@@ -39,7 +121,7 @@ function FaultType(props) { |
|
|
|
</Radio.Group> |
|
|
|
</div> |
|
|
|
<div className={cls.chart}> |
|
|
|
{/* <ReactECharts option={options} style={{ height: '100%' }} /> */} |
|
|
|
<ReactECharts option={options} style={{ height: '100%' }} /> |
|
|
|
</div> |
|
|
|
</BottomBarItem> |
|
|
|
); |
|
|
|