React Apexcharts 不适用于 Typescript答案

【问题标题】：React Apexcharts not working with TypescriptReact Apexcharts 不适用于 Typescript
【发布时间】：2021-11-15 01:09:22
【问题描述】：

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

没有重载匹配此调用。 Overload 1 of 2, '(props: Props | Readonly): ReactApexChart'，给出了以下错误。输入'{图表：{高度：ApexOptions;类型：ApexOptions；缩放：{启用：ApexOptions； }; }; }' 不可分配给类型 'ApexOptions'。 'chart.height' 的类型在这些类型之间不兼容。类型 'ApexOptions' 不可分配给类型 'string |号码 |不明确的'。类型“ApexOptions”不可分配给类型“数字”。 Overload 2 of 2, '(props: Props, context: any): ReactApexChart'，给出了以下错误。输入'{图表：{高度：ApexOptions;类型：ApexOptions；缩放：{启用：ApexOptions； }; }; }' 不可分配给类型 '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;

关于如何解决此问题的任何想法？谢谢！

【问题讨论】：

标签： reactjs typescript charts create-react-app apexcharts

【解决方案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}
      />
  );
};

【讨论】：