在react中动态更新Highcharts

npm install highcharts
npm install highcharts-react-official

import React, { Component } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

class ChartComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartOptions: {
        // Highcharts配置项
        title: {
          text: '动态更新Highcharts示例'
        },
        // ...
      },
      chartData: [1, 2, 3, 4, 5] // 初始数据
    };
  }

  render() {
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={this.state.chartOptions}
        />
      </div>
    );
  }
}

componentDidMount() {
  // 模拟异步获取数据
  setTimeout(() => {
    const newData = [6, 7, 8, 9, 10]; // 新数据
    this.setState(prevState => ({
      chartData: newData,
      chartOptions: {
        ...prevState.chartOptions,
        series: [{
          data: newData
        }]
      }
    }));
  }, 3000);
}