React Apexcharts 无法与 Typescript 一起使用

Question

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

No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly): ReactApexChart', gave the following error.
    Type '{ chart: { height: ApexOptions; type: ApexOptions; zoom: { enabled: ApexOptions; }; }; }' is not assignable to type 'ApexOptions'.
      The types of 'chart.height' are incompatible between these types.
        Type 'ApexOptions' is not assignable to type 'string | number | undefined'.
          Type 'ApexOptions' is not assignable to type 'number'.
  Overload 2 of 2, '(props: Props, context: any): ReactApexChart', gave the following error.
    Type '{ chart: { height: ApexOptions; type: ApexOptions; zoom: { enabled: ApexOptions; }; }; }' is not assignable to type 'ApexOptions'.

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

TasksChart.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

您似乎已经将 type 属性设置为 <ReactApexChart /> 属性。

尝试从 options 中的 chart 中删除 type，错误消失了：

const TasksChart: React.FC<Props> = ({ tasks }) => {
  const options = {
    chart: {
      height: 350,
      zoom: {
        enabled: true
      }
    }
  };

  const 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
        type="line"
        options={options}
        series={series}
        height={350}
      />
  );
};

Answer 2

使用 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

React Apexcharts 无法与 Typescript 一起使用

React Apexcharts not working with Typescript

reactjs

typescript

charts

create-react-app

apexcharts