技术图文:如何利用C# + Echarts 绘制「堆叠条形图」?

背景

前几天,我们介绍了 如何利用C# + Echarts 绘制 Bar Simple?,原以为把 Echarts 封装到这种程度就可以完成当前任务了。

应用01

可是,把软件原型提交给对方时,发现对方更希望“可视化设备发生缺陷的具体数据”。也即利用 堆叠条形图 来可视化设备缺陷的数据。

堆叠条形图

百度提供的详细Demo如下:

百度Sample

于是,咱们就需要在之前的基础上对 Echarts 进行近一步的封装。


技术分析

在进行封装代码之前,咱们先聊聊知识的层次问题。即我们所学的知识是分层次的。

第一层:应用层,即解决 How 的问题。我们学习的各种工具,解决问题的具体方法都属于这个层次,按照步骤去做就好。

第二层:认知层,即解决 What 的问题。我们所使用的工具,解决问题的方法,它们到底是什么。

第三层:原理层,即解决 Why 的问题,要想明白为什么可以怎样做。

咱们写的图文大部分属于 How 这个层次,而这个层次的知识往往是不稳定的,多变的。咱们还需往底层去学,这样才能举一反三,触类旁通,掌握真正的知识。

好了,我们开始封装 堆叠条形图 的代码。

首先,我们对比一下百度提供的 “Bar Simple” 和 “堆叠条形图” 的示例代码

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

堆叠条形图 示例代码:

app.title = '堆叠条形图';

option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {     // 坐标轴指示器,坐标轴触发有效
            type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
            name: '搜索引擎',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
    ]
};

通过两段代码的对比,我们还需要对 tooltiplegendgrid 进行封装,其余的 xAxisyAxisseries 已经封装过了,只不过需要在每个对应的类中添加新增的属性即可。

再重复一下封装百度 Echarts 的思路:

首先,创建一个在 Windows 窗体应用程序中使用的控件项目 LSGO.Core.ECharts

其次,在该控件项目的设计器中,拖入一个 WebBrowser 控件,并设置其 Dock 属性为 Fill,即让 WebBrowser 充满整个容器。

接着,写一个 InitialECharts 方法,加载指定目录的网页.\assets\echarts.html,让该网页在 WebBrowser 中打开。

当该网页加载完成后,触发 WebBrowserWebBrowserDocumentCompletedEventHandler 事件,在该事件注册的方法中调用该网页中用 JS 写的 showChart 方法,则在该网页中显示图形。

当窗体控件的尺寸发生变化后,触发 WebBrowserSizeChanged 事件,在该事件注册的方法中调用该网页中用 JS 写的 setPosition 方法,则重新调整显示图形的布局,以满足新的尺寸。

封装控件的代码、初始网页的代码以及调用对应 JS 的代码,参见:如何利用C# + Echarts 绘制 Bar Simple?。咱们这里只写进一步封装 Echarts 的代码。


代码实现

Step01 对tooltip的封装

封装 坐标轴指示器 AxisPointer

public class AxisPointer
{
    /// <summary>
    /// 'line' 直线指示器;
    /// 'shadow' 阴影指示器;
    /// 'none' 无指示器
    /// </summary>
    public string type { get; set; } = "line";
}

封装 提示框组件 Tooltip

public class Tooltip
{
    /// <summary>
    /// 触发类型
    /// 'item':数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
    /// 'axis':坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
    /// 'none':什么都不触发。
    /// </summary>
    public string trigger { get; set; } = "item";
    /// <summary>
    /// 坐标轴指示器
    /// </summary>
    public AxisPointer axisPointer { get; set; }
}

Step02 对legend的封装

public class Legend
{
    /// <summary>
    /// 图例的类型。
    /// 可选值:'plain','scroll'
    /// </summary>
    public string type { get; set; } = "plain";

    /// <summary>
    /// 图例列表的布局朝向。
    /// 'horizontal''vertical'
    /// </summary>
    public string orient { get; set; } = "horizontal";

    /// <summary>
    /// 图例组件离容器左侧的距离。
    /// </summary>
    public string left { get; set; } = "auto";
    
    /// <summary>
    /// 图例组件离容器上侧的距离。
    /// </summary>
    public string top { get; set; } = "auto";
    
    /// <summary>
    /// 图例组件离容器右侧的距离。
    /// </summary>
    public string right { get; set; } = "auto";
    
    /// <summary>
    /// 图例组件离容器下侧的距离。
    /// </summary>
    public string bottom { get; set; } = "auto";

    /// <summary>
    /// 图例的数据数组。
    /// </summary>
    public List<string> data { get; set; }
}

Step03 对 grid 的封装

public class Grid
{
    /// <summary>
    /// grid 组件离容器上侧的距离。
    /// </summary>
    public string top { get; set; } = "60";

