SingleChart.js 3.69 KB
Newer Older
1
import React, { memo, useEffect, useMemo, useRef } from 'react';
2
import { BasicChart } from '@wisdom-components/basicchart';
3
import PandaEmpty from '@wisdom-components/empty';
张瑶's avatar
张瑶 committed
4
import optionGenerator, { alarmMarkLine, minMaxMarkPoint, offlineArea } from './utils';
5
import { isArray, cloneDeep } from 'lodash';
6 7

const SimgleChart = memo((props) => {
8 9 10 11 12 13
  const {
    dataSource,
    contrast = false,
    contrastOption = 'day',
    smooth = true,
    curveCenter,
14
    showGridLine = false,
15
    deviceAlarmSchemes,
16 17
    chartType,
    justLine
18
  } = props;
19
  const chartRef = useRef();
20 21 22 23

  const option = useMemo(() => {
    const config = {
      needUnit: true,
24
      curveCenter,
25
      showGridLine,
26
      deviceAlarmSchemes,
27 28
      showMarkLine: true,
      showPoint: true,
29 30
      chartType,
      justLine
31 32
    };
    return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
33
  }, [dataSource, smooth, curveCenter]);
34

35 36
  useEffect(() => {
    chartRef.current?.resize?.();
37
    const chart = chartRef.current?.getEchartsInstance?.();
38 39 40 41 42 43

    function hander(params) {
      const { selected } = params;
      const count = Object.values(selected || {}).filter((item) => item).length;
      const option = cloneDeep(chart.getOption());
      const needMarkLine = count === 1;
44 45
      // 需求变更:设备离线改用“是否在线”的数据,离线的状态标记的数据用该部分的数据。 2023年4月25日09:36:55
      let _tempDataArray = dataSource.filter(item => item.sensorName === '是否在线');
46
      option.series.forEach((item, index) => {
47 48
        let _data = _tempDataArray.find(offline => offline.stationCode === item.stationCode);
        let offlineAreas = offlineArea(_data);
49 50 51 52
        if (offlineAreas.data?.length) {
          option.markArea = null;
          item.markArea = offlineAreas;
        }
53 54 55 56 57 58 59 60 61 62 63 64
        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 = {};
        }
65 66 67 68 69 70 71 72 73
      });
      chart.setOption(option, true);
    }
    if (!chart) return;
    chart.on('legendselectchanged', hander);
    return () => {
      chart.off('legendselectchanged', hander);
    };
  }, [dataSource, deviceAlarmSchemes]);
74

75 76
  // 网格开关,不更新整个图表
  useEffect(() => {
77
    const chart = chartRef.current?.getEchartsInstance?.();
78
    if (!chart) return;
79 80 81 82 83 84 85
    const option = chart.getOption();
    // 交互指针
    const tooltip = {
      trigger: 'axis',
      axisPointer: {
        type: showGridLine ? 'cross' : 'line',
      },
86
    };
87 88 89 90
    // 网格线
    const axisConfig = {
      minorTick: {
        show: showGridLine,
张瑶's avatar
张瑶 committed
91
        splitNumber: 2,
92 93 94
      },
      minorSplitLine: {
        show: showGridLine,
95 96 97 98 99 100
        lineStyle: {
          type: 'dashed',
        },
      },
      splitLine: {
        show: showGridLine,
101 102 103 104 105 106
      },
    };
    let yAxis = axisConfig;
    if (isArray(option.yAxis)) {
      yAxis = option.yAxis.map((item) => ({ ...axisConfig }));
    }
107
    let xAxis = axisConfig;
108
    chart.setOption({
109
      xAxis,
110 111 112 113
      yAxis,
      tooltip,
    });
  }, [showGridLine]);
114

115 116 117 118 119 120 121 122 123 124 125
  // 数据都为空显示缺省页
  const isEmpty = useMemo(
    () =>
      !dataSource ||
      !dataSource.length ||
      !dataSource.find((e) => e.dataModel && e.dataModel.length > 0),
    [dataSource],
  );
  return isEmpty ? (
    <PandaEmpty />
  ) : (
126 127
    <BasicChart ref={chartRef} option={option} notMerge style={{ width: '100%', height: '100%' }} />
  );
128 129
});

130
export default SimgleChart;