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

2019-06-25 本文已影响0人老马的程序人生

背景

这几天在做一个电力系统的软件，其中需要绘制 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
{
    /// <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 的解码可以得到我的微信号，欢迎与我联系，成为团队的一员。

相关图文：

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

背景

技术分析

代码实现

总结

猜你喜欢

热点阅读