WPF中使用Echarts显示图表

news/2024/9/18 23:20:22/ 标签: wpf, echarts, 前端

在WPF中使用ECharts来显示图表，你需要将ECharts嵌入到WPF应用程序中。我们这里介绍两种方法显示图表：

一、ECharts是一个基于JavaScript的开源可视化图表库，因此我们需要使用WebView控件来承载一个嵌入式浏览器，这样就可以在WPF应用程序中显示HTML和JavaScript内容。

1. 安装必要的库

2. 创建HTML文件并加载ECharts

HTML文件（chart.html）：

3. 在WPF中使用WebView2加载HTML

XAML部分

代码隐藏部分（MainWindow.xaml.cs）

4. 运行程序

5.注意事项

二、在 WPF 项目中引入 ECharts 的 .NET 封装库 ECharts.Net.Wpf后,在 WPF 页面的 XAML 中添加 ECharts 控件, WPF 页面的代码后台初始化 ECharts 控件并设置相关选项。

1.首先，通过 NuGet 安装 ECharts.Net.Wpf 包。

2.然后，在 XAML 中添加 ECharts 控件

3.在后台代码中设置 ECharts 的选项

一、ECharts是一个基于JavaScript的开源可视化图表库，因此我们需要使用WebView控件来承载一个嵌入式浏览器，这样就可以在WPF应用程序中显示HTML和JavaScript内容。

1. 安装必要的库

你可以使用WebView2控件，它是Microsoft Edge的嵌入式浏览器控件。WebView2是一个现代的浏览器控件，支持最新的Web标准和JavaScript。

首先，你需要在你的WPF项目中安装Microsoft.Web.WebView2。使用NuGet包管理器安装：

Install-Package Microsoft.Web.WebView2

2. 创建HTML文件并加载ECharts

接下来，我们创建一个HTML文件来加载ECharts库。可以直接在WPF应用程序中嵌入这个HTML文件或者加载外部HTML文件。

HTML文件（`chart.html`）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ECharts in WPF</title><!-- 引入ECharts库 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script><style>/* 设置图表的样式 */#chart-container {width: 100%;height: 100%;}</style>
</head>
<body><div id="chart-container"></div><script>// 基于准备好的DOM，初始化echarts实例var myChart = echarts.init(document.getElementById('chart-container'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 示例'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表myChart.setOption(option);</script>
</body>
</html>

3. 在WPF中使用WebView2加载HTML

在你的WPF项目中，使用WebView2控件加载并显示HTML文件。

XAML部分

在你的XAML文件中，添加WebView2控件：

<Window x:Class="EChartsInWPF.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"Title="ECharts in WPF" Height="450" Width="800"><Grid><WebView2 Name="webView" Source="chart.html"/></Grid>
</Window>

代码隐藏部分（`MainWindow.xaml.cs`）

在MainWindow.xaml.cs中，你需要初始化WebView2控件，并加载HTML文件。假设HTML文件位于应用程序的输出目录下。

using Microsoft.Web.WebView2.Core;
using System;
using System.IO;
using System.Windows;namespace EChartsInWPF
{public partial class MainWindow : Window{public MainWindow(){InitializeComponent();// 初始化WebView2InitializeWebView();}private async void InitializeWebView(){// 确保WebView2环境已初始化await webView.EnsureCoreWebView2Async();// 加载本地HTML文件string htmlFilePath = Path.Combine(Directory.GetCurrentDirectory(), "chart.html");webView.Source = new Uri(htmlFilePath);}}
}

4. 运行程序

确保你的chart.html文件位于项目的输出目录（通常是bin\Debug\net5.0-windows或bin\Debug\netcoreapp3.1等）下，然后运行程序。WebView2将加载HTML文件并显示ECharts图表。

5.注意事项

确保你已经安装了Microsoft Edge WebView2运行时，它是WebView2控件正常工作的前提。
如果要动态生成或更新图表数据，可以使用JavaScript交互来更新图表的数据和样式。
你可以通过在C#代码中向WebView2控件注入JavaScript来控制图表的更新和交互。

二、在 WPF 项目中引入 ECharts 的 .NET 封装库 `ECharts.Net.Wpf后,`在 WPF 页面的 XAML 中添加 ECharts 控件, WPF 页面的代码后台初始化 ECharts 控件并设置相关选项。

1.首先，通过 NuGet 安装 `ECharts.Net.Wpf` 包。

2.然后，在 XAML 中添加 ECharts 控件：

<Window x:Class="WpfEChartsExample.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:ec="clr-namespace:ECharts.Net.Wpf;assembly=ECharts.Net.Wpf"Title="MainWindow" Height="350" Width="525"><Grid><ec:ChartingArea x:Name="chart" Margin="10"/></Grid>
</Window>

3.在后台代码中设置 ECharts 的选项：

using System.Windows;
using ECharts.Net.Common;
using ECharts.Net.Common.Model;
using ECharts.Net.Wpf;namespace WpfEChartsExample
{public partial class MainWindow : Window{public MainWindow(){InitializeComponent();InitializeChart();}private void InitializeChart(){var option = new GlobalOptions{Title = new Title{Text = "ECharts in WPF Example"},Tooltip = new Tooltip{Trigger = TriggerType.Axis},XAxis = new XAxis{Data = new object[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" }},YAxis = new YAxis(),Series = new object[]{new Series{Name = "Sales",Type = SeriesType.Bar,Data = new object[] { 10, 52, 200, 334, 390, 330, 220 }}}};chart.SetGlobalOptions(option);}}
}

以上代码创建了一个基本的柱状图，展示了如何在 WPF 应用程序中集成 ECharts。记得需要先通过 NuGet 安装 ECharts.Net.Wpf 包。