C#WinForm应用程序中嵌入ECharts图表
程序运行效果:
下载ECharts:
官网下载ECharts :http://echarts.baidu.com/download.html
或者直接在这里下载:源码版echarts.js 、完整版 echarts.min.js 下载地址
引入 ECharts
ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
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>
建立WinForm工程项目添加WebBrowser控件并设置属性,再添加一些必要按钮等控件如下图所示
WebBrowser控件属性设置
//防止 WebBrowser 控件打开拖放到其上的文件。
webBrowser1.AllowWebBrowserDrop = false; //防止 WebBrowser 控件在用户右击它时显示其快捷菜单.
webBrowser1.IsWebBrowserContextMenuEnabled = false; //以防止 WebBrowser 控件响应快捷键。
webBrowser1.WebBrowserShortcutsEnabled = false; //以防止 WebBrowser 控件显示脚本代码问题的错误信息。
webBrowser1.ScriptErrorsSuppressed = true; //(这个属性比较重要,可以通过这个属性,把WINFROM中的变量,传递到JS中,供内嵌的网页使用;但设置到的类型必须是COM可见的,所以要设置 [System.Runtime.InteropServices.ComVisibleAttribute(true)],因为我的值设置为this,所以这个特性要加载窗体类上)
webBrowser1.ObjectForScripting = this;
将设计好的图表加载到WebBrowser控件
this.webBrowser1.Url = new Uri(str + "\\"+comboBox1.Text.Trim());
加载列表
private void button1_Click(object sender, EventArgs e)
{
comboBox1.Items.Clear();
this.getAllHtmlFile();
}
/// <summary>
/// 获取html文件
/// </summary>
private void getAllHtmlFile()
{
//获取指定文件夹的所有文件
string[] paths = Directory.GetFiles(str);
foreach (var item in paths)
{
//获取文件后缀名
string extension = Path.GetExtension(item).ToLower();
if (extension == ".html")
{
comboBox1.Items.Add(Path.GetFileName(item));
}
} if (comboBox1.Items.Count > )
{
comboBox1.SelectedIndex = ;
this.webBrowser1.Url = new Uri(str + "\\" + comboBox1.Text.Trim());
}
}
刷新程序
/// <summary>
/// 刷新
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void button2_Click(object sender, EventArgs e)
{
this.webBrowser1.Refresh();
}
运行程序
这里来自官方的例子多添加了几个可以参考,如下所示
index2.html
index3.html
index4.html
index5.html
index6.html
index7.html
源码工程文件下载 WinformInsertEChartsDemo.zip
C#WinForm应用程序中嵌入ECharts图表的更多相关文章
-
在WinForm应用程序中嵌入WPF控件
我们知道,在WPF界面上添加WinForm的控件需要使用WindowsFormHost类.而在WinForm界面上添加WPF控件该如何做呢?有没有类似的类呢?明显是有的,ElementHost就是为了 ...
-
使用CefSharp在.Net程序中嵌入Chrome浏览器(一)——简介
有的时候,我们需要在程序中嵌入Web浏览器,其实.Net Framework中本身就提供了WebBrowser控件,本身这个是最简单易用的方案,但不知道是什么原因,这个控件在浏览网页的时候有些莫名的卡 ...
-
在WinForm应用程序中快速实现多语言的处理
在国际化环境下,越来越多的程序需要做多语言版本,以适应各种业务需求的变化.在Winform应用程序中实现多语言也有常规的处理方式处理,不过需要针对每个语言版本,重新修改Winform界面的显示,对一些 ...
-
在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
-
在WinForm应用程序中快速实现多语言的处理(2)--开发框架模块的整合
我在上篇随笔<在WinForm应用程序中快速实现多语言的处理>里面介绍了Winform开发中多语言的处理解决方案,整个多语言解决方案是以实际需求为驱动,以减少代码改动,高效处理为目的,通过 ...
-
WinForm应用程序中实现自动更新功能
WinForm应用程序中实现自动更新功能 编写人:左丘文 2015-4-20 近来在给一客户实施ECM系统,但他们使用功能并不是我们ECM制造版提供的标准功能,他们要求对系统作一些定制功能,为了避免因 ...
-
使用CefSharp在.Net程序中嵌入Chrome浏览器(二)——参数设置
在实现了.Net程序中嵌入Chrome浏览器后,下一步的个性化操作就是加入一些设置了,在前面的文章中,我们可以看到在使用Chrome控件前,有如下一个操作: var setting = new Cef ...
-
安卓WebView的使用,在应用程序中嵌入一个浏览器,轻松地展示各种各样的网页
WebView 在应用程序中嵌入一个浏览器,轻松地展示各种各样的网页. 1.定义一个WebView位置 <?xml version="1.0" encoding=" ...
-
微信小程序中使用ECharts 异步加载数据 实现图表
<!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="my ...
随机推荐
-
最新app store 应用提交经验分享
由于之前提交实在3月份的时候,后来长时间没有提交了,最近又需要提交,发现苹果已经发生翻天覆地的变化了,真是跟不上时代了啊.... 之前提交的基本也是从网上看的,前面的证书安装部分其实基本是一样的没什么 ...
-
Solr4.8.0源码分析(25)之SolrCloud的Split流程
Solr4.8.0源码分析(25)之SolrCloud的Split流程(一) 题记:昨天有位网友问我SolrCloud的split的机制是如何的,这个还真不知道,所以今天抽空去看了Split的原理,大 ...
-
JavaWeb三大组件(Servlet,Filter,Listener 自己整理,初学者可以借鉴一下)
JavaWeb三大组件(Servlet,Filter,Listener 自己整理,初学者可以借鉴一下) Reference
-
inheritAll 及 ant antfile案例分析
<?xml version="1.0"?> <project name="a" default="targeta"> ...
-
PLECS_晶闸管调速系统_9w
3. 直流电机开环调压调速系统模型搭建 (1)电路图 (2)仿真 当 α = pi / 2.7 的时候,直流电机的稳定转速大约保持很低的速度. 随着α的减少,直流电机的速度逐渐增大.当α = pi / ...
-
【一天一道LeetCode】#109. Convert Sorted List to Binary Search Tree
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...
-
mysql中的sql
变量 用户变量: 在用户变量前加@ 系统变量: 在系统变量前加@@ 运算符 算术运算符有: +(加), -(减), * (乘), / (除) 和% (求模) 五中运算 位运算符有: & (位于 ...
-
Java知多少(56)线程模型
Java运行系统在很多方面依赖于线程,所有的类库设计都考虑到多线程.实际上,Java使用线程来使整个环境异步.这有利于通过防止CPU循环的浪费来减少无效部分. 为更好的理解多线程环境的优势可以将它与它 ...
-
Qt编写activex控件在网页中运行
qt能够实现的东西非常多,还可以写activex控件直接在网页中运行.参照qtdemo下的例子即可. 方案一:可执行文件下载:https://pan.baidu.com/s/14ge9ix2Ny0x7 ...
-
Oracle 11gR2 RAC 新特性说明
最近接触了一下Oracle 11g R2 的RAC,发现变化很大. 所以在自己动手做实验之前还是先研究下它的新特性比较好. 一. 官网介绍 先看一下Oracle 的官网文档里对RAC 新特性的一 ...