一、目的:绘制简单轻量级的曲线视图
二、实现:
1、动画加载曲线
2、点击图例显示隐藏对应曲线
3、绘制标准基准线
4、绘制蒙板显示标准区域
曲线图示例:
心电图示例:
三、实现代码
View:
- <echart:StaticCurveChartPlotter x:Name="chart" Background="White" DataSource="{Binding Collection}"
- FontSize="12" MaxValueY="400" MinValueY="0" MaxValueX="{Binding MaxValue}" MinValueX="{Binding MinValue}"
- IsLegendVisible="True" Height="200" Width="800">
- <!--MaxValueX="11" MinValueX="0"-->
- <echart:StaticCurveChartPlotter.SplitItemYs>
- <echart:SplitItem Color="DarkGray" Value="400" Text="400 " ></echart:SplitItem>
- <echart:SplitItem Color="DarkGray" Value="350" Text="350 " ></echart:SplitItem>
- <echart:SplitItem Color="DarkGray" Value="300" Text="300 "></echart:SplitItem>
- <echart:SplitItem Color="DarkGray" Value="250" Text="250"></echart:SplitItem>
- <echart:SplitItem Color="Red" Value="240" Text="240 mmHg" SpliteType="HeighLight"/>
- <echart:SplitItem Color="DarkGray" Value="200" Text="200"></echart:SplitItem>
- <echart:SplitItem Color="DarkGray" Value="150" Text="150"></echart:SplitItem>
- <echart:SplitItem Color="DarkGray" Value="100" Text="100" ></echart:SplitItem>
- <echart:SplitItem Color="Green" Value="90" Text="90 mmHg" SpliteType="HeighLight"></echart:SplitItem>
- <echart:SplitItem Color="DarkGray" Value="50" Text="50 "></echart:SplitItem>
- <echart:SplitItem Color="DarkGray" Value="0" Text="0 "></echart:SplitItem>
- </echart:StaticCurveChartPlotter.SplitItemYs> </echart:StaticCurveChartPlotter>
ViewModel:
- /// <summary> 说明 </summary>
- partial class MainWindowViewModel
- {
- private List<ICurveEntitySource> _collection = new List<ICurveEntitySource>();
- /// <summary> 曲线图数据 </summary>
- public List<ICurveEntitySource> Collection
- {
- get { return _collection; }
- set
- {
- _collection = value;
- RaisePropertyChanged("Collection");
- }
- }
-
- void Init()
- {
- RefreshCurveData();
- }
-
- public void RefreshCurveData()
- {
-
- List<ICurveEntitySource> collection = new List<ICurveEntitySource>();
-
- CurveEntitySource entity = new CurveEntitySource();
- entity.Text = "长度(km)";
- entity.Color = Brushes.Red;
- entity.Marker = new CirclePointMarker();
-
- entity.Marker.Fill = Brushes.Red;
-
- for (int i = 0; i < 20; i++)
- {
- PointC point = new PointC();
- point.X = i;
- point.Y = i*i;
- point.Text = DateTime.Now.AddDays(i).ToString("yyyy-MM-dd");
- entity.Source.Add(point);
-
- this.MinValue = this.MinValue > point.X ? point.X : this.MinValue;
- this.MaxValue = this.MaxValue < point.X ? point.X : this.MaxValue;
-
- }
- collection.Add(entity);
-
- entity = new CurveEntitySource();
- entity.Text = "重量(kg)";
- entity.Color = Brushes.Orange;
- entity.Marker = new T5PointMarker();
-
- entity.Marker.Fill = Brushes.Orange;
-
- for (int i = 0; i < 20; i++)
- {
- PointC point = new PointC();
- point.X = i;
- point.Y = (20-i) * (20 - i);
- point.Text = DateTime.Now.AddDays(i).ToString("yyyy-MM-dd");
- entity.Source.Add(point);
-
- this.MinValue = this.MinValue > point.X ? point.X : this.MinValue;
- this.MaxValue = this.MaxValue < point.X ? point.X : this.MaxValue;
-
- }
- collection.Add(entity);
-
- this.Collection = collection;
-
- }
-
- private double _maxValue = double.MinValue;
- /// <summary> 说明 </summary>
- public double MaxValue
- {
- get { return _maxValue; }
- set
- {
- _maxValue = value;
- RaisePropertyChanged("MaxValue");
- }
- }
-
- private double _minValue = double.MaxValue;
- /// <summary> 说明 </summary>
- public double MinValue
- {
- get { return _minValue; }
- set
- {
- _minValue = value;
- RaisePropertyChanged("MinValue");
- }
- }
- }
-
- partial class MainWindowViewModel : INotifyPropertyChanged
- {
- public MainWindowViewModel()
- {
- Init();
- }
-
- #region - MVVM -
-
- public event PropertyChangedEventHandler PropertyChanged;
-
- public void RaisePropertyChanged([CallerMemberName] string propertyName = "")
- {
- if (PropertyChanged != null)
- this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
- }
-
- #endregion
- }
结构设计:
示例图片:
下载地址 :GitHut: https://github.com/HeBianGu/WpfChartProgram.git