反应错误，props值传递给apexchart选项

Question

使用apexChart创建图形。
我使用react,typescript,next.js。
我在选项中得到以下类型错误:

errrMessage键入'{颜色:字符串[];图表:{类型:字符串;高度:数量;};plotOptions: {bar: {horizontal: boolean;dataLabels:{位置:字符串;};};};dataLabels:{启用:boolean;offsetX:数量;style: {fontSize:字符串;颜色:string [];};};笔画:{…;};工具提示:{…;};轴:{…;};响应:{......'不能赋值给'ApexOptions'类型。图表的类型。类型'在这些类型之间是不兼容的。类型'string'不能赋值给类型' area ';|"line"|"bar"|"histogram"|"pie"|"donut"|"radialBar"|"scatter"|"bubble"|"heatmap"|"treemap"|"boxPlot"|"candlestick"|"radar"|"polarArea"|"rangeBar"|未定义的.ts (2322)react-apexcharts.d。ts(27,5):期望的类型来自属性'options'，它在类型'IntrinsicAttributes &道具,{孩子吗?: ReactNode;} '

import dynamic from 'next/dynamic';
import React from 'react';
export const Chart: React.FC = () => {
const ApexCharts = dynamic(() => import('react-apexcharts'), { ssr: false });
const barOptions = {
width: '100%',
series: [
{
name: 'group1',
data:[44, 55, 41, 64, 22, 43, 21],
},
{
name: 'group2',
data: [53, 32, 33, 52, 13, 44, 100],
},
],
options: {
colors: ['#008080 ', '#008000 '],
chart: {
type: 'bar',
height: 430,
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
position: 'top',
},
},
},
dataLabels: {
enabled: true,
offsetX: -6,
style: {
fontSize: '12px',
colors: ['#fff'],
},
},
stroke: {
show: true,
width: 1,
colors: ['#fff'],
},
tooltip: {
shared: false,
intersect: false,
},
xaxis: {
categories: ['1', '2', '3', '4', '5', '6', '7', '8'] },
},
};
return (
<ApexCharts options={barOptions.options} series={barOptions.series} type="bar" />
);
});

Answer 1

尝试从配置中删除type: 'bar'。它应该没有它，因为你传递类型作为prop。