在WPF中使用ECharts来显示图表，你需要将ECharts嵌入到WPF应用程序中。我们这里介绍两种方法显示图表：
目录
一、ECharts是一个基于JavaScript的开源可视化图表库，因此我们需要使用WebView控件来承载一个嵌入式浏览器，这样就可以在WPF应用程序中显示HTML和JavaScript内容。
1.首先，通过 NuGet 安装 ECharts.Net.Wpf 包。
一、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();
// 初始化WebView2
InitializeWebView();
}
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 包。
