WinForm程序中使用Echarts图表
WinForm程序中使用Echarts
实现原理： WebBrowser + HTML
第一步：在窗体中添加WebBrowser控件
1.在工具箱中找到WebBrowser控件，拖动到窗体中
- 设置WebBrowser控件的属性
ScriptErrorsSuppressed:true;//设置是否允许脚本错误
IsWebBrowserContextMenuEnabled:false; //禁用浏览器菜单
第二步：在项目中引入Echarts.js文件
特别注意：引用Echarts.js版本不得高于3.8.5,否则WebBrowser无法加载
第三步：在项目中新建一个index.html文件，并添加Echarts.js文件
此时我们实现的效果是点击窗体上加载的按钮就能重新加载Echarts图表。
效果图如下:
Js部分添加WinForm窗体按钮的点击所调用的事件
//通过eval 函数传递出json数据
//updateValue为WinForm后台传递数据所调用的方法
function updateValue(value) {
function customJSONParse(jsonString) {
return eval('(' + jsonString + ')');
}
WinForm部分添加按钮的点击事件
/// 加载数据
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
Object[] jsonobjec = dataItems.ToArray();
// 构建JavaScript代码，调用HTML页面中的JavaScript函数，并传递参数
string script = "updateValue('" + JsonConvert.SerializeObject(jsonobjec) + "');"; // 假设HTML中有名为updateValue的JavaScript函数
// 执行JavaScript代码
wb1.Document.InvokeScript("eval", new object[] { script });
}
WinForm设置Webbrowser的属性
private void Form2_Load(object sender, EventArgs e)
{
wb1.ObjectForScripting = this;
//Url:设置访问的html的地址
wb1.Url = new Uri(Application.StartupPath.Replace("\\bin\\Debug", "") + "\\index.html");
}
HTML代码
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="ECharts.JS/echarts.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.5/echarts.js"></script>-->
</head>
<body>
<div id="main" style="width:1500px;height:600px;"></div>
<script type="text/javascript">
function updateValue(value) {
//alert("Value received from C#: " + value);
// 解析JSON字符串为JavaScript数组
//var arr = JSON.parse(value);
function customJSONParse(jsonString) {
return eval('(' + jsonString + ')');
}
//var jsonString = '{"name": "John", "age": 30}';
var parsedObject = customJSONParse(value);
var listPrice92 = new Array();
var listPrice95 = new Array();
var listPriceV0 = new Array();
var listDate = new Array();
// 输出数组内容
for (var i = 0; i < parsedObject.length; i++) {
listDate[i] = parsedObject[i].DIM_DATE.toString().substring(0, 10);
listPrice92[i] = parsedObject[i].V92;
listPrice95[i] = parsedObject[i].V95;
listPriceV0[i] = parsedObject[i].V0;
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '油价曲线'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['92', '95', 'V0']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: listDate.sort()
},
yAxis: {
scale: true
//type: 'value'
},
series: [
{
name: '92',
type: 'line',
data: listPrice92,
itemStyle: { normal: { label: { show: true } } },
lineStyle: { normal: { color: "#FF2e63", width: 3 } }
},
{
name: '95',
type: 'line',
data: listPrice95,
itemStyle: { normal: { label: { show: true } } },
lineStyle: { normal: { color: "#252a34", width: 3 } }
},
{
name: 'V0',
type: 'line',
data: listPriceV0,
itemStyle: { normal: { label: { show: true } } },
lineStyle: { normal: { color: "#08d9d6", width: 3 } }
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
</body>
</html>
WinForm代码
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace XXXXX
{
//设置Com对外可访问
[System.Runtime.InteropServices.ComVisible(true)]
public partial class Form2 : Form
{
public Form2(List<DataItem> data)
{
InitializeComponent();
dataItems = data;
}
public List<DataItem> dataItems;
private void Form2_Load(object sender, EventArgs e)
{
wb1.ObjectForScripting = this;
wb1.Url = new Uri(Application.StartupPath.Replace("\\bin\\Debug", "") + "\\index.html");
}
private void btnLoad_Click(object sender, EventArgs e)
{
wb1.Url = new Uri(Application.StartupPath.Replace("\\bin\\Debug","") + "\\index.html");
}
/// <summary>
/// 加载数据
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
Object[] jsonobjec = dataItems.ToArray();
// wb1.Document.InvokeScript("getdata", jsonobjec);
// 准备要传递的值
string valueToPass = "Hello from C#!";
// 构建JavaScript代码，调用HTML页面中的JavaScript函数，并传递参数
string script = "updateValue('" + JsonConvert.SerializeObject(jsonobjec) + "');"; // 假设HTML中有名为updateValue的JavaScript函数
// 执行JavaScript代码
wb1.Document.InvokeScript("eval", new object[] { script });
}
}
}
博客园内这篇文章例子毕竟详细：https://www.cnblogs.com/JiYF/p/8711277.html
WinForm程序中使用Echarts图表的更多相关文章
- C#WinForm应用程序中嵌入ECharts图表
C#WinForm应用程序中嵌入ECharts图表 程序运行效果: 下载ECharts: 官网下载ECharts :http://echarts.baidu.com/download.html 或者直 ...
- 如何在微信小程序中使用ECharts图表
在微信小程序中使用ECharts 1. 下载插件 首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目. 下载链接:ecomfe/echarts-for-weixi ...
- 在Winform程序中设置管理员权限及为用户组添加写入权限
在我们一些Winform程序中,往往需要具有一些特殊的权限才能操作系统文件,我们可以设置运行程序具有管理员权限或者设置运行程序的目录具有写入的权限,如果是在操作系统里面,我们可以设置运行程序以管理员身 ...
- (转)在Winform程序中设置管理员权限及为用户组添加写入权限
本文转载自:http://www.cnblogs.com/wuhuacong/p/5645172.html 在我们一些Winform程序中,往往需要具有一些特殊的权限才能操作系统文件,我们可以设置运行 ...
- WinForm程序中两份mdf文件问题的解决
在项目中用程序中嵌入mdf文件的方式来进行SQLServer数据库开发非常方便,用来发布开源项目等很方便,点击就可以运行,免部署,特别是在教学中用起来更加方便,老师不用先将数据库文件detach再发给 ...
- 在C#中winform程序中应用nlog日志工具
在C#中winform程序中应用nlog日志工具,配置文件简单应用. 文件名 nlog.config,请注意修改属性为"始终复制",发布时候容易遇到不存在文件的错误提示. 通过Nu ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- Halcon的HWindowControl控件在WinForm程序中的使用介绍（重点解决图片缩放的问题）
Halcon的HWindowControl控件在WinForm程序中的使用介绍(重点解决图片缩放的问题) 2016-12-04 20:11 362人阅读 评论(4) 收藏 举报 分类: Halco ...
- C#中Winform程序中如何实现多维表头【不通过第三方报表程序】
问题:C#中Winform程序中如何实现多维表头. 在网上搜了很多方法,大多数方法对于我这种新手,看的都不是很懂.最后在新浪博客看到了一篇比较易懂的文章:[DataGridView二维表头与合并单元格 ...
- 在Winform程序中使用Spire.Pdf实现页面添加印章处理
在一些场合,我们往往需要使用印章来给每页文档加盖一个印章,以表示该文档经过某个部门的认证的,常规的做法就是打印文档后盖章,如果需要电子档再行扫描一下.这样的的处理,如果文档很多,且仅仅需要电子文档的就 ...
随机推荐
- FFmpeg新旧接口对照使用一览
背景 根据例程学习调用ffmpeg 库方法的时候,发现了一堆警告. main.cpp:81:37: warning: 'AVStream::codec' is deprecated [-Wdeprec ...
- 攻防世界——CRYPTO新手练习区解题总结<1>(1-4题)
第一题base64: 下载附件,得到一个txt文件,打开 得到一串乱码,由题目可知,是base64,解码得到flag 第二题Caesar: 下载附件得到乱码 oknqdbqmoq{kag_tmhq_x ...
- 【简单总结】SLAM 算法的 Benchmark 及相关数据集的结果对比
前言与参考 主要是copy一下总结,方便自己后续找方案特定使用,所有的出处均在标题处和原链接跳转,此处仅做各个benchmark收集使用,如果有原作者觉得侵权,请联系我 将全力配合相关内容和链接删除 ...
- url编码方式
url编码在线工具: http://tool.chinaz.com/tools/urlencode.aspx url编码:风景->%e9%a3%8e%e6%99%af 附HTTP请求过程: ht ...
- 在linux系统中，对标准输出（stdout，文件描述符为 1）和标准错误（stderr，文件描述符为 2）重定向到文件
请参考:2>/dev/null和>/dev/null 2>&1和2>&1>/dev/null的区别 下面的是本人浅尝辄止了,并非全貌,还是上面的文章说的比 ...
- Java-Request对象是用来回去请求信息，得到页面的请求
1.Request 1.1 request对象和response对象的原理(了解) request对象和response对象是由服务器创建的,我们来使用他们即可 request对象是用来回去请求信息, ...
- 有数大数据基础平台之智能运维平台EasyEagle介绍：集群队列篇
他来啦,他来啦!大数据基础平台发布会中提到的智能运维平台,他来啦! 作为数据平台的用户们,下述问题一直困扰着我们: 集群资源水位如何,利用率如何,是否需要扩容? 队列为什么最近大量任务出现pendin ...
- MySQL ibdata1文件太大的解决办法
在MySQL数据库中,如果不指定innodb_file_per_table=1参数单独保存每个表的数据,MySQL的数据都会存放在ibdata1文件里,时间久了这个文件就会变的非常大. 下面是参考网上 ...
- [oeasy]python0019_ 打包和解包_struct_pack_unpack
打包和解包 回忆上次内容 ASCII 由这样几类字符构成 英文大写字符 英文小写字符 数字 符号 电报时代对于英文.数字的编码 使用的是摩斯电码 编辑 这摩斯电码是3进制的编码方式 长短空 怎 ...
- Python 正则表达式实战之Java日志解析
需求描述 基于生产监控告警需求,需要对Java日志进行解析,提取相关信息,作为告警通知消息的内容部分. 提取思路 具体怎么提取,提取哪些内容呢?这里笔者分析了大量不同形态的生产日志,最后总结出4种形态 ...