摘要：CodeSpirit.Charts 是一个简单易用的智能图表组件，基于特性驱动、声明式配置，让您的应用轻松拥有美观、智能的数据可视化功能。
CodeSpirit.Charts 是一个简单易用的智能图表组件，基于特性驱动、声明式配置，让您的应用轻松拥有美观、智能的数据可视化功能。
CodeSpirit.Charts/ # 智能图表组件├── Attributes/ # 特性定义│ ├── ChartAttribute.cs # 基础图表特性│ ├── ChartTypeAttribute.cs # 图表类型特性│ ├── ChartdataAttribute.cs # 数据源特性│ └── ...├── Analysis/ # 数据分析引擎│ ├── DataAnalyzer.cs # 数据分析器│ ├── ChartRecommender.cs # 图表推荐器│ └── ...├── Models/ # 数据模型│ ├── ChartConfig.cs # 图表配置│ ├── ChartDataSource.cs # 图表数据源│ └── ...├── Services/ # 服务实现│ ├── IChartService.cs # 图表服务接口│ ├── ChartService.cs # 图表服务实现│ └── ...├── Helpers/ # 辅助类│ ├── ChartHelper.cs # 图表帮助类│ └── ...├── Extensions/ # 扩展方法│ ├── ChartExtensions.cs # 图表扩展方法│ └── ...├── CodeSpirit.Charts.csproj # 项目文件└── ChartConfigBuilder.cs # 图表配置构建器 4.1 安装和配置在项目中添加对CodeSpirit.Charts的引用：
在Startup.cs或Program.cs中注册服务：
// Program.csvar builder = WebApplication.CreateBuilder(args);// 添加图表服务builder.Services.AddChartsService;4.2 使用特性标记控制器方法最简单的使用方式是通过特性标记控制器方法：
/// /// 获取用户增长趋势图的配置/// ///日期范围
/// 图表配置[HttpGet("usergrowth")][Chart("用户增长趋势", "展示用户随时间的增长趋势")][ChartType(ChartType.Line)][ChartData(dimensionField: "Date", metricFields: new { "UserCount" })]public async Task GetUserGrowthStatisticsAsync([FromQuery] DateTime dateRange){ DateTimeOffset startDate = dateRange?.Length > 0 ? dateRange[0] : DateTimeOffset.Now.AddMonths(-1); DateTimeOffset endDate = dateRange?.Length > 1 ? dateRange[1] : DateTimeOffset.Now.AddDays(1); // 获取数据 var dAIlyGrowth = await _userService.GetUserGrowthAsync(startDate, endDate); return this.AutoChartResult(dailyGrowth);}请遵循“Statistics”命名约定，CodeSpirit会自动渲染图表页面。
可以使用类以编程方式构建图表：[HttpGet("custom-chart")]public async Task GetCustomChart{ var data = await _dataService.GetData; var chartBuilder = new ChartConfigBuilder( _serviceProvider, _memoryCache, _httpContextAccessor, _recommender, _echartGenerator); var chartConfig = await chartBuilder .SetTitle("自定义图表") .SetSubtitle("数据分析") .BuildChartConfigForDataAsync(data, ChartType.Bar); return Ok(new { data, chartConfig });}5.2 图表自动推荐组件支持自动分析数据并推荐合适的图表类型：
[HttpGet("recommend-charts")]public async Task GetRecommendedCharts{ var data = await _dataService.GetData; var chartBuilder = new ChartConfigBuilder( _serviceProvider, _memoryCache, _httpContextAccessor, _recommender, _echartGenerator); // 获取最多3种推荐的图表配置 var recommendedCharts = await chartBuilder.GetRecommendedChartConfigsAsync(data, 3); return Ok(new { data, recommendedCharts });}5.3 使用图表特性配置选项[HttpGet("sales-trend")][Chart( Title = "销售趋势分析", Description = "按月份显示销售趋势", AutoRefresh = true, RefreshInterval = 300, ShowToolbox = true, Theme = "dark", Height = 500, EnableExport = true)]public async Task GetSalesTrend{ var data = await _salesService.GetTrendData; return Ok(data);}5.4 数据映射特性public class SalesViewModel{ [ChartData(FieldType = ChartFieldType.Category, AxisType = "x")] public string Month { get; set; } [ChartData(FieldType = ChartFieldType.Value, SeriesName = "销售额")] public decimal Sales { get; set; } [ChartData(FieldType = ChartFieldType.Value, SeriesName = "利润")] public decimal Profit { get; set; }} 7.1 图表基本配置ChartConfig标题和副标题
图表类型和子类型
坐标轴配置
图例配置
工具箱配置
主题配置
7.2 坐标轴配置var config = new ChartConfig{ XAxis = new AxisConfig { Name = "月份", Type = "category", Data = new List { "1月", "2月", "3月", "4月", "5月", "6月" } }, YAxis = new AxisConfig { Name = "销售额", Type = "value" }};7.3 系列配置var config = new ChartConfig{ Series = new List { new SeriesConfig { Name = "销售额", Type = "line", Data = new List { 120, 132, 101, 134, 90, 230 }, Label = new Dictionary { { "show", true }, { "position", "top" } } }, new SeriesConfig { Name = "利润", Type = "line", Data = new List { 220, 182, 191, 234, 290, 330 } } }};来源：opendotnet