    /// <summary>
    /// grid 组件离容器左侧的距离。
    /// </summary>
    public string left { get; set; } = "10%";

    /// <summary>
    /// grid 组件离容器右侧的距离。
    /// </summary>
    public string right { get; set; } = "10%";

    /// <summary>
    /// grid 组件离容器下侧的距离。
    /// </summary>
    public string bottom { get; set; } = "60";
    /// <summary>
    /// grid 区域是否包含坐标轴的刻度标签。
    /// </summary>
    public bool containLabel { get; set; } = false;
}

Step04 对整体的集成 Option

public class Option
{
    /// <summary>
    /// title
    /// </summary>
    public Title title { get; set; }

    /// <summary>
    /// tooltip
    /// </summary>
    public Tooltip tooltip { get; set; }

    /// <summary>
    /// legend
    /// </summary>
    public Legend legend { get; set; }

    /// <summary>
    /// grid
    /// </summary>
    public Grid grid { get; set; }

    /// <summary>
    /// x轴
    /// </summary>
    public XAxis xAxis { get; set; }

    /// <summary>
    /// y轴
    /// </summary>
    public YAxis yAxis { get; set; }

    /// <summary>
    /// 数据
    /// </summary>
    public List<SeriesItem> series { get; set; }
}

总结

集成 Echarts 之后客户端的代码,对应百度的 Demo:

private List<string> GetLegendData()
{
    List<string> reslut = new List<string>
    {
        "直接访问",
        "邮件营销",
        "联盟广告",
        "视频广告",
        "搜索引擎"
    };
    return reslut;
}

private List<string> GetYAxisData()
{
    List<string> reslut = new List<string>
    {
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
        "周日"
    };
    return reslut;
}

private List<SeriesItem> GetSeries()
{
    List<SeriesItem> result = new List<SeriesItem>();
    SeriesItem item1 = new SeriesItem
    {
        name = "直接访问",
        type = "bar",
        stack = "总量'",
        data = new List<double>
        {
            320,
            302,
            301,
            334,
            390,
            330,
            320
        },
        label = new LSGO.Core.ECharts.Label
        {
            show = true,
            position = "insideRight"
        }
    };
    SeriesItem item2 = new SeriesItem
    {
        name = "邮件营销",
        type = "bar",
        stack = "总量'",
        data = new List<double>
        {
            120,
            132,
            101,
            134,
            90,
            230,
            210
        },
        label = new LSGO.Core.ECharts.Label
        {
            show = true,
            position = "insideRight"
        }
    };
    SeriesItem item3 = new SeriesItem
    {
        name = "联盟广告",
        type = "bar",
        stack = "总量'",
        data = new List<double>
        {
            220,
            182,
            191,
            234,
            290,
            330,
            310
        },
        label = new LSGO.Core.ECharts.Label
        {
            show = true,
            position = "insideRight"
        }
    };
    SeriesItem item4 = new SeriesItem
    {
        name = "视频广告",
        type = "bar",
        stack = "总量'",
        data = new List<double>
        {
            150,
            212,
            201,
            154,
            190,
            330,
            410
        },
        label = new LSGO.Core.ECharts.Label
        {
            show = true,
            position = "insideRight"
        }
    };
    SeriesItem item5 = new SeriesItem
    {
        name = "搜索引擎",
        type = "bar",
        stack = "总量'",
        data = new List<double>
        {
            820,
            832,
            901,
            934,
            1290,
            1330,
            1320
        },
        label = new LSGO.Core.ECharts.Label
        {
            show = true,
            position = "insideRight"
        }
    };
    result.AddRange(new SeriesItem[]
    {
        item1, item2, item3, item4, item5
    });

    return result;
}

private void Form1_Load(object sender, EventArgs e)
{
    Option option = new Option
    {
        tooltip = new Tooltip
        {
            trigger = "axis",
            axisPointer = new AxisPointer
            {
                type = "shadow"
            }
        },
        legend = new Legend
        {
            data = GetLegendData()
        },
        grid = new Grid
        {
            left = "3%",
            right = "4%",
            bottom = "3%",
            containLabel = true
        },
        xAxis = new XAxis {type = "value"},
        yAxis = new YAxis
        {
            type = "category",
            data = GetYAxisData()
        },
        series = GetSeries(),
    };
    echarts1.InitialECharts(option);
}

代码对应结果如下:

Demo

当然,咱们封装「堆叠条形图」是为了解决实际问题,咱们来看看这个控件在实际中的应用。

基于保护类型的缺陷原因分布情况

应用01

基于生产厂家的缺陷原因分布情况

应用02

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


相关图文

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青少年编程备考

感谢您的支持!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值