react hooks实现点击按钮导出页面数据内容，echart图表的word文档

好的，您可以使用以下步骤实现这个功能：

1. 在使用 Echarts 绘制图表时，将图表的数据保存在一个 state 中。
2. 创建一个按钮组件，使用 React 的 useState 钩子来创建一个状态变量，用于控制按钮点击事件。
3. 在按钮的点击事件中，使用 FileSaver.js 库将图表数据导出到 Word 文档中。
4. 将导出按钮组件和 Echarts 组件一起渲染，以便用户可以点击按钮导出数据。

下面是一个简单的代码示例：

import React, { useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import * as FileSaver from 'file-saver';

const MyEcharts = () => {
  const [chartData, setChartData] = useState(null);
  const [exporting, setExporting] = useState(false);

  const handleExportClick = () => {
    setExporting(true);
    const chartDataStr = JSON.stringify(chartData);
    const blob = new Blob([chartDataStr], { type: 'application/json' });
    FileSaver.saveAs(blob, 'chart-data.json');
    setExporting(false);
  };

  const options = {
    // Echarts 配置项
  };

  return (
    <>
      <ReactEcharts
        option={options}
        onChartReady={e => setChartData(e.getOption())}
      />
      <button disabled={exporting} onClick={handleExportClick}>
        {exporting ? 'Exporting...' : 'Export to Word'}
      </button>
    </>
  );
};

在这个示例中，我们使用了 ReactEcharts 组件来绘制图表，并使用 onChartReady 回调将图表数据保存到 state 中。然后，我们创建了一个按钮组件，并在点击事件中使用 FileSaver.js 库将图表数据导出到 Word 文档中。最后，我们将导出按钮组件和 Echarts 组件一起渲染，以便用户可以点击按钮导出数据。