ApexCharts 将类转换为功能组件

Question

我在为 ApexCharts 插入 chart.type 时遇到问题。 已插入类型：line 但无法正常工作。如果我无法定义图表类型或有其他方法可以做到这一点，请提出建议。

import React, { useState, Component } from 'react';
import { makeStyles, createStyles, Theme, useTheme } from '@material-ui/core/styles';
import ApexCharts from 'apexcharts';
import ReactApexChart from "react-apexcharts";

interface ApexChartProps { }

interface TravelDetailsViewProps {
  options?: any;
  series?: any;
}

// const EditRoleForm = ({ onCompleted, onCancel, value, ...rest }: EditRoleFormProps) => {

const TravelDetailsView = () => {

  const theme = useTheme();

  const [chartData, setChartData] = useState({
    options: {
      chart: {
        // type: 'Line',
        id: 'apexchart-example',
        foreColor: theme.palette.primary.main,
      },
      xaxis: {
        categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'light',
          type: "horizontal",
          shadeIntensity: 0.5,
          gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
          inverseColors: true,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 50, 100],
          colorStops: []
        }
      },
      legend: {
        // position: '',
        width: 400,
        // position: 'top',
      },
    },
    series: [{
      name: 'Distance Traveled',
      type: 'column',
      data: [440, 505, 414, 571, 227, 413, 201, 352, 652, 320, 257, 160]
    }, {
      name: 'Time Traveled',
      type: 'line',
      data: [23, 42, 35, 27, 43, 22, 17, 31, 42, 22, 12, 16]
    }],
  });

  return (
    <ReactApexChart 
      options={chartData.options} 
      series={chartData.series} 
      type="line" 
    />
  )
}

export default TravelDetailsView;

以下错误>>>

The types of 'chart.type' are incompatible between these types.
        Type 'string' is not assignable to type '"line" | "area" | "bar" | "histogram" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "treemap" | "boxPlot" | "candlestick" | "radar" | "polarArea" | "rangeBar" | undefined'.

==>node_modules\apexcharts\types\apexcharts.d.ts下

/**

• 主图表选项

• 见https://apexcharts.com/docs/options/chart/ */

  输入 ApexChart = { 宽度？：字符串 |数字 高度？：字符串 |数字 类型？： | '线' | '区域' | '酒吧' | '直方图' | '馅饼' | '甜甜圈' | '径向条' | '分散' | '气泡' | '热图' | '烛台' | '箱形图' | '雷达' | '极地' | '范围栏' | '树图'

legend.position 也有同样的问题。

感谢您的帮助。干杯！

Answer 1

因为是静态变量，所以不需要定义state。您可以将chartData 分配给变量。另外在定义变量时，将类型设置为ApexOptions:

const TravelDetailsView = () => {
  const theme = useTheme();

  const chartData: ApexOptions = {
    chart: {
      type: "line",
      id: "apexchart-example",
      foreColor: theme.palette.primary.main
    },
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    },
    fill: {
      type: "gradient",
      gradient: {
        shade: "light",
        type: "horizontal",
        shadeIntensity: 0.5,
        gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 50, 100]
        // colorStops: []
      }
    },
    legend: {
      // position: '',
      width: 400
      // position: 'top',
    },
    series: [
      {
        name: "Distance Traveled",
        type: "column",
        data: [440, 505, 414, 571, 227, 413, 201, 352, 652, 320, 257, 160]
      },
      {
        name: "Time Traveled",
        type: "line",
        data: [23, 42, 35, 27, 43, 22, 17, 31, 42, 22, 12, 16]
      }
    ]
  };

  return <ReactApexChart options={chartData} series={chartData.series} />;
};