技术图文：如何利用 C#+Echarts 绘制 Smoothed Line Chart？

背景

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

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

Simple Bar

之后，这个软件系统需要绘制 “堆叠条形图”，解决这个问题之后，我又写了第二篇关于 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{ /// <summary> /// 每个系列通过 type 决定自己的图表类型。 /// </summary> public string type { get; set; } = "line"; /// <summary> /// 是否平滑曲线显示。 /// </summary> public bool smooth { get; set; } = false; /// <summary> /// 系列中的数据内容数组 /// </summary> public List<double> data { get; set; }}

总结

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

加载 x 轴的数据

private List<object> GetXAxisData(){ List<object> reslt = new List<object> { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" }; return reslt;}

加载需要显示的数据

private List<SeriesItem> GetSeriesData(){ List<SeriesItem> result = new List<SeriesItem>(); SeriesItem item = new SeriesItem { type = "line", data = new List<double> { 820, 932, 901, 934, 1290, 1330, 1320 }, smooth = true, }; result.Add(item); return result;}

配置 Echarts 的 option 属性绘制光滑曲线

private void Form1_Load(object sender, EventArgs e){ Option option = new Option { xAxis = new XAxis { type = "category", data = GetXAxisData() }, yAxis = new YAxis { type = "value", }, series = GetSeriesData() }; echarts1.InitialECharts(option);}

运行结果如下：

运行结果

我们再来看一下扩展代码之后的具体应用。

光滑曲线

好了，今天就到这里吧！希望咱们一起学习的知识对大家有用！See You！

目前 LSGO软件技术团队 正在招新，对我们感兴趣的同学可以参看这篇图文：如何加入 LSGO 软件技术团队？，通过对 Huffman Code 的解码可以得到我的微信 ，欢迎与我联系，成为团队的一员。

相关图文：