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

【WPF】 在WebView2使用echart显示数据

article 2026/1/20 4:21:10

文章目录

  • 前言
  • 一、NuGet安装WebView2
  • 二、代码部分
    • 1.xaml中引入webview2
    • 2.编写html
    • 3.在WebView2中加载html
    • 4.调用js方法为Echarts赋值
  • 总结

前言

为了实现数据的三维效果，所以需要使用Echarts，但如何在WPF中使用Echarts呢？

一、NuGet安装WebView2

在这里插入图片描述

二、代码部分

1.xaml中引入webview2

 xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"

<wv2:WebView2 Name = "webview2"/>

2.编写html

写一个html文件（请注意写你自己Echarts.js的路径），放到项目中，html内容如下：

<!DOCTYPE html>
<html><head><title>Simple Surface</title><meta charset="utf-8"><script src="source/echarts.min.js"></script><script src="source/echarts-gl.min.js"></script>
</head><body><div id="main" style="width: 100%;height:300px;"></div>
</body><script type="text/javascript">var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var data3d = [];var option;option = {tooltip: {},backgroundColor: '#fff',visualMap: {show: true,dimension: 2,min: -300,max: 100,inRange: {color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']}},xAxis3D: {name: '纵向',type: 'value'},yAxis3D: {name: '横向',type: 'value'},zAxis3D: {name: '高程',type: 'value',min: -20,max: 30},grid3D: {viewControl: {projection: 'orthographic'}},series: [{name: "路面高程",type: 'surface',data: data3d,}]};option && myChart.setOption(option);
</script>
<script type="text/javascript">function setChartSize(width, height){console.log(width + "|"+height);document.getElementById('main').style.width = width + 'px';document.getElementById('main').style.height = height + 'px';myChart.resize();}function set3dData(data, min,max){console.log("设置数据中");data3d = data;option.visualMap.min = min;option.visualMap.max = max;myChart.resize();Draw3d();}function Draw3d(){option.series[0].data = data3d;myChart.setOption(option);}
</script>
</html>

3.在WebView2中加载html

在代码中加入如下方法，使webview2加载我们写好的html。

 //初始化标识bool webview2_initialized = false;private async void InitializeWebView(){// 确保WebView2控件已经初始化await webview2.EnsureCoreWebView2Async(null);// 注册DOMContentLoaded事件，确保页面加载完成后调用JavaScript方法webview2.CoreWebView2.DOMContentLoaded += CoreWebView2_DOMContentLoaded;// 加载HTML内容var htmlFilePath = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory + "你的路径", "index.html");this.webview2.CoreWebView2.Navigate(htmlFilePath);}private void CoreWebView2_DOMContentLoaded(object sender, CoreWebView2DOMContentLoadedEventArgs e){var width = this.webview2.ActualWidth - 20;var height = this.webview2.ActualHeight - 20;//webview2加载完成。webview2_initialized = true;//调用js中的setChartSize方法webview2.CoreWebView2.ExecuteScriptAsync("setChartSize(" + width + "," + height + ")");}

4.调用js方法为Echarts赋值

 //检测webview2是否初始化完成。while (!webview2_initialized){//程序等待await Task.Delay(100);}//调用js方法为echart方法赋值。this.Dispatcher.Invoke(() =>{string jsString = "set3dData({0},{1},{2});";string[] data =  你的方法;jsString = String.Format(jsString, data[0], data[1], data[2]);if (webview2.CoreWebView2 != null) {//调用js代码webview2.CoreWebView2.ExecuteScriptAsync(jsString);}});

总结

完成上述操作后，就可以看到如下效果了。至此我们完成了WPF使用的Echarts的操作。感谢观看，下集再见。
在这里插入图片描述

相关文章：

【WPF】 在WebView2使用echart显示数据

文章目录 前言一、NuGet安装WebView2二、代码部分1.xaml中引入webview22.编写html3.在WebView2中加载html4.调用js方法为Echarts赋值 总结 前言 为了实现数据的三维效果&#xff0c;所以需要使用Echarts&#xff0c;但如何在WPF中使用Echarts呢&#xff1f; 一、NuGet安装WebV…...

编程日记 2026/1/20 4:21:10

OpenCV 图像拼接

一、图像拼接的介绍 图像拼接是一种将多幅具有部分重叠内容的图像合并成一幅完整、无缝且具有更广阔视野或更高分辨率图像的技术。其目的是通过整合多个局部图像来获取更全面、更具信息价值的图像内容。 二、图像拼接的原理 图像拼接的核心目标是将多幅有重叠区域的图像进行准…...

编程日记 2026/1/20 0:14:06

数学建模AI智能体(4.16大更新)

别的不说就说下面这几点&#xff0c;年初内卷到现在&#xff0c;就现阶段AI水平&#xff0c;卷出了我比较满意的作品&#xff0c;这里分享给各位同学&#xff0c;让你们少走弯路&#xff1a; 1.轻松辅导学生 2.帮助学习 3.突破知识壁垒&#xff0c;缩短与大佬的差距 4.打破…...

编程日记 2026/1/20 2:54:09

音视频小白系统入门笔记-1

本系列笔记为博主学习李超老师课程的课堂笔记&#xff0c;仅供参阅 课程传送门&#xff1a;音视频小白系统入门课 音视频基础ffmpeg原理 往期课程笔记传送门&#xff1a;音视频小白系统入门笔记-0 课程实践代码仓库&#xff1a;传送门 音频采集 命令行采集 Android端音频…...

编程日记 2025/12/1 1:31:59

Flutter 强制横屏

在 Flutter 中&#xff0c;可以通过设置 SystemChrome 来强制应用横屏显示。以下是实现这一功能的详细步骤和代码示例&#xff1a; 步骤 1&#xff1a;导入必要的包 确保在文件顶部导入了 services.dart 包&#xff0c;因为 SystemChrome 类位于该包中。 import package:flut…...

编程日记 2026/1/18 17:18:05

量子安全邮件系统 —— NTRU算法邮件加密核心

目录 量子安全邮件系统 —— NTRU算法邮件加密核心一、项目背景与简介二、NTRU算法理论基础三、系统架构设计3.1 模块划分3.2 系统架构图（Mermaid示意图）四、邮件加密核心流程与关键技术4.1 密钥生成与公钥计算4.2 邮件加密4.3 邮件解密4.4 关键技术要点五、GUI设计与系统扩展…...

编程日记 2026/1/9 5:27:22

Go：方法

方法声明 type point struct { X, Y float64 }// 普通函数 func Distance(p, q Point) float64 {return math.Hypot(q.x - p.x, q.y - p.Y) }// Point类型的方法 func (p Point) Distance(q Point) float64 {return math.Hypot(q.x - p.x, q.y - p.Y) }方法声明与普通函数声…...

编程日记 2025/11/30 21:07:55

深入剖析 Axios 的 POST 请求：何时使用 qs 处理数据

在前端开发中&#xff0c;Axios 是一个广泛使用的用于发送 HTTP 请求的库&#xff0c;特别是在处理 POST 请求时&#xff0c;数据的处理方式会直接影响到请求能否正确被后端接收和处理。其中&#xff0c;使用 qs 库对数据进行处理是一个常见的操作点&#xff0c;本文将深入探讨…...

编程日记 2026/1/19 12:58:16

【数据结构_7】栈和队列（上）

一、概念 栈和队列&#xff0c;也是基于顺序表和链表实现的 栈是一种特殊的线性表&#xff0c;其只允许在固定的一段进行插入和删除元素操作。 遵循后进先出的原则 此处所见到的栈&#xff0c;本质上就是一个顺序表/链表&#xff0c;但是&#xff0c;实在顺序表/链表的基础…...

编程日记 2026/1/8 3:37:35

Linux》》bash 、sh 执行脚本

通常使用shell去运行脚本&#xff0c;两种方法 》bash xxx.sh 或 bash “xxx.sh” 、sh xxx.sh 或 sh “xxx.sh” 》bash -c “cmd string” 引号不能省略 我们知道 -c 的意思是 command&#xff0c;所以 bash -c 或 sh -c 后面应该跟一个 command。...

编程日记 2026/1/20 2:38:51

如何用“AI敏捷教练“破解Scrum项目中的“伪迭代“困局？

一、什么是“伪迭代”&#xff1f; “伪迭代”是指团队表面上采用Scrum框架&#xff0c;但实际运作仍沿用瀑布模式的现象。例如&#xff1a;迭代初期开发人员集中编码、末期测试人员突击测试&#xff0c;导致资源分配不均&#xff1b;需求拆分粗糙&#xff0c;团队无法在固定时…...

编程日记 2026/1/20 4:07:24

使用 vxe-table 来格式化任意的金额格式，支持导出与复制单元格格式到 excel

使用 vxe-table 来格式化任意的金额格式&#xff0c;支持导出与复制单元格格式到 excel 查看官网&#xff1a;https://vxetable.cn gitbub&#xff1a;https://github.com/x-extends/vxe-table gitee&#xff1a;https://gitee.com/x-extends/vxe-table 安装 npm install vx…...

编程日记 2026/1/19 22:43:25

金币捕鱼类手游《海洋管家》源码结构与系统分层解析

在休闲互动类移动应用开发中&#xff0c;捕鱼类项目因玩法成熟、逻辑清晰而成为不少开发者接触多端架构与模块化管理的重要起点。本文以一款名为《海洋管家》的项目源码为样例&#xff0c;简要解析其整体结构与主要功能模块&#xff0c;供有类似项目需求或系统学习目的的开发者…...

编程日记 2026/1/19 22:33:22

Go语言实现OAuth 2.0认证服务器

文章目录 1. 项目概述1.1 OAuth2 流程 2. OAuth 2.0 Storage接口解析2.1 基础方法2.2 客户端管理相关方法2.3 授权码相关方法2.4 访问令牌相关方法2.5 刷新令牌相关方法 2.6 方法调用时序2.7 关键注意点3. MySQL存储实现原理3.1 数据库设计3.2 核心实现 4. OAuth 2.0授权码流程…...

编程日记 2026/1/20 0:18:55

【2025年认证杯数学中国数学建模网络挑战赛】C题 数据预处理与问题一二求解

目录 【2025年认证杯数学建模挑战赛】C题数据预处理与问题一求解三、数据预处理及分析3.1 数据可视化3.2 滑动窗口相关系数统计与动态置信区间耦合分析模型3.3 耦合关系分析结果 四、问题一代码数据预处理问题一 【2025年认证杯数学建模挑战赛】C题 数据预处理与问题一求解 三…...

编程日记 2026/1/14 16:37:46

2025年最新Web安全(面试题)

活动发起人小虚竹 想对你说&#xff1a; 这是一个以写作博客为目的的创作活动&#xff0c;旨在鼓励大学生博主们挖掘自己的创作潜能&#xff0c;展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴&#xff0c;那么&#xff0c;快来参加吧&#xff01…...

编程日记 2026/1/12 10:41:45

利用Global.asax在ASP.NET Web应用中实现功能

Global.asax文件&#xff08;也称为ASP.NET应用程序文件&#xff09;是ASP.NET Web应用程序中的一个重要文件&#xff0c;它允许您处理应用程序级别和会话级别的事件。下面介绍如何利用Global.asax来实现各种功能。 Global.asax基本结构 <% Application Language"C#&…...

编程日记 2025/12/2 9:28:51

开源微调混合推理模型：cogito-v1-preview-qwen-32B

一、模型概述 1.1 模型特点 Cogito v1-preview-qwen-32B 是一款基于指令微调的生成式语言模型&#xff08;LLM&#xff09;&#xff0c;具有以下特点&#xff1a; 支持直接回答&#xff08;标准模式&#xff09;和自我反思后再回答&#xff08;推理模式&#xff09;。使用 I…...

编程日记 2026/1/20 0:30:48

Golang｜Channel 相关用法理解

文章目录 用 channel 作为并发小容器channel 的遍历channel 导致的死锁问题用 channel 传递信号用 channel 并行处理文件用channel 限制接口的并发请求量用 channel 限制协程的总数量 用 channel 作为并发小容器 注意这里的 ok 如果为 false&#xff0c;表示此时不仅channel为空…...

编程日记 2026/1/20 2:37:02

C++ - #命名空间 #输入、输出 #缺省参数 #函数重载 #引用 # const 引用 #inline #nullptr

文章目录 前言 一、实现C版本的hello world 二、命名空间 1、namespace 的价值 2、namespace 的定义 (1.域会影响一个编译器编译语法时的查找规则 (2、域会影响生命周期 (3、命名空间域只能定义在全局 (4、编译器会自动合并相同命名空间中的内容 (5、C标准库放在命名…...

编程日记 2026/1/20 4:44:44

Spring Boot 应用程序中配置使用consul

配置是 Spring Boot 应用程序中的一部分&#xff0c;主要用于配置服务端口、应用名称、Consul 服务发现以及健康检查等功能。以下是对每个部分的详细解释&#xff1a; 1. server.port server:port: 8080作用&#xff1a;指定 Spring Boot 应用程序运行的端口号。解释&#xf…...

编程日记 2026/1/8 12:30:32

JSON处理工具/框架的常见类型及详解，以Java语言为例

以下是JSON处理工具/框架的常见类型及详解&#xff0c;以Java语言为例&#xff1a; 一、主流JSON处理工具对比 Jackson&#xff08;推荐&#xff09; 特点&#xff1a;高性能、功能丰富&#xff0c;支持注解&#xff08;如JsonProperty&#xff09;、树形模型&#xff08;Json…...

编程日记 2026/1/20 3:52:18

4. k8s核心概念 pod deployment service

以下是 Kubernetes 的核心概念详解&#xff0c;涵盖 Pod、Service、Deployment 和 Node&#xff0c;以及它们之间的关系和实际应用场景&#xff1a; 1. Pod 定义与作用 • 最小部署单元&#xff1a;Pod 是 Kubernetes 中可创建和管理的最小计算单元&#xff0c;包含一个或多个…...

编程日记 2026/1/6 14:27:27

c++中max函数怎么使用?

在C中&#xff0c;std::max函数是一个在 <algorithm> 标准库头文件中定义的函数模板&#xff0c;用于确定两个或更多个数值之间的最大值。下面是对std::max函数的基本介绍和使用示例&#xff1a; 函数原型&#xff1a; template <class T> constexpr const T&…...

编程日记 2025/12/2 2:39:56

使用Redis实现分布式限流

一、限流场景与算法选择 1.1 为什么需要分布式限流 在高并发系统中&#xff0c;API接口的突发流量可能导致服务雪崩。传统的单机限流方案在分布式环境下存在局限&#xff0c;需要借助Redis等中间件实现集群级流量控制。 1.2 令牌桶算法优势 允许突发流量&#xff1a;稳定速…...

编程日记 2025/12/1 4:40:08

中间件--ClickHouse-1--基础介绍（列式存储，MPP架构，分布式计算，SQL支持，向量化执行，亿万级数据秒级查询）

1、概述 ClickHouse是一个用于联机分析(OLAP)的列式数据库管理系统(DBMS)。它由俄罗斯的互联网巨头Yandex为解决其内部数据分析需求而开发&#xff0c;并于2016年开源。专为大规模数据分析&#xff0c;实时数据分析和复杂查询设计&#xff0c;具有高性能、实时数据和可扩展性等…...

编程日记 2026/1/20 3:51:00

Java中的经典排序算法：插入排序、希尔排序、选择排序、堆排序与冒泡排序（如果想知道Java中有关插入排序、希尔排序、选择排序、堆排序与冒泡排序的知识点，那么只看这一篇就足够了！）

前言&#xff1a;排序算法是计算机科学中的基础问题之一&#xff0c;它在数据处理、搜索算法以及各种优化问题中占有重要地位&#xff0c;本文将详细介绍几种经典的排序算法&#xff1a;插入排序、选择排序、堆排序和冒泡排序。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解…...

编程日记 2026/1/19 23:39:18

K8S+Prometheus+Consul+alertWebhook实现全链路服务自动发现与监控、告警配置实战

系列文章目录 k8s服务注册到consul prometheus监控标签 文章目录 系列文章目录前言一、环境二、Prometheus部署1.下载2.部署3.验证 三、kube-prometheus添加自定义监控项1.准备yaml文件2.创建新的secret并应用到prometheus3.将yaml文件应用到集群4.重启prometheus-k8s pod5.访…...

编程日记 2026/1/20 3:55:40

uniapp-商城-25-顶部模块高度计算

计算高度&#xff1a; 使用computed进行顶部模块的计算。 总高度&#xff1a;bartotalHeight log 介绍--收款码这一条目 也就是上一章节的title的高度计算 bodybarheight。 在该组件中&#xff1a; js部分的代码&#xff1a; 包含了导出的名字&#xff1a; shop-head…...

编程日记 2026/1/15 2:25:59

Proxmox VE 网络配置命令大全

如果对 Proxmox VE 全栈管理感兴趣&#xff0c;可以关注“Proxmox VE 全栈管理”专栏&#xff0c;后续文章将围绕该体系&#xff0c;从多个维度深入展开。 概要&#xff1a;Proxmox VE 网络配置灵活&#xff0c;满足虚拟化组网需求。基础靠桥接实现虚拟机与物理网络互联&#x…...

编程日记 2025/12/5 4:44:53