ReactApexcharts與Typescript不兼容 -有解無憂

我試圖在React/Typescript專案上實作一個簡單的ApexChart，但是，我被以下型別的錯誤卡住了：

Nooverload匹配this呼叫。
  Overload 1 of 2, ' (props: Props | Readonly< Props> ): ReactApexChart'，給出了以下錯誤。
    Type '{ chart: { height: ApexOptions; type: ApexOptions; zoom: { enabled: ApexOptions; }; }'不能分配給'ApexOptions'型別。
      型別的 'chart.height'在這些型別之間不兼容。
        型別 'ApexOptions'不可分配給型別'string | number | undefined'。
          型別 'ApexOptions'不可分配給型別'number'。
  Overload 2 of, '(props: Props, context: any) 。ReactApexChart'，給出了以下錯誤。
    Type '{ chart: { height: ApexOptions; type: ApexOptions; zoom: { enabled: ApexOptions; }; }'不能分配給型別'ApexOptions'。

我照例安裝了react-apexcharts和apexcharts。下面是我的圖表的腳本：

**TasksChart.tsx**。


import ReactApexChart from 'react-apexcharts';

const TasksChart: React.FC<Props> = ({
任務。
}) => {

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

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

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

export default TasksChart;

對如何解決這個問題有什么想法嗎？謝謝！

uj5u.com熱心網友回復：

看起來你已經將type屬性設定為<ReactApexChart />道具。

嘗試從options中的type移除chart，錯誤就沒有了：

const TasksChart: React.FC<Props> = ({ tasks }) => /span> {
  const options = {
    chart: {
      height: 350,
      zoom: {
        enabled: true: 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}。
      />
  );
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/332483.html

標籤：

上一篇：在bash中把PascalCase字串轉換為kebab-case，不需要sed。

下一篇：如何用模板字面型別專案生成陣列