SingleChart.js

import React, { memo, useEffect, useMemo, useRef } from 'react';
import { BasicChart } from '@wisdom-components/basicchart';
import PandaEmpty from '@wisdom-components/empty';
import optionGenerator, { alarmMarkLine, minMaxMarkPoint } from './utils';
import { isArray, cloneDeep } from 'lodash';

const SimgleChart = memo((props) => {
  const {
    dataSource,
    contrast = false,
    contrastOption = 'day',
    smooth = true,
    curveCenter,
    showGridLine = false,
    deviceAlarmSchemes,
  } = props;
  const chartRef = useRef();

  const option = useMemo(() => {
    const config = {
      needUnit: true,
      curveCenter,
      showGridLine,
      deviceAlarmSchemes,
      showMarkLine: true,
      showPoint: true,
    };
    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;
      option.series.forEach((item, index) => {
        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,
      },
      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;