React Apexcharts 无法与 Typescript 一起使用

Question

我正在尝试在 React/Typescript 项目上实现一个简单的 ApexChart，但是，我遇到了以下类型错误：

没有重载与此调用匹配。
  重载第 1 个（共 2 个）“(props: Props | Readonly): ReactApexChart”，出现以下错误。
    类型 '{ 图表：{ 高度：ApexOptions; 类型：ApexOptions；缩放：{启用：ApexOptions; }; }; }' 不可分配给类型“ApexOptions”。
      “chart.height”的类型在这些类型之间不兼容。
        类型“ApexOptions”不可分配给类型“string |” 数量 | 不明确的'。
          类型“ApexOptions”不可分配给类型“number”。
  重载 2 个（共 2 个）“(props: Props, context: any): ReactApexChart”，出现以下错误。
    类型 '{ 图表：{ 高度：ApexOptions; 类型：ApexOptions；缩放：{启用：ApexOptions; }; }; }' 不可分配给类型“ApexOptions”。

我确实像往常一样安装了react-apexcharts和apexcharts。这是我的图表的脚本：

任务图表.tsx

import ReactApexChart from 'react-apexcharts';

const TasksChart: React.FC<Props> = ({
tasks,
}) => {

  const options = {
    chart: {
      height: 350,
      type: 'line',
      zoom: {
        enabled: true
      }
    },
  };

  series = [{
    name: 'All Tasks',
    data: [31, 40, 28, 51, 42, 109, 100]
  }, {
    name: 'My Tasks',
    data: [11, 32, 45, 32, 34, 52, 41]
  }]

  return (
    <>
      <ReactApexChart options={options} series={series} type="line" height={350} />
    </>
  );
};

export default TasksChart;

关于如何解决这个问题有什么想法吗？谢谢！

Answer 1

使用yarn或npm安装依赖项

yarn add apexcharts react-apexcharts

导入它们

import ReactApexChart from "react-apexcharts";
import { ApexOptions } from "apexcharts";

定义选项类型

const options: ApexOptions = {
  chart: {
    height: 350,
    type: 'line',
    zoom: {
      enabled: true
    }
  },
};

<ReactApexChart
  options={options}
  series={series}
  type="line"
  height={350}
/>

就是这样=D