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实现页面添加印章处理
在一些场合,我们往往需要使用印章来给每页文档加盖一个印章,以表示该文档经过某个部门的认证的,常规的做法就是打印文档后盖章,如果需要电子档再行扫描一下.这样的的处理,如果文档很多,且仅仅需要电子文档的就 ...
随机推荐
- Freertos学习：01 移植到STM32
--- title: rtos-freertos-01-移植到STM32 EntryName: rtos-freertos-01-porting-on-stm32 date: 2020-06-17 1 ...
- 3568F-三屏同显、异显方案演示
- Codeforces Round 894 (Div. 3) A-E cd 894 div3
A. Gift Carpet 每道题都是伸缩代码框有ac代码请不要漏掉 --------------------------题解----------------------------- 按先行便然后 ...
- ubuntu 编译安装ffmpeg
[前言] 使用apt-get install直接安装的ffmpeg无法提供相应的头文件, 在编译一些使用ffmpeg接口的程序时会提示找不到某某头文件, 于是准备自己编译安装一下ffmpeg. 安装分 ...
- nodejs,express设置允许跨域请求
express设置允许跨域请求 //设置跨域访问 app.all("*", function (req, res, next) { //设置允许跨域的域名,*代表允许任意域名跨域 ...
- Vue2 移动端 ui库 MintUI
MintUI MintUI是饿了么团队开发的基于移动端的vue组件库.用于搭建移动端界面. http://mint-ui.github.io/docs/#/zh-cn2
- [WUSTCTF2020]朴实无华(命令执行)
请求头问题 去查了一下资料了解了一下没有什莫用 robots.txt 中有东西 假flag 但是请求头里有重要消息 访问页面/fl4g.php <img src="/img.jpg&q ...
- Midnight Commander (MC)
Midnight Commander GNU Midnight Commander 是一个可视化文件管理器,根据 GNU 通用公共许可证获得许可,因此有资格成为自由软件.它是一个功能丰富的全屏文本模式 ...
- JavaScript小技巧~this的保存
在JavaScript中如果一个函数返回一个函数,此时this容易丢失,为了不使this丢失,需要在函数内部保存this. change() { let _this=this return funct ...
- 如何正确使用@Bulider与<T>返回数据
@Data @ToString @Builder @AllArgsConstructor public class PageResult<T> implements Serializabl ...