38 lines
1.0 KiB
JavaScript
38 lines
1.0 KiB
JavaScript
import cls from './index.module.css';
|
|
import ReactECharts from 'echarts-for-react';
|
|
import getOptions from './chart.config';
|
|
import SocketContext from '../../../../store/socket-data-provider';
|
|
import { useContext } from 'react';
|
|
|
|
function GasChart(props) {
|
|
const { dataSource } = props;
|
|
const { hisState } = useContext(SocketContext);
|
|
|
|
const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
|
|
|
|
// keys() 的结果不是按照顺序的，需要 sort()
|
|
const seriesData = hisState?.[dataName]
|
|
? Object.keys(hisState?.[dataName])
|
|
.sort()
|
|
.map((key, index) => hisState?.[dataName][key])
|
|
: Array(dataSource == 'gas-i' ? 8 : 4).fill(Array(7).fill(0));
|
|
|
|
// debug
|
|
console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
|
|
|
|
return (
|
|
<div className={cls.gasChart}>
|
|
<ReactECharts
|
|
key={Math.random()}
|
|
option={getOptions(
|
|
seriesData,
|
|
dataSource == 'gas-i' ? '天然气I' : '天然气II',
|
|
)}
|
|
style={{ height: '100%' }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default GasChart;
|