From d269314cd23cdd7bd7a95494a946d01fd7ae8697 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Sun, 2 Jul 2023 15:08:56 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BA=A7=E7=BA=BF=E5=BD=93=E6=97=A5?=
 =?UTF-8?q?=E7=BC=BA=E9=99=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BottomBar/FaultType/index.jsx | 84 +++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/src/components/BottomBar/FaultType/index.jsx b/src/components/BottomBar/FaultType/index.jsx
index 9fdc1a7..e1b9463 100644
--- a/src/components/BottomBar/FaultType/index.jsx
+++ b/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>
 	);