Blazor使用Apex Chart柱状图报Value cannot be null (Parameter 'source')错误如何解决

• 报错的核心原因是传递给ApexPointSeries的Items属性值为null：你的Orders集合没有做初始化，首次渲染时默认值为null，同时接口请求失败的分支中你也主动将Orders赋值为null，ApexCharts内部执行聚合计算时会调用LINQ的GroupBy方法，传入null的集合就会抛出ArgumentNullException。

按以下两个步骤修改即可修复：

1. 初始化Orders集合为非null的空列表，catch异常时也不要将集合赋值为null
2. 可选择性增加空状态判断，无数据时不渲染图表，优化用户体验

修改后的代码示例 #

@page "/test-bar-chart"
@using System.Net.Http
@using System.Net.Http.Json
@using System.Threading.Tasks
@inject HttpClient Http

<DemoContainer>
@* 增加空数据判断，无数据时显示提示 *@
@if (Orders.Any())
{
    <ApexChart TItem="Order"
            Title="Order Net Value">

        <ApexPointSeries TItem="Order"
                    Items="Orders"
                    Name="Gross Value"
                    XValue="@(e => e.Country)"
                    YAggregate="@(e => e.Sum(e => e.GrossValue))"
                    OrderByDescending="e=>e.Y"
                    SeriesType="SeriesType.Bar"
                    />

    </ApexChart>
}
else
{
    <p>暂无订单数据可展示</p>
}
</DemoContainer>

@code {
    // 初始化时直接赋值为空列表，避免默认值为null
    private List<Order> Orders { get; set; } = new(); 

    protected override async Task OnInitializedAsync()
    {
        try
        {
            var result = await Http.GetFromJsonAsync<List<Order>>("/api/Apx");
            // 接口返回不为null时才赋值，否则保留空列表
            if (result != null)
            {
                Orders = result;
            }
        }
        catch (Exception ex)
        {
            // 异常时清空现有数据，不要赋值为null
            Orders.Clear();
            Console.WriteLine(ex.Message);
        }
        await base.OnInitializedAsync();
    }
}

如果修改后仍然出现该报错，需要排查接口返回的JSON结构是否和Order类的属性匹配，GetFromJsonAsync序列化失败时会返回null，赋值给Orders后也会触发同样的异常。

内容的提问来源于stack exchange，提问作者buddhi chamalka