一、整体架构
1. 技术栈
框架：WPF（.NET 4.7.2）
图表库：LiveCharts 0.97.0（需注意版本适配性）
设计模式：MVVM（Model-View-ViewModel）
2. 项目结构
| 命名空间 | 类名 | 作用 |
|---|---|---|
| WpfApp4.Views | MainWindow | 视图层，负责 UI 展示和交互事件（如饼图点击） |
| WpfApp4.ViewModels | MainViewModel | 主视图模型，管理图表子 VM 和更新命令 |
| WpfApp4.ViewModels | ChartDataViewModel | 图表数据 VM，封装图表数据和系列配置 |
| WpfApp4.ViewModels | BaseViewModel | 基础 VM，实现 INotifyPropertyChanged |
| WpfApp4.ViewModels | RelayCommand | 命令实现，绑定 UI 操作（如更新按钮） |
| WpfApp4.Models | ChartDataModel | 数据模型，存储图表原始数据 |
二、核心知识点
1. MVVM 核心实现
（1）BaseViewModel（属性通知基类）
实现
INotifyPropertyChanged接口，提供属性变更通知能力SetProperty<T>方法：简化属性赋值 + 通知逻辑，避免重复代码
protected bool SetProperty<T>(ref T field, T value, [CallerMemberName] string propertyName = null) { if (Equals(field, value)) return false; field = value; OnPropertyChanged(propertyName); return true; }（2）RelayCommand（命令绑定）
实现
ICommand接口，绑定 UI 操作（如按钮点击）支持无参数执行和可执行状态判断（默认返回 true）
命令变更通过
CommandManager.RequerySuggested触发
2. LiveCharts 0.97.0 关键用法
（1）数据容器
ChartValues<double>：LiveCharts 核心数据容器，支持自动通知 UI 更新（无需手动触发 PropertyChanged）适用于折线图、柱状图、饼图的数值存储
（2）图表系列配置
| 图表类型 | 系列类 | 核心配置项 |
|---|---|---|
| 折线图 | LineSeries | Title（标题）、Values（数值）、Stroke（线条颜色）、PointGeometrySize（数据点大小） |
| 柱状图 | ColumnSeries | Title、Values、Fill（填充色）、Stroke（边框色） |
| 饼图 | PieSeries | Title、Values、DataLabels（是否显示标签）、LabelPoint（标签格式）、Fill（扇区颜色） |
（3）坐标轴配置
<lvc:CartesianChart.AxisX> <lvc:Axis Title="月份" Labels="{Binding ChartDataVM.ChartData.XAxisLabels}"/> </lvc:CartesianChart.AxisX> <lvc:CartesianChart.AxisY> <lvc:Axis Title="销售额(万元)"/> </lvc:CartesianChart.AxisY>通过
Labels绑定字符串列表实现 X 轴标签自定义支持设置坐标轴标题
（4）饼图交互
数据点击事件
DataClick：通过ChartPoint获取系列信息0.97.0 版本需将
SeriesView强转为PieSeries获取标题
private void PieChart_DataClick(object sender, ChartPoint chartPoint) { var pieSeries = chartPoint.SeriesView as PieSeries; if (pieSeries != null) { MessageBox.Show($"产品：{pieSeries.Title}\n占比：{chartPoint.Y:F1}%", "数据详情", MessageBoxButton.OK, MessageBoxImage.Information); } }3. 数据流转逻辑
初始化：MainViewModel 构造函数创建 ChartDataViewModel → ChartDataViewModel 调用 InitChartData 初始化测试数据
绑定：View 层通过 DataContext 绑定 MainViewModel，UI 元素绑定对应属性（如 Series、Labels）
更新：点击 “更新数据” 按钮 → 触发 UpdateDataCommand → 调用 ChartDataViewModel.UpdateChartData → 随机更新 ChartValues 数据 → LiveCharts 自动刷新 UI
4. XAML 关键配置
（1）命名空间引入
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf" xmlns:vm="clr-namespace:WpfApp4.ViewModels"
（2）数据上下文设置
<Window.DataContext> <vm:MainViewModel/> </Window.DataContext>
（3）图表控件绑定
<!-- 折线图 --> <lvc:CartesianChart Grid.Row="1" Series="{Binding ChartDataVM.LineSeries}"> <!-- 饼图 --> <lvc:PieChart Grid.Row="1" Series="{Binding ChartDataVM.PieSeries}" LegendLocation="Right" DataClick="PieChart_DataClick">三、注意事项
版本适配：代码基于 LiveCharts 0.97.0，部分 API（如 SeriesView、ChartPoint）与高版本不兼容
自动更新：ChartValues 容器修改数据后自动通知 UI 更新，无需手动调用 OnPropertyChanged
饼图数据格式：PieSeries 的 Values 需传入单个数值的 ChartValues<double>（0.97.0 版本特性）
命令绑定：RelayCommand 需确保 Action 不为 null，否则抛出 ArgumentNullException
颜色配置：饼图扇区颜色通过自定义方法 GetPieColor 实现，避免重复颜色
四、扩展方向
增加数据验证：确保更新数据时数值在合理范围
支持多系列图表：如折线图同时展示多个产品销售额
导出图表：结合 WPF 打印 / 保存功能，实现图表导出为图片
动态样式：通过绑定实现图表样式（颜色、大小）的动态切换
数据加载优化：异步加载大数据量图表数据，避免 UI 卡顿
