我花了一天的时间来解决这个问题，但无法找到解决方案。请如果有人可以提供帮助。

所以我在 React 中制作了一个加密货币跟踪器。我设法创建了一个显示多种货币的表格，还有一个列，我根据已经保存在 javascript 文件中的 JSON 数据为各种货币呈现 Apexchart，即我没有调用 API 来获取数据。我已经有了静态数据。我只是以表格的形式呈现静态数据。

现在的问题是页面的加载时间。由于我需要为所有货币呈现 apexcharts（我总共显示 100 个），因此显示它们会降低用户体验。

为了改善用户体验，我想添加一个占位符文本“正在加载...”，当 apexchart 完成加载时，我才想显示图表。

下面是我的 Graph 组件，它负责加载我的 apexchart。

import Chart from 'react-apexcharts';
import { ChartData } from '../data/ChartData';

class Graph extends Component {
  state = {
    options: {
      stroke: {
        width: 1.7,
      },
      grid: {
        show: false,
      },
      datalabels: {
        enabled: false,
      },
      tooltip: {
        enabled: false,
      },
      chart: {
        animations: {
          enabled: false,
        },
        toolbar: {
          show: false,
        },
        zoom: {
          enabled: false,
        },
      },
      yaxis: {
        show: false,
        labels: {
          formatter: function () {
            return '';
          },
        },
      },
      xaxis: {
        labels: {
          formatter: function () {
            return '';
          },
        },
        tooltip: {
          enabled: false,
        },
      },
    },

    series: [
      {
        name: 'USD',
        data: ChartData[this.props.idx].data,
      },
    ],
  };

  render() {
    return (
      <div className="graph">
        <div className="row">
          <div className="mixed-chart">
            <Chart
              options={this.state.options}
              series={this.state.series}
              type="line"
              width="200px"
              height="100px"
            />
          </div>
        </div>
      </div>
    );
  }
}

export default Graph;

![如你所见，我已经绘制了我的 Apexchart。现在因为加载图表需要时间，我想添加一个占位符文本“加载”，当图表加载完成时，我想显示图表以提供更好的用户体验]截图