在winform中使用chromiumWebBrowser显示Echarts图表

首先,在项目引用中添加CefSharp,这个是谷歌的控件。

然后在form中添加一个chromiumWebBrower控件

在form初始化时,执行浏览器组件的初始化

//浏览器组件只初始化一次,所以放在主界面

CefSettings settings = new CefSettings(); //参数设置

settings.CefCommandLineArgs.Add("save-image-download", "true"); // 确保开启图片下载支持

Cef.Initialize(settings);

执行控件的初始化

try

{

//加载Html

this.webBrowser1.Load(Environment.CurrentDirectory + "\\Web\\WeldChart.html");

//暴漏 C#方法给JavaScript调用

this.webBrowser1.JavascriptObjectRepository.ResolveObject += (sender, e) => {

var repo = e.ObjectRepository;

if (e.ObjectName == "JavaScriptCallFormClass")

{

repo.NameConverter = null;

repo.NameConverter = new CamelCaseJavascriptNameConverter();

repo.Register("JavaScriptCallFormClass", new JavaScriptCallFormClass(), isAsync: true, BindingOptions.DefaultBinder);

}

};

//禁用右键菜单

this.webBrowser1.MenuHandler = new DisableContextMenuHandler();

//在webBrowser完全初始化完成后 通知启动线程

this.webBrowser1.FrameLoadEnd += (sender, e) => {

if (e.Frame.IsMain)

{

browserInitializedEvent.Set();

bool isEnableBanner = false;

}

};

}

catch (Exception ex)

{

MessageBox.Show("页面初始化异常,请联系管理员: " + ex.Message);

}

对控件要显示的曲线数据进行赋值

// 将列表转换为 JSON 格式

string xValueJson = JsonConvert.SerializeObject(xValue);

string seatNumJson = JsonConvert.SerializeObject(seamNum);

string currentJson = JsonConvert.SerializeObject(current);

string voltageJson = JsonConvert.SerializeObject(voltage);

string speedWireJson = JsonConvert.SerializeObject(speedWire);

string airFlowJson = JsonConvert.SerializeObject(airFlow);

// 调用 JavaScript 的 updateHourProductionChart 函数并传递数据

webBrowser1.ExecuteScriptAsync($"updateWeldChart({xValueJson},{seatNumJson},{currentJson},{voltageJson},{speedWireJson},{airFlowJson})");

Web\\WeldChart.html里面就是Echarts的代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>小时产量平滑折线图</title>

<script src="../ECharts.Js/echarts.min.js"></script>

</head>

<body>

<div id="main" style="width:100%; height:100vh;"></div>

<script>

var chartDom = document.getElementById('main');

var weldChart = echarts.init(chartDom);

var option;

const colors = ['#FF3333', '#91CC75', '#33ffec', '#ff33da', '#2E2676'];

option = {

tooltip: {

trigger: 'axis',

position: function (pt) {

return [pt[0], '10%'];

}

},

相关推荐
paopaokaka_luck27 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js