React+ApexCharts+TypeScript中data赋值数字触发类型错误

错误原因 #

ApexCharts的series配置项中，每个系列的data字段要求是数字数组（number[]），但你当前给的是单个数字（number），TypeScript严格的类型校验会触发不匹配错误。另外组件里还有一段无效代码{ name: "Hawking"; data: 3; }，需要删除。

修复步骤 #

• 将每个系列中的data: 3修改为data: [3]，把单个数字包装成数组
• 删除组件中无意义的独立代码块{ name: "Hawking"; data: 3; }

修复后的完整代码 #

import Chart from "react-apexcharts";
import houses from "../jsons/students.json"

const BarChart = () => {
    return(
        <Chart
            options={{
                colors:["#55a1d3", "#eeb60b", "#d2232a", "#3dad47"],
                xaxis: {
                    categories: [""],
                    labels: {
                        style: {
                            fontSize: "1px"
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    style: {
                        fontFamily: "Montserrat",
                        fontWeight: "bold"
                    }
                },
                legend: {
                    fontFamily: "Montserrat",
                    fontSize: "14pt"
                }
            }}
            series={[
                {
                    name: "Pankhurst",
                    data: [3], 
                },
                {
                    name: "Mee",
                    data: [3], 
                },
                {
                    name: "Orwell",
                    data: [3], 
                },
                {
                    name: "Hawking",
                    data: [3], 
                },
            ]}
            type="bar"
            height="100%"     
            width="100%"   
        />    
    );
}

export default BarChart;

内容的提问来源于stack exchange，提问作者Alexandre Carneiro da Silva