c# 对比bitmap是否相等_技术图文：如何利用 C#+Echarts 绘制 Smoothed Line Chart？

背景

这几天在做一个电力系统的软件，其中需要绘制 Bar Simple，解决这个问题之后，我写了第一篇关于 C# 封装 Echarts 的图文：

• 如何利用 C# + Echarts 绘制 Bar Simple？

该图文详细介绍了 C# 把 Echarts 封装为自定义控件的过程，封装了 Echarts 的 xAxis、yAxis、series 和 option 结构。

Simple Bar

之后，这个软件系统需要绘制 “堆叠条形图”，解决这个问题之后，我又写了第二篇关于 C# 封装 Echarts 的图文：

• 如何利用 C# + Echarts 绘制「堆叠条形图」？

该图文对前面的代码进行了扩展，增加了对 tooltip、legend、grid 等结构的封装。

堆叠条形图

今天，总结的是如何通过离散点拟合一条光滑的函数曲线。

Smoothed Line Chart

---

技术分析

首先，我们对比一下百度提供的 “Bar Simple” 和 “Smoothed Line Chart” 示例代码

Bar Simple 的代码

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }]};

Smoothed Line Chart 的代码

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }]};

通过两段代码的对比，会发现主要的区别在 series 属性上。

柱状图 type:'bar'，折线图 type:'line'，如果想使其光滑则需要设置 smooth:true。

由于我们已经封装了 Echarts 的 xAxis、yAxis 和 series 属性，这里只需要扩展一下 SeriesItem 结构就能满足需求。

---

代码实现

扩展 SeriesItem 结构：

public class SeriesItem{ ///  /// 每个系列通过 type 决定自己的图表类型。 ///  public string type { get; set; } = "line"; ///  /// 是否平滑曲线显示。 ///  public bool smooth { get; set; } = false; ///  /// 系列中的数据内容数组 ///  public List data { get; set; }}

---

总结

扩展之后，我们针对以上例子的客户端代码如下：

加载 x 轴的数据

private List GetXAxisData(){ List reslt = new List { "Mon