《进击吧！Blazor！》是自己与张善友老师单干的Blazor零根底入门教程视频，此教程能让一个从未接触过Blazor的程序员把握开发Blazor利用的能力。
视频地址：https://space.bilibili.com/48...
Blazor WebAssembly 是单页利用 (SPA) 框架，用于应用 .NET 生成交互式客户端 Web 利用，采纳 C# 代替 JavaScript 来编写前端代码
本系列文章因篇幅无限，省略了局部代码，残缺示例代码：https://github.com/TimChen44/...
作者：陈超超
Ant Design Blazor 我的项目贡献者，领有十多年从业教训，长期基于.Net技术栈进行架构与开发产品的工作，现就职于正泰团体。
邮箱：timchen@live.com
欢送各位读者有任何问题分割我，咱们共同进步。
图表的作用我就不扯了，想要让零碎高大上就少不了它，作为一个加分项，咱们天然也要给咱们ToDo援用来一波。
Chart控件抉择
目前还没有比拟优良的Blazor原生Chart控件，这也是咱们未来须要晋升Blazor生态的重要工作之一。
然而无需悲观，Blazor反对C#调用JS，反之亦可，所以社区中有不少通过此技术对现有JS版本的Chart控件二次分装的Blazor组件可用。
这里我就举荐自己封装G2Plot后的Blazor组件ant-design-charts-blazor。
文档地址：https://ant-design-blazor.git...
源码地址：https://github.com/ant-design...
技术实现形式介绍：https://zhuanlan.zhihu.com/p/...
https://www.bilibili.com/vide...
革新ToDo
援用组件
- 通过命令或可视化界面为
ToDo.Client增加AntDesign.Charts组件
$ dotnet add package AntDesign.Charts- 在
wwwroot/index.html(WebAssembly) 或Pages/_Host.razor(Server) 中引入动态文件:
<script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script><script src="_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>- 在
_Imports.razor中退出命名空间
@using AntDesign.Charts将Charts命名空间退出全局援用，领有应用时省略残缺命名门路的益处，然而请留神当Chart中的组件与其余组件重名时，不管Chart组件还是其余组件都须要补上残缺命名门路，思考到Chart应用的页面并不多，所以自己的习惯不会将他退出 _Imports.razor中。统计页
咱们用柱状图做一个每日代办事项数量统计图
ChartAmountDto.cs
在ToDo.Shared我的项目中创立用于显示数据的实体。
public class ChartAmountDto{ public string Day { get; set; } public string Type { get; set; } public int Value { get; set; }}Day字段存储日期文本。Type存储重要度信息，蕴含“一般”，“重要”两个值，图表中也是用这个进行分组显示。Value存储具体的数值。
ChartController.cs
在ToDo.Server我的项目新建ChartController控制器，用于提供图表所需的数据。
[ApiController][Route("api/[controller]/[action]")]public class ChartController{ TodoContext Context; public ChartController(TodoContext context) { Context = context; } //每日待办数量 public List<ChartAmountDto> GetAmountDto() { return Context.Task.GroupBy(x => new { x.PlanTime, x.IsImportant }).Select(x => new ChartAmountDto() { Day = x.Key.PlanTime.ToString("yy-MM-dd"), Type = x.Key.IsImportant ? "一般" : "重要", Value = x.Count(), }).ToList(); }}通过对打算日期和重要度进行分组，而后对分组后果进行计数，接口返回的局部数据结构如下
[ {"day":"20-09-25","value":2,"type":"重要"}, {"day":"20-10-10","value":9,"type":"重要"}, {"day":"20-10-11","value":6,"type":"重要"}, {"day":"20-10-14","value":2,"type":"重要"}, {"day":"20-10-17","value":6,"type":"重要"}, {"day":"21-01-28","value":1,"type":"重要"}]Statistics.razor
在ToDo.Client我的项目增加Statistics.razor并填入以下代码
@page "/statistics"<Spin Spinning="isLoading"> <AntDesign.Charts.StackedColumn @ref="@amountChart" Config="amountConfig" TItem="ChartAmountDto" /></Spin>AntDesign.Charts.StackedColumn 通过残缺的门路增加图表控件。@ref="@amountChart" 提供了一种援用组件实例的办法，随后能够申明一个变量寄存组件的援用。Config="amountConfig" 配置图表显示配置。TItem="ChartAmountDto" 定义图表数据类型。
增加Statistics.razor.cs文件。
public partial class Statistics{ [Inject] public HttpClient Http { get; set; } bool isLoading = false; IChartComponent amountChart; readonly StackedColumnConfig amountConfig = new StackedColumnConfig { Title = new Title { Visible = true, Text = "每日代办数量统计" }, ForceFit = true, Padding = "auto", XField = "day", YField = "value", YAxis = new ValueAxis { Min = 0, }, Meta = new { day = new { Alias = "日期" }, }, Color = new[] { "#ae331b", "#1a6179" }, StackField = "type" }; protected async override Task OnInitializedAsync() { isLoading = true; var amountData = await Http.GetFromJsonAsync<List<ChartAmountDto>>($"api/Chart/GetAmountDto"); await amountChart.ChangeData(amountData); await base.OnInitializedAsync(); isLoading = false; }}IChartComponent amountChart;变量用来寄存组件实例援用，之后咱们就可能应用这个对象对Chart组件进行各类操作。
StackedColumnConfig amountConfig定义了沉积柱状图的配置
Text = "每日代办数量统计"定义了题目文本XField = "day"X轴绑定的字段名YField = "value"Y轴绑定的字段名
留神：此处绑定字段名是辨别大小写的，通常c#的dto类字段名会采纳大驼峰，然而将dto转json默认模式下会将字段名改成小驼峰格局，所以留神此处字段名的差别。
Meta = new { day = new { Alias = "日期" } }定义day字段所在州轴显示的文本Color = new[] { "#ae331b", "#1a6179" }柱状图的色彩，如果不指定，组件会应用默认色彩StackField = "type"定义了堆砌的字段
更多的属性配置能够详见G2Plot组件的文档：https://antv-g2plot.gitee.io/...
MainLayout.razor
增加统计菜单项
<MenuItem RouterLink="/statistics" RouterMatch="NavLinkMatch.Prefix"> 统计</MenuItem>运行成果
迷你图
图表，图表，有图有表，所以咱们须要将咱们的图表与咱们的代办列表汇合。
咱们的代办记录中有打算日期和截至日期，所以咱们能够联合以后日期就能做出一个剩余时间进度迷你图。
TaskItem
TaskItem.razor中增加以下代码
<div class="chart"> @{ double progress = 0; if (Item.IsFinish == false && Item.Deadline.HasValue) progress = (double)Item.Deadline.Value.Subtract(DateTime.Now).TotalHours / (double)Item.Deadline.Value.Subtract(Item.PlanTime).TotalHours; } <AntDesign.Charts.RingProgress Data="progress" Config="progressConfig"></AntDesign.Charts.RingProgress></div>咱们先计算剩余时间，后果数值区间在0~1之间，而后应用RingProgress组件显示，如果曾经实现的工作默认值为0。AntDesign.Charts.RingProgress 圆形进度迷你图。Data="progress" 图表数值Config="progressConfig" 图表配置
最初增加一些款式，地位上丑化一下
.task-card-item .chart { margin-left: 8px;}在TaskItem.razor.cs中增加迷你图配置
readonly RingProgressConfig progressConfig = new RingProgressConfig{ Width = 30, Height = 30,};运行成果
随着工夫流逝，剩余时间缩小，圆形精度蓝色局部会越来越少
次回预报
下次将迎来Todo利用的最终回，咱们通过一些虚构场景来演示如何部署Blazor利用。
学习材料
更多对于Blazor学习材料：https://aka.ms/LearnBlazor