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实现页面添加印章处理
在一些场合,我们往往需要使用印章来给每页文档加盖一个印章,以表示该文档经过某个部门的认证的,常规的做法就是打印文档后盖章,如果需要电子档再行扫描一下.这样的的处理,如果文档很多,且仅仅需要电子文档的就 ...
随机推荐
- [UG 二次开发 python] 导出BOM表(包含图片)
只导出最底层的零件,零件的属性已经设置好,零件的截图生成后,放在零件的同一个文件夹下 用到了 xlsxwriter # nx: threaded # 导出BOM表 __version__ = &quo ...
- Qt实现汽车仪表盘
在UI界面显示中,仪表盘的应用相对比较广泛,经常用于显示速度值,电压电流值等等,最终实现效果如下动态图片(文末提供给源工程下载): 主要包含以下绘制步骤: 绘制画布 /* * 绘制画布 */ void ...
- Spring的@Configuration和@Bean注解定义第三方bean
@Configuration和@Bean注解的使用 @Configuration标注在类上,相当于把该类作为spring的xml配置文件中<beans>,作用为:配置spring容器(应用 ...
- C# 轻量级 ORM 框架 NPoco 的简单应用
目录 简介 快速入门 安装 NuGet 包 实体类User 数据库类DbFactory 增删改查 Insert Select Update Delete 总结 简介 NPoco 是 PetaPoco ...
- 使用Eclipse开发Vue——CodeMix够智能
使用Eclipse开发Vue--CodeMix够智能 Eclipse的CodeMix插件允许您访问 VS Code和Code OSS扩展社区,以及 Webclipse 1.x 功能. Vue.js是构 ...
- [oeasy]python0096_游戏娱乐行业_雅达利_米洛华_四人赛马_影视结合游戏
游戏娱乐行业 回忆上次内容 游戏机行业从无到有 雅达利 公司 一枝独秀 并且带领 行业 发展起来 雅达利公司 优秀员工 乔布斯 在 朋友 帮助下完成了<pong> Jobs 黑了 Woz ...
- Docker Compose 基本概要
Docker Compose 基本概要 Compose 是一个用于定义和运行多容器 Docker 应用程序的工具.使用 YAML 文件来配置多个应用程序的服务,包括生产.暂存.开发.测试以及 CI 工 ...
- Python 按分类样本数占比生成并随机获取样本数据
按分类样本数占比生成并随机获取样本数据 By:授客 QQ:1033553122 开发环境 win 10 python 3.6.5 需求 已知样本分类,每种分类的样本占比数,及样本总数,需要随机获取这些 ...
- 题解：CF1971D Binary Cut
题解:CF1971D Binary Cut 题意 给予你一个 \(01\) 字符串,你可以将它分割,分割后必须排成先 \(0\) 后 \(1\) 的格式. 求最少分割为几部分. 思路 将 \(0\) ...
- mysql数据库无法录入汉字问题
1.插入数据出现错误 show full columns from 表名;//查看数据表列编码 2. alter table 表名 change 列名 列名 varchar(自己设置) charact ...