update 产线当日缺陷

src/components/BottomBar/FaultType/index.jsx

@@ -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>
 	);