update 流量

src/components/BottomBar/gasi/index.jsx

@@ -1,12 +1,97 @@
 import cls from './index.module.css';
 import BottomBarItem from '../BottomBarItem';
+import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+import { randomInt } from '../../../utils';
 
 function GasI(props) {
+	const options = {
+		color: ['#12FFF5', '#2760FF', '#FFD160'],
+		grid: { top: 32, right: 12, bottom: 20, left: 48 },
+		xAxis: {
+			type: 'category',
+			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: {
+			name: '单位/m³',
+			nameTextStyle: {
+				color: '#fff',
+				fontSize: 10,
+				align: 'right',
+			},
+			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: 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,
+			},
+		],
+		tooltip: {
+			trigger: 'axis',
+		},
+	};
+
 	return (
 		<BottomBarItem icon="pause" title="助燃风流量" className={cls.gas}>
 			{/* 助燃风流量 - linechart - 当前流量 - 0 legends - 1 line */}
 			{/* 当前流量  */}
 			<div className={cls.currentFlow}>当前流量: 280m³</div>
+
+			<div className={cls.chart}>
+				<ReactECharts option={options} style={{ height: '100%' }} />
+			</div>
 		</BottomBarItem>
 	);
 }

src/components/BottomBar/gasii/index.jsx

@@ -1,11 +1,104 @@
 import cls from './index.module.css';
 import BottomBarItem from '../BottomBarItem';
-import { Switch, Radio } from 'antd';
 import ReactECharts from 'echarts-for-react';
 import * as echarts from 'echarts';
 import { randomInt } from '../../../utils';
 
 function GasII(props) {
+	const options = {
+		color: ['#12FFF5', '#2760FF', '#FFD160'],
+		grid: { top: 38, right: 12, bottom: 20, left: 48 },
+		xAxis: {
+			type: 'category',
+			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: {
+			name: '单位m³/h',
+			nameTextStyle: {
+				color: '#fff',
+				fontSize: 10,
+				align: 'right',
+			},
+			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: Array(7)
+					.fill(1)
+					.map((_) => {
+						return randomInt(1000, 2000);
+					}),
+				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(1000, 2000);
+					}),
+				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: {
+			trigger: 'axis',
+		},
+	};
+
 	return (
 		<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
 			{/* 当前流量  */}
@@ -24,7 +117,7 @@ function GasII(props) {
 			</div>
 
 			<div className={cls.chart}>
-				{/* <ReactECharts option={options} style={{ height: '100%' }} /> */}
+				<ReactECharts option={options} style={{ height: '100%' }} />
 			</div>
 		</BottomBarItem>
 	);