【技术分享】Winform桌面程序如何嵌入echarts图表并实现JS和C#方法相互调用

using System;
using System.Windows.Forms;
using System.Windows.Forms.Integration;
using Microsoft.Web.WebView2.Core;
 
public partial class EChartsForm : Form
{
    private WebView2 webView2Control;
 
    public EChartsForm()
    {
        InitializeComponent();
        InitializeCharts();
    }
 
    private void InitializeComponent()
    {
        // 初始化界面组件
        this.webView2Control = new WebView2();
        this.SuspendLayout();
        // ...
        // 设置WebView2控件的相关属性
        this.webView2Control.Dock = DockStyle.Fill;
        this.Controls.Add(this.webView2Control);
        this.ResumeLayout(false);
        // ...
    }
 
    private async void InitializeCharts()
    {
        // 确保WebView2环境准备就绪
        await webView2Control.EnsureCoreWebView2Async();
        // 加载包含ECharts图表和交互式方法的HTML文件
        webView2Control.CoreWebView2.Navigate("your_echarts_page.html");
        
        // 为WebView2的CoreWebView2实例添加事件监听，以接收从JS发起的调用
        webView2Control.CoreWebView2.AddWebResourceRequestedFilter("*", CoreWebView2WebResourceContext.All);
        webView2Control.CoreWebView2.WebResourceRequested += OnWebResourceRequested;
    }
 
    private void OnWebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs e)
    {
        // 判断是否为特定的请求，并处理
        if (e.Request.Uri.AbsolutePath == "/executeCSharpMethod")
        {
            // 调用C#方法
            string result = ExecuteCSharpMethod(e.Request.Uri.Query);
            // 将结果传回给JavaScript
            e.SetResponse(new CoreWebView2WebResourceResponse(result: result));
        }
    }
 
    private string ExecuteCSharpMethod(string query)
    {
        // 解析query并执行C#逻辑
        // ...
        return "C#方法执行结果";
    }
 
    // 其他代码...
}

这个示例展示了如何在WinForms应用程序中嵌入WebView2控件，并加载一个包含ECharts图表的HTML页面。同时，它演示了如何通过监听WebView2的WebResourceRequested事件来处理从JavaScript发起的请求，并在C#中执行相应的方法。最后，它展示了如何将C#方法执行的结果返回给JavaScript。这个过程是实现C#和JavaScript代码互操作的一个典型例子。