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实现页面添加印章处理
在一些场合,我们往往需要使用印章来给每页文档加盖一个印章,以表示该文档经过某个部门的认证的,常规的做法就是打印文档后盖章,如果需要电子档再行扫描一下.这样的的处理,如果文档很多,且仅仅需要电子文档的就 ...
随机推荐
- 常用 Java 组件和框架分类
WEB 容器 Tomcat https://tomcat.apache.org/ Jetty https://www.jetty.com/ JBoss https://www.jboss.org/ R ...
- 你有对 Vue 项目进行哪些优化？
(1)代码层面的优化 v-if 和 v-show 区分使用场景 computed 和 watch 区分使用场景 v-for 遍历必须为 item 添加 key,且避免同时使用 v-if 图片资源懒加载 ...
- const isProduction = process.env.NODE_ENV === 'production'; 作用
一. process 要理解 process.env.NODE_ENV 就必须要了解 process,process 是 node 的全局变量,并且 process 有 env 这个属性, 但是没有 ...
- c++临时对象导致的生命周期问题
对象的生命周期是c++中非常重要的概念,它直接决定了你的程序是否正确以及是否存在安全问题. 今天要说的临时变量导致的生命周期问题是非常常见的,很多时候没有一定经验甚至没法识别出来.光是我自己写.rev ...
- Zabbix 5.0 LTS URL 健康监测
更多细节详情看[zabbix官方文档] 需求 Zabbix 的URL健康监测功能允许你检测 Web 地址是否可用.正常工作以及响应速度.这对于监控网站的可用性和性能非常有用.例如,你可以监控公司网站. ...
- windows服务开发demo
0.写在前面 windows7开始,windows服务运行在session 0, 用户程序都运行在session x (x >= 1) 而session之间是有隔离的,实践发现是无法在服务中直接 ...
- MoneyPrinterPlus全面支持本地Ollama大模型
MoneyPrinterPlus现在支持批量混剪,一键AI生成视频,一键批量发布短视频这些功能了. 之前支持的大模型是常用的云厂商,比如OpenAI,Azure,Kimi,Qianfan,Baichu ...
- 软件设计 软件设计模式之SOLID原则
软件设计模式之SOLID原则 By:授客 QQ:1033553122 #单一职责原则(SRP) 定义:任何一个软件模块都只对某一类行为者负责 说明:这里"软件模块",在大部分情况下 ...
- 使用with 还是 join
用分解关联查询的方式查询具有以下优势:多次单表查询,让缓存的效率更高:许多应用程序可以方便地缓存单表查询对应的结果对象.对 MYSQL 的查询缓存来说,如果关联中的某个表发生了变化,那么就无法使用查询 ...
- scratch源码下载 | 几何冲刺
程序说明: <几何冲刺>是一款基于Scratch平台开发的跑酷类游戏程序.在这个游戏中,玩家控制一个黄色的小方块,在快速向前冲刺的过程中躲避各种障碍物.通过按下键盘上的上方向键,玩家可以操 ...