当前位置：首页 > news >正文

在winform中使用chromiumWebBrowser显示Echarts图表

news 来源：原创 2025/4/28 7:15:19

首先，在项目引用中添加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%'];
}
},