BlazorCharts 原生图表库开发日志 210506-优快云博客

本文链接：https://blog.youkuaiyun.com/TimChen44/article/details/116460973

前情提要
看着blazor生态没有原生charts组件，所以我就抛砖引玉试着做一个。详情可参见BlazorCharts 原生图表库开发日志 210423

项目地址：https://github.com/TimChen44/blazor-charts

行动

首先，确定一个图标，俗话说图标确定后项目就完成了一半😁，以本人的能力，只能将图表和@合并，设计出“缝合怪”作为我的图标🤣
在这里插入图片描述
接着，再确定我们组件的一些基本理念，我今后的设计尽我所能满足这些理念。

使用简单
组件库是拿来用的，所以使用方式要简单，使用方法要符合常规逻辑，争取使用时最大可能的减少对文档的依赖。
功能实用
实现一堆极少场景才会使用的图表，不如集中精力做好用的最多的那些图表。
实现一堆极少场景才会使用的功能，不如集中精力做好用的最多的那些功能。
信息直观
使用图表的核心目的是解决表格数据显示不直观的问题，所以不论功能、布局、颜色、动画都是为了这个服务。

最后，就是付诸实施。

阶段成果

下面是一个最简单的图表示例
在这里插入图片描述
所需的配置

<BcChart Height="600" Width="800" Data="DemoData.Githubs" CategoryField="x=>x.Year.ToString()">
    <BcTitle Title="图表示例" TData="Github"></BcTitle>
    <BcAxesY TData="Github" GridLineMajor="true" GridLineMinor="true"></BcAxesY>
    <BcLegend TData="Github" BorderWidth="1" Position="LegendPosition.Bottom"></BcLegend>
    <BcColumnSeries TData="Github" ValueFunc="x=>x.Sum(y=>y.View)" Group="View"></BcColumnSeries>
    <BcColumnSeries TData="Github" ValueFunc="x=>x.Sum(y=>y.Start)" Group="Start"></BcColumnSeries>
    <BcLineSeries TData="Github" ValueFunc="x=>x.Sum(y=>y.Fork)" Group="Fork"></BcLineSeries>
</BcChart>

所需的数据

static class DemoData
{
    public static List<Github> Githubs = new List<Github>()
    {
        new Github(){Year=2017,View =2500,Start=800,Fork=400},
        new Github(){Year=2018,View =2200,Start=900,Fork=800},
        new Github(){Year=2019,View =2800,Start=1100,Fork=700},
        new Github(){Year=2020,View =2600,Start=1400,Fork=900},
    };
}