update 基本完成生产良品率

src/components/LeftBar/good.module.less

@@ -1,5 +1,5 @@
 .goodProd {
-	background: url(../../assets/good.png) no-repeat, #9f84;
+	background: url(../../assets/good.png) no-repeat;
 	background-size: 100% 100%;
 	width: 625px;
 	// height: 626px;

src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx

@@ -1,23 +1,108 @@
 import cls from './index.module.css';
 import './overwrite.css'; // 覆写 antd 默认样式，全局
 import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts';
 import { Switch, Radio } from 'antd';
+import { randomInt } from '../../../../utils';
 
 const GoodRateChart = (props) => {
 	const options = {
-		grid: { top: 28, right: 12, bottom: 20, left: 48 },
+		color: ['#FFD160', '#12FFF5', '#2760FF'],
+		grid: { top: 28, right: 12, bottom: 32, left: 48 },
 		xAxis: {
 			type: 'category',
-			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+			data: Array(7)
+				.fill(1)
+				.map((_, index) => {
+					const today = new Date();
+					const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+					return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+						dtimestamp,
+					).getDate()}`;
+				})
+				.reverse(),
+			axisLabel: {
+				color: '#fff',
+				fontSize: 12,
+			},
+			axisTick: { show: false },
+			axisLine: {
+				lineStyle: {
+					width: 1,
+					color: '#213259',
+				},
+			},
 		},
 		yAxis: {
 			type: 'value',
+			axisLabel: {
+				color: '#fff',
+				fontSize: 12,
+				formatter: '{value} %',
+			},
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: '#213259',
+				},
+			},
+			splitLine: {
+				lineStyle: {
+					color: '#213259a0',
+				},
+			},
+			interval: 10,
+			min: 0,
+			max: 100,
 		},
 		series: [
 			{
-				data: [820, 932, 901, 934, 1290, 1330, 1320],
+				data: Array(7)
+					.fill(1)
+					.map((_) => {
+						return randomInt(60, 100);
+					}),
 				type: 'line',
-				smooth: true,
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: '#FFD16040' },
+						{ offset: 0.5, color: '#FFD16020' },
+						{ offset: 1, color: '#FFD16010' },
+					]),
+				},
+				// smooth: true,
+			},
+			{
+				data: Array(7)
+					.fill(1)
+					.map((_) => {
+						return randomInt(60, 100);
+					}),
+				type: 'line',
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: '#12FFF540' },
+						{ offset: 0.5, color: '#12FFF520' },
+						{ offset: 1, color: '#12FFF510' },
+					]),
+				},
+				// smooth: true,
+			},
+			{
+				data: Array(7)
+					.fill(1)
+					.map((_) => {
+						return randomInt(60, 100);
+					}),
+				type: 'line',
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: '#2760FF40' },
+						{ offset: 0.5, color: '#2760FF20' },
+						{ offset: 1, color: '#2760FF10' },
+					]),
+				},
+				// smooth: true,
 			},
 		],
 		tooltip: {

src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.css

@@ -2,7 +2,7 @@
 	height: 1px;
 	flex: 1;
 	padding-top: 8px;
-	background: #ae27276a;
+	/* background: #ae27276a; */
 }
 .GoodRateChart .titleBar {
 	display: flex;
@@ -12,7 +12,7 @@
 }
 .GoodRateChart .titleBar h2 {
 	margin: 0;
-	font-size: 20px;
+	font-size: 18px;
 	line-height: 32px;
 	letter-spacing: 1.2px;
 	color: #52fff8;