ApexCharts将类转换为功能组件

Question

我已经发布了为chart.type插入ApexCharts的问题。已插入类型：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 ={ width?：string欧元数字高度？：字符串数字类型？：string 'line‘bar’area‘分部’type‘type’ApexChart 'radialBar‘radialBar’散开‘\x\{\#\##*

与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} />;
};

​

​