index.js

import React, { useContext, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
import { ConfigProvider } from 'antd';
import './index.less';

let chartWidth = 0; // chart width
let chartHeight = 0; // chart height

const BasicChart = (props) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('basic-chart');

  const { chartOptions, constructorType } = props;

  const [options, setOptions] = useState(defaultOptions);

  const container = useRef(null);

  // 处理图表options
  const handleChartOptions = () => {
    const options = {
      ...defaultOptions,
      ...chartOptions,
    };

    if (container.current) {
      if (container.current.offsetWidth !== 0) {
        chartWidth = container.current.offsetWidth;
        chartHeight = container.current.offsetHeight;
      }
      Highcharts.setOptions({
        // 处理 chart 高度坍塌
        chart: {
          width: container.current.offsetWidth === 0 ? chartWidth : container.current.offsetWidth,
          height:
            container.current.offsetHeight === 0 ? chartHeight : container.current.offsetHeight,
        },
      });
    }

    Highcharts.setOptions({
      global: { timezoneOffset: -8 * 60 },
    });

    return options;
  };

  useEffect(() => {
    setOptions({ ...handleChartOptions() });
  }, [chartOptions]);

  return (
    <div className={classNames(prefixCls)} ref={container}>
      <HighchartsReact
        immutable={true}
        highcharts={Highcharts}
        constructorType={constructorType}
        options={options}
        {...props}
      />
    </div>
  );
};

BasicChart.defaultProps = {
  constructorType: 'chart',
  chartOptions: {},
};

BasicChart.propTypes = {
  columns: PropTypes.string,
  chartOptions: PropTypes.object,
};

export default BasicChart;

const defaultOptions = {
  chart: {
    zoomType: 'x',
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
  },
  title: null,
  credits: false,
  rangeSelector: {
    enabled: false,
  },
  xAxis: [
    {
      lineWidth: 0,
      crosshair: true,
      type: 'datetime',
      dateTimeLabelFormats: {
        second: '%H:%M:%S',
        minute: '%H:%M',
        hour: '%H:%M',
        day: '%d',
        week: '%d',
        month: '%d',
        year: '%Y',
      },
    },
  ],
  yAxis: [
    {
      title: null,
      opposite: false, // 即坐标轴会显示在对立面
      lineWidth: 1,
    },
  ],
  tooltip: {
    shared: true,
    split: false,
    valueDecimals: 3,
    dateTimeLabelFormats: {
      second: '%H:%M:%S',
      minute: '%H:%M',
      hour: '%H:%M',
      day: '%d',
      week: '%d',
      month: '%d',
      year: '%Y',
    },
  },
  plotOptions: {
    series: {
      showInNavigator: true,
      connectNulls: false,
      zoneAxis: 'x',
    },
  },
  legend: {
    verticalAlign: 'top',
  },
  series: [],
};