import React, { memo, useEffect, useMemo, useRef } from 'react'; import { BasicChart } from '@wisdom-components/basicchart'; import PandaEmpty from '@wisdom-components/empty'; import optionGenerator, { alarmMarkLine, minMaxMarkPoint, offlineArea } from './utils'; import { isArray, cloneDeep } from 'lodash'; const SimgleChart = memo((props) => { const { dataSource, contrast = false, contrastOption = 'day', smooth = true, curveCenter, showGridLine = true, deviceAlarmSchemes, chartType, // justLine, showBoxOption, } = props; const chartRef = useRef(); const option = useMemo(() => { const config = { needUnit: true, curveCenter, showGridLine, deviceAlarmSchemes, showMarkLine: true, showPoint: true, chartType, // justLine, showBoxOption, }; return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config); }, [dataSource, smooth, curveCenter]); useEffect(() => { chartRef.current?.resize?.(); const chart = chartRef.current?.getEchartsInstance?.(); function hander(params) { const { selected } = params; const count = Object.values(selected || {}).filter((item) => item).length; const option = cloneDeep(chart.getOption()); const needMarkLine = count === 1; // 需求变更:设备离线改用“是否在线”的数据,离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55 let _tempDataArray = dataSource.filter((item) => item.sensorName === '是否在线'); option.series.forEach((item, index) => { let _data = _tempDataArray.find((offline) => offline.stationCode === item.stationCode); let offlineAreas = offlineArea(_data); if (offlineAreas.data?.length) { option.markArea = null; item.markArea = offlineAreas; } if (needMarkLine && selected[item.name]) { item.markLine = alarmMarkLine( dataSource[index], index, [dataSource[index]], deviceAlarmSchemes, ); item.markPoint = minMaxMarkPoint(dataSource[index], index, [dataSource[index]]); } else { item.markLine = {}; item.markPoint = {}; } }); chart.setOption(option, true); } if (!chart) return; chart.on('legendselectchanged', hander); return () => { chart.off('legendselectchanged', hander); }; }, [dataSource, deviceAlarmSchemes]); // 网格开关,不更新整个图表 useEffect(() => { const chart = chartRef.current?.getEchartsInstance?.(); if (!chart) return; const option = chart.getOption(); // 交互指针 const tooltip = { trigger: 'axis', axisPointer: { type: showGridLine ? 'cross' : 'line', }, }; // 网格线 const axisConfig = { minorTick: { show: showGridLine, splitNumber: 2, }, minorSplitLine: { show: showGridLine, lineStyle: { type: 'dashed', }, }, splitLine: { show: showGridLine, }, }; let yAxis = axisConfig; if (isArray(option.yAxis)) { yAxis = option.yAxis.map((item) => ({ ...axisConfig })); } let xAxis = axisConfig; chart.setOption({ xAxis, yAxis, tooltip, }); }, [showGridLine]); // 数据都为空显示缺省页 const isEmpty = useMemo( () => !dataSource || !dataSource.length || !dataSource.find((e) => e.dataModel && e.dataModel.length > 0), [dataSource], ); return isEmpty ? ( <PandaEmpty /> ) : ( <BasicChart ref={chartRef} option={option} notMerge style={{ width: '100%', height: '100%' }} /> ); }); export default SimgleChart;