diff --git a/src/components/BottomBar/gasi/index.jsx b/src/components/BottomBar/gasi/index.jsx
index 2b458ce..5307fde 100644
--- a/src/components/BottomBar/gasi/index.jsx
+++ b/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 (
{/* 助燃风流量 - linechart - 当前流量 - 0 legends - 1 line */}
{/* 当前流量 */}
当前流量: 280m³
+
+
+
+
);
}
diff --git a/src/components/BottomBar/gasii/index.jsx b/src/components/BottomBar/gasii/index.jsx
index 76a67ef..239cc72 100644
--- a/src/components/BottomBar/gasii/index.jsx
+++ b/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 (
{/* 当前流量 */}
@@ -24,7 +117,7 @@ function GasII(props) {
- {/* */}
+
);