如何利用 C# + Echarts 绘制 Bar Simple
背景
Echarts 是百度推出的一个使用 JavaScript 实现的开源可视化库。 该库提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
既然 Echarts 提供了丰富的图形，所以咱们有必要把它封装起来，以便让其支持 Windows 窗体应用程序。
技术分析
整体的技术方案就是做一个自定义控件，该控件中包含 WebBrowser 浏览器控件，通过该浏览器控件显示指定位置的网页。就像咱们直接通过 Web 浏览器网页一样。具体的步骤如下：
首先，创建一个在 Windows 窗体应用程序中使用的控件项目 LSGO.Core.ECharts。
其次，在该控件项目的设计器中，拖入一个 WebBrowser 控件，并设置其 Dock 属性为 Fill，即让 WebBrowser 充满整个容器。
接着，写一个 InitialECharts 方法，加载指定目录的网页.\assets\echarts.html，让该网页在 WebBrowser 中打开。
当该网页加载完成后，触发 WebBrowser 的 WebBrowserDocumentCompletedEventHandler 事件，在该事件注册的方法中调用该网页中用 JS 写的 showChart 方法，则在该网页中显示图形。
当窗体控件的尺寸发生变化后，触发 WebBrowser 的 SizeChanged 事件，在该事件注册的方法中调用该网页中用 JS 写的 setPosition 方法，则重新调整显示图形的布局，以满足新的尺寸。
WebBrowser 类的常用属性、事件与方法。
<u>属性</u>
/// <summary>
/// 获取或设置一个对象，该对象可由显示在 WebBrowser 控件中的网页所包含的脚本代码访问。
/// </summary>
/// <returns>
/// 可用于脚本代码的对象。
/// </returns>
public object ObjectForScripting { get; set; } /// <returns>
/// 表示当前页的 HtmlDocument，如果未加载任何页，则为 null。
/// </returns>
public HtmlDocument Document { get; }
<u>事件</u> /// <summary>
/// 在 WebBrowser 控件完成加载文档时发生。
/// </summary>
public event WebBrowserDocumentCompletedEventHandler DocumentCompleted; /// <summary>
/// 在 Control.Size 属性值更改时发生。
/// </summary>
public event EventHandler SizeChanged;
<u>方法</u> /// <summary>
/// 将指定的统一资源定位器 (URL) 处的文档加载到 WebBrowser 控件中，替换上一个文档。
/// </summary>
/// <param name="urlString">要加载的文档的 URL。</param>
public void Navigate(string urlString);
HtmlDocument 类的常用方法。 /// <returns>
/// 活动脚本调用所返回的对象。
/// </returns>
/// <param name="scriptName">要调用的脚本方法的名称。</param>
/// <param name="args">要传递给脚本方法的参数。</param>
public object InvokeScript(string scriptName, object[] args);
代码实现
Step1：创建一个用于显示图形的网页。
<u>初始显示的网页 echarts.html</u> <!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
<script src="./jquery-1.11.2.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./json2.js"></script>
<head>
<title></title>
</head>
<body>
<div class="container-fluid">
<div id="main" style="height:350px;"></div>
</div>
<script src="./echarts.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
<u>显示图形时调用的 JS 代码 showChart</u> function showChart(option) {
myChart.clear();
var op = JSON.parse(option);
myChart.setOption(op);
}
<u>当控件的尺寸发生变化时调用的 JS 代码 setPosition</u> function setPosition(height) {
var divMain = document.getElementById("main");
divMain.style.height = height + "px";
window.onresize = myChart.resize();
}
Step2：创建自定义控件 Echarts。
<u>初始化 Echarts 控件的方法</u>
public object Option { get; set; }
public void InitialECharts(Option option)
{
if (option == null)
throw new ArgumentNullException();
Option = JsonConvert.SerializeObject(option);
string strHtml = Application.StartupPath + @"\assets\echarts.html";
if (File.Exists(strHtml))
{
webBrowserMain.Navigate(strHtml);
webBrowserMain.ObjectForScripting = this;
}
}
<u>当 echarts.html 在 WebBrowser 内加载完成之后执行的方法</u>。
private void webBrowserMain_DocumentCompleted(object sender,
WebBrowserDocumentCompletedEventArgs e)
{
object[] objArray = new object[] {Option};
HtmlDocument htmlDocument = webBrowserMain.Document;
if (htmlDocument != null)
{
htmlDocument.InvokeScript("showChart", objArray);
objArray[0] = Height;
htmlDocument.InvokeScript("setPosition", objArray);
_isDocumentLoaded = true;
}
}
<u>当控件 Echarts 尺寸发生变化之后执行的方法</u>。
private void webBrowserMain_SizeChanged(object sender, EventArgs e)
{
if (_isDocumentLoaded)
{
object[] objArray = new object[] {Height};
HtmlDocument htmlDocument = webBrowserMain.Document;
if (htmlDocument != null)
{
htmlDocument.InvokeScript("setPosition", objArray);
}
}
}
Step3：对百度 Echarts 组件的封装。
<u>对 ECharts 中的 xAxis 结构的封装</u>。 public class XAxis
{
/// <summary>
/// 坐标轴类型
/// </summary>
public string type { get; set; } = "category"; /// <summary>
/// 类目数据
/// </summary>
public List<string> data { get; set; }
}
<u>对 ECharts 中 yAxis 结构的封装</u>。 public class YAxis
{
/// <summary>
/// 坐标轴类型
/// </summary>
public string type { get; set; } = "value";
}
<u>对 ECharts 中 series 集合元素的封装</u>。 public class SeriesItem
{
/// <summary>
/// 每个系列通过 type 决定自己的图表类型
/// </summary>
public string type { get; set; } /// <summary>
/// 系列中的数据内容数组
/// </summary>
public List<int> data { get; set; }
}
<u>对 ECharts 中 option 结构的封装</u>。 public class Option
{
/// <summary>
/// x轴
/// </summary>
public XAxis xAxis { get; set; } /// <summary>
/// y轴
/// </summary>
public YAxis yAxis { get; set; } /// <summary>
/// 数据
/// </summary>
public List<SeriesItem> series { get; set; }
}
总结
百度示例的代码：
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'
}]
};
封装成控件之后的调用代码：
private List<string> GetXAxisData()
{
List<string> reslt = new List<string>
{
"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
};
return reslt;
} private List<SeriesItem> GetSeriesData()
{
List<SeriesItem> result = new List<SeriesItem>();
SeriesItem item = new SeriesItem
{
type = "bar",
data = new List<double>
{
120, 200, 150, 80, 70, 110, 130
}
};
result.Add(item);
return result;
} private void FormMain_Load(object sender, EventArgs e)
{
Option option = new Option
{
title = new Title
{
text= "ECharts 入门示例",
},
xAxis = new XAxis
{
type = "category",
data = GetXAxisData()
},
yAxis = new YAxis
{
type = "value"
},
series = GetSeriesData()
};
echartsMain.InitialECharts(option);
}
图形显示如下：
当然，咱们封装百度的 Echarts 并非心血来潮，学习任何技术的目的都要应用于实际，去体现技术的价值。
如何利用 C# + Echarts 绘制 Bar Simple的更多相关文章
- 使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图 简单举例说明下echarts如何绘制条形图和扇形图 代码示例 <!doctype html> <html lang="en" ...
- echarts —— 绘制横向柱状图（圆角、无坐标轴）
UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...
- echarts绘制甘特图
在setoption之后添加这段代码: window.addEventListener('resize', function () { myChart.resize(); }); 图表就能随着 ...
- 如何快速使用ECharts绘制可视化图表
1.在ECharts官网,下载ECharts的源码和示例文件. 2.解压缩下载下来的Echars压缩包,找到doc\example\www\echartsjs目录,将里面的js文件全部取出来,放到项目 ...
- 利用d3.js绘制雷达图
利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...
- 使用echarts绘制漂亮的渐变键盘仪表盘
echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...
- iOS圆角view的Swift实现（利用Core Graphics绘制）
iOS圆角view的Swift实现(利用Core Graphics绘制) 因为app的列表用用到了圆形图片的头像,所以去探究并思考了一下这个问题.首先这个问题有两个方向的解决方案: 把图片弄成圆形的. ...
- 利用Matlab快速绘制栅格地图
代码演示 % 基于栅格地图的机器人路径规划算法 % 第1节:利用Matlab快速绘制栅格地图 clc clear close all %% 构建颜色MAP图 cmap = [1 1 1; ... % ...
- Flask 框架：运用Echarts绘制图形
echarts是百度推出的一款开源的基于JavaScript的可视化图表库,该开发库目前发展非常不错,且支持各类图形的绘制可定制程度高,Echarts绘图库同样可以与Flask结合,前台使用echar ...
- react使用Echarts绘制高亮可点击选中的省市地图
最近做项目遇到一个需求,需要显示广东省各个地级市的地图,并且鼠标移入高亮显示,鼠标点击可以选中某个地级市.在网上查阅了大量资料之后,最后选择了使用echarts实现该需求.在此记录一下,希望可以帮到有 ...
随机推荐
- centos7升级内核 ，wireguard优化
一.centos7升级内核 uname -r 查看内核版本 升级前 升级后 参考链接: https://www.cnblogs.com/rick-zhang/p/14944510.html # 启用 ...
- django日志分割的几种处理
https://blog.csdn.net/qq_42819407/article/details/125041634
- Flink Application Development DataStream API Execution Mode (Batch/Streaming)- Flink应用程序开发DataStream API执行模式（批/流）
目录 什么时候可以/应该使用BATCH执行模式? 配置BATCH执行模式 执行行为 任务调度和网络随机shuffle 流执行模式 批处理执行模式 状态后端/状态 处理顺序 Event Time/水印( ...
- 8. C程序测试用数组个人技巧
在测试程序的时候经常用到用于测试的数组. 这时,数组定义\声明时,最好不要填上元素个数. 当执行某种循环操作(例如将数组中的元素利用循环插入链表中时), 用sizeof(array_name)/siz ...
- 0xc0000142怎么修复
0xc0000142怎么修复 参考链接 https://jingyan.baidu.com/article/4d58d54102f3d29dd4e9c0b1.html
- 公共的common.scss （覆盖部分element组件主题色）
公共的 common.scss (包含主题色 覆盖部分element组件主题色) $theme: #D50000; $litterTheme: #ec6059; .text-theme { color ...
- C# IOC 个人理解
学习QFramework 过程中发现对IOC不太了解,就大概百度了一下思路 将原先类与类之间的相互依赖关系,转移到第三方容器中, 同过读取配置文件来生成对应的依赖关系,将原本类之间的耦合转移到配置文件 ...
- Ubuntu18.04 右上角网络连接消失问题记录
问题记录 因为一块板子要访问远程桌面,需要联网才行,然后发现桌面右上角的网络连接标志不见了,而且无论用usb共享网路,或者是无线网卡,都连不上网. 首先想是不是硬件的问题,给系统重新装了一个ubunt ...
- sql-SQL Prompt
本人用的是win10系统,这里也着重介绍win10系统的激活方式 激活方式: 1.首先系统HOSTS文件添加以下屏蔽网络 127.0.0.1 red-gate.com 127.0.0.1 www.re ...
- el-dropdown-item 添加点击 事件无效 (vue)
如图 无效!!! 为什么呢?? 想了一下,可能是因为 el-dropdown-item 没有自定义click事件 so! 解决办法就是 添加原生事件 : @click.native 还有 ...