在React中更改页面时Apexchart消失

import React, { useEffect, useRef } from 'react';
import ApexCharts from 'apexcharts';

const ChartComponent = () => {
  const chartRef = useRef(null);
  let chartInstance = null;

  useEffect(() => {
    if (chartRef.current) {
      chartInstance = new ApexCharts(chartRef.current, options);
      chartInstance.render();
    }

    return () => {
      if (chartInstance) {
        chartInstance.destroy();
      }
    };
  }, []);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
};

export default ChartComponent;

import React from 'react';
import ApexCharts from 'apexcharts';

class ChartComponent extends React.Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
    this.state = {
      options: {
        // your chart options here
      },
    };
  }

  componentDidMount() {
    this.chart = new ApexCharts(this.chartRef.current, this.state.options);
    this.chart.render();
  }

  componentWillUnmount() {
    if (this.chart) {
      this.chart.destroy();
    }
  }

  render() {
    return <div ref={this.chartRef} style={{ width: '100%', height: '400px' }} />;
  }
}

export default ChartComponent;

import React, { useState, useEffect } from 'react';
import ApexCharts from 'apexcharts';

const ChartComponent = () => {
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    // Fetch data and update chartData state
    const fetchData = async () => {
      const response = await fetch('your-api-endpoint');
      const data = await response.json();
      setChartData(data);
    };

    fetchData();
  }, []);

  const options = {
    series: [{
      name: 'Sales',
      data: chartData,
    }],
    // other options
  };

  return (
    <div>
      {chartData.length > 0 ? (
        <ApexCharts options={options} series={options.series} type="line" width="500" />
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default ChartComponent;