美文网首页
技术图文:如何利用 C#+Echarts 绘制 Smoothed

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

作者: 老马的程序人生 | 来源:发表于2019-06-25 18:17 被阅读0次

    背景

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

    该图文详细介绍了 C#Echarts 封装为自定义控件的过程,封装了 EchartsxAxisyAxisseriesoption 结构。

    Simple Bar

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

    该图文对前面的代码进行了扩展,增加了对 tooltiplegendgrid 等结构的封装。

    堆叠条形图

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

    Smoothed Line Chart

    技术分析

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

    <u>Bar Simple 的代码</u>

    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'
        }]
    };
    

    <u>Smoothed Line Chart 的代码</u>

    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

    由于我们已经封装了 EchartsxAxisyAxisseries 属性,这里只需要扩展一下 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; }
    }
    

    总结

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

    <u>加载 x 轴的数据</u>

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

    <u>加载需要显示的数据</u>

    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;
    }
    

    <u>配置 Echartsoption 属性绘制光滑曲线</u>

    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

          本文链接:https://www.haomeiwen.com/subject/zpbxcctx.html