技术图文:如何利用C# + Echarts 绘制「堆叠条形图」?
背景
前几天,我们介绍了 如何利用C# + Echarts 绘制 Bar Simple?,原以为把 Echarts 封装到这种程度就可以完成当前任务了。
可是,把软件原型提交给对方时,发现对方更希望“可视化设备发生缺陷的具体数据”。也即利用 堆叠条形图 来可视化设备缺陷的数据。
百度提供的详细Demo如下:
于是,咱们就需要在之前的基础上对 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]}]
};
通过两段代码的对比,我们还需要对 tooltip
、legend
、grid
进行封装,其余的 xAxis
、yAxis
、series
已经封装过了,只不过需要在每个对应的类中添加新增的属性即可。
再重复一下封装百度 Echarts 的思路:
首先,创建一个在 Windows 窗体应用程序中使用的控件项目 LSGO.Core.ECharts
。
其次,在该控件项目的设计器中,拖入一个 WebBrowser 控件,并设置其 Dock
属性为 Fill
,即让 WebBrowser 充满整个容器。
接着,写一个 InitialECharts
方法,加载指定目录的网页.\assets\echarts.html
,让该网页在 WebBrowser 中打开。
当该网页加载完成后,触发 WebBrowser 的 WebBrowserDocumentCompletedEventHandler
事件,在该事件注册的方法中调用该网页中用 JS 写的 showChart
方法,则在该网页中显示图形。
当窗体控件的尺寸发生变化后,触发 WebBrowser 的 SizeChanged
事件,在该事件注册的方法中调用该网页中用 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);
}
代码对应结果如下:
当然,咱们封装「堆叠条形图」是为了解决实际问题,咱们来看看这个控件在实际中的应用。
基于保护类型的缺陷原因分布情况
基于生产厂家的缺陷原因分布情况
好了,今天就到这里吧!希望咱们一起学习的知识对大家有用!See You!
相关图文:
- 如何利用 C# 实现 K 最邻近算法?
- 如何利用 C# 实现 K-D Tree 结构?
- 如何利用 C# + KDTree 实现 K 最邻近算法?
- 如何利用 C# 对神经网络模型进行抽象?
- 如何利用 C# 实现神经网络的感知器模型?
- 如何利用 C# 实现 Delta 学习规则?
- 如何利用 C# 爬取带 Token 验证的网站数据?
- 如何利用 C# 向 Access 数据库插入大量数据?
- 如何利用 C# 开发「桌面版百度翻译」软件!
- 如何利用 C# 开发「股票数据分析软件」(上)
- 如何利用 C# 开发「股票数据分析软件」(中)
- 如何利用 C# 开发「股票数据分析软件」(下)
- 如何利用 C# 爬取「财报说」中的股票数据?
- 如何利用 C# 爬取 One 持有者返利数据!
- 如何利用 C# 爬取Gate.io交易所的公告!
- 如何利用 C# 爬取BigOne交易所的公告!
- 如何利用 C# 爬取 ONE 的交易数据?
- 如何利用 C# 爬取「猫眼电影:热映口碑榜」及对应影片信息!
- 如何利用 C# 爬取「猫眼电影专业版:票房」数据!
- 如何利用 C# 爬取「猫眼电影:最受期待榜」及对应影片信息!
- 如何利用 C# 爬取「猫眼电影:国内票房榜」及对应影片信息!
- 如何利用 C# + Python 破解猫眼电影的反爬虫机制?
- 如何利用BigOne的API制作自动化交易系统 – 身份验证
- 如何利用BigOne的API制作自动化交易系统 – 获取账户资产
- 如何利用BigOne的API制作自动化交易系统 – 订单系统
技术图文:如何利用C# + Echarts 绘制「堆叠条形图」?相关推荐
- python 条形图_Python数据可视化:基于matplotlib绘制「堆积条形图」
简介 堆积条形图作为条形图的一种,能够显示单个项目与整体之间的关系.不仅可以直观的看出每个系列的值,还能够反映出系列的总和,尤其是当需要看某一项目的总和以及其组成各系列值的比重时,最适合使用堆积条形图 ...
- 技术图文:如何利用C# + Echarts 绘制 Bar Simple?
背景 Echarts 是百度推出的一个使用 JavaScript 实现的开源可视化库. 该库提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图, ...
- 应用架构、业务架构、技术架构和业务流程图详解「建议收藏」
应用架构.业务架构.技术架构和业务流程图详解「建议收藏」 应用架构(ApplicationArchitecture)是描述了IT系统功能和技术实现的内容.应用架构分为以下两个不同的层次:企业级的应用架 ...
- 「咖啡馆」里的任正非:开放的技术和商业,不会遵循「丛林法则」
https://www.toutiao.com/a6703450899445973511/ 2019-06-17 18:53:07 摘要:任正非的「咖啡馆」迎来了第一批客人,他们聊了聊「华为现在面临的 ...
- 技巧 | 使用基础绘图系统绘制「森林图」
森林图可以很直观地表达数学模型的结果,尤其是在对比多种情境的结果时. R语言中有一些专门绘制森林图的工具包,不过小编目前还没仔细研究过.实际上,通过基础绘图系统的一些简单函数的组合使用就能绘制森林图. ...
- 对比学习,用Excel和Python绘制「棒棒糖图」
点击上方"Python爬虫与数据挖掘",进行关注 回复"书籍"即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 长安一片月,万户捣衣声. 大家好, ...
- 【笔记】专访大象声科汪德亮:利用深度学习解决「鸡尾酒会问题 」
案例来源:机器之心 @吴攀 案例地址:https://www.jiqizhixin.com/articles/2017-02-11-4 (以下为案例的简要概述,便于之后能快速检索到相关内容.部分文字与 ...
- 技术图文:如何利用 C# 实现 误差反向传播 学习规则?
背景 我们在 如何利用 C# 对神经网络模型进行抽象? 中完成了神经网络的抽象结构: 三个接口:激活函数.有监督学习.无监督学习 三个抽象类:神经元.网络层.网络拓扑 我们在 如何利用 C# 实现神经 ...
- 技术图文:如何利用C# 实现 Prim 最小生成树算法?
背景 我们上一篇图文介绍了 如何利用 C# 实现 Kruskal 最小生成树算法?,Kruskal 算法通过寻找边最优的方式来构造最小生成树,本篇图文介绍如何利用 C# 实现 Prim 最小生成树算法 ...
最新文章
- 腾讯音乐招 iOS 开发, base 深圳,要求:本科、三年、OC,懂音视频开发优先。...
- 冲刺区块链第一股,也是AI芯片第一股,嘉楠在美提交IPO招股书
- 使用1个盘三个5G分区创建12G逻辑卷
- MySQL学习笔记之九:MySQL Replication
- 【sql】牛客网练习题 (共 61 题)
- [javaweb] servlet处理请求参数中文乱码的问题
- python的for语句打印金字塔图形_python实现输入任意一个大写字母生成金字塔的示例...
- REVERSE-PRACTICE-CTFSHOW-8
- 《几何与代数导引》例2.9
- Vue.js中data,props和computed数据
- node.js——麻将算法(七)简易版麻将出牌AI2.0
- matlab ascii 异或,GPS数据包的ASCII异或校验和计算方法(VC++)
- Linux内核安装-5.9.1为例
- Software Testing Resource
- 文档交接说明书(模板)
- 计算机网络(韩立刚老师主讲笔记)
- 查看计算机配置在哪里,怎么看电脑配置 查看电脑配置的方法有哪些
- oracle销售订单导入错误,通过传XML格式导入到ORACLE的销售订单
- jQuery播放音乐
- Xcode自动打包和上传蒲公英平台脚本(用python实现)
热门文章
- Python培训班适合哪些人报名学习
- 浅谈同一家公司多个系统,共用登录用户名和密码
- Python创建和访问字典
- ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]
- Android -- Fragment注意事项
- C 语言 和 C++语言的对比学习 二 数据类型
- Nagios+pnp4nagios+rrdtool 安装配置为nagios添加自定义插件(三)
- Directx教程(24) 简单的光照模型(3)
- 使用LocalDate计算给定2个日期的几年几月几日
- 最新Java面试题2021年,常见面试题及答案汇总