WPF中使用Echarts显示图表

已于 2024-09-27 16:48:42 修改
阅读量1.3k 收藏 11
点赞数 10
分类专栏： C# WPF 文章标签： wpf echarts 前端
于 2024-08-28 09:03:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nndsb/article/details/141625327
版权
C# 同时被 2 个专栏收录
34 篇文章 0 订阅
订阅专栏
WPF
6 篇文章 0 订阅
订阅专栏

在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" xmlns:wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
          xmlns:ec="clr-namespace:ECharts.Net.Wpf;assembly=ECharts.Net.Wpf"
        mc:Ignorable="d"
        Title="ECharts in WPF" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <wpf:WebView2 Name="webView"  Margin="20" Width="auto" Height="500" /> 
           </StackPanel>
    </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()
        {
         // 1.html形式
          await webView.EnsureCoreWebView2Async(null);
         var htmlFilePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "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="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" xmlns:wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
          xmlns:ec="clr-namespace:ECharts.Net.Wpf;assembly=ECharts.Net.Wpf"
        mc:Ignorable="d"
        Title="ECharts in WPF" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <ec:EChartsView x:Name="chart" Margin="20"  Width="auto" Height="500"/>
        </StackPanel>
    </Grid>
</Window>

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


using ECharts.Net;
using Microsoft.Web.WebView2;
using System;
using System.IO;
using System.Windows;
using ECharts.Net.Wpf; 


namespace EChartsInWPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            InitializeWebView(); 
        }

        private async void InitializeWebView()
        { 

            // 2.后台写options的形式
            var option = new Option
            {
                Title = new Title
                {
                    Text = "ECharts 示例"
                },
                Tooltip = new Tooltip
                {
                    Trigger = TooltipTrigger.Axis
                },
                XAxis = new XAxis
                {
                    Data = new List<string>() { "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋","袜子" }
                },
                YAxis = new YAxis(),
                Series = new List<Series>()
                {
                    new Series
                    {
                        Name = "品类",
                        Type = SeriesType.Bar,
                        Data = new object[] { 10, 52, 200, 334, 390, 330, 220 }
                    }
                }
            }; 
            chart.ChartOption = option;

        }

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

demo下载：wpf-echartsdemo

战族狼魂
关注
专栏目录
WPF+Webbrowser+Echarts 绘制波形图
07-13
WPF+Webbrowser+Echarts+Naduio音频转换像素点位，像素点位转时间x与y关系点位，实现动态时间波形图，时间精确到毫秒。附原始MP3文件转wav文件，项目可直接运行
C# ECHART WPF 开发，非常漂亮的demo
11-07
ECHART C# WPF,
演示：基于WPF的DrawingVisual开发的Chart图表和表格绘制
最新发布
HeBianGu的博客
09-21 1695
VS2022,NET7 模拟钻井流体和流速 System.Windows.Controls 命名空间 | Microsoft Learn控件库 - WPF .NET Framework | Microsoft LearnWPF 介绍 | Microsoft LearnXAML概述 - WPF .NET | Microsoft LearnWindows Presentation Foundation 简介 - WPF .NET | Microsoft Learn使用 Visual
WPF编程，WPF项目中使用Echart控件画图的使用方法
君一席
07-05 4037
Echarts官网 Echarts js文件下载 注意： ** 源码是不能直接调用的，需要下载编译后的dist文件夹下的echarts.js文件。通过查看文件可以看出，源码echarts.js里面调用很多别的文件，各种import。而编译好的里面都是各种function的定义。 ** 具体使用参考地址：wpf入门第五篇 WPF with ECharts 1、创建WPF项目 2、将下载好的编译后的JS文件增加到项目中 将文件放在项目所在文件夹 选择最上面显示所有文件按钮 右击JS文件， 包括在项目
wpf入门第五篇 WPF with ECharts
君子居易
04-08 680
前言 本文是wpf入门系列第五篇，面向有winform或者web前端基础的、并且也有C#基础的同学。 ECharts是百度团队开发的开源免费的js图表控件库，非常强大，文档齐全。WPF中使用图表，除了可以选择devexpress或者oxyplot之类的专为wpf开发的图表控件之外，还可以考虑使用 WebBrowser+ECharts 来完成复杂的图表展示，其展示效果不亚于前者。 本文介绍了 WPF...
WPF调用Echart，通过JS与WPF数据交换
04-25
WPF调用Echart，通过JS与WPF数据交换，传递JSON进行数据显示
WPF 与echarts绘图控件数据交互
EvenNiu的博客
07-05 1905
在wpf开发的项目中使用echart绘图，实现wpf与echart的交互操作
WPF使用ECharts做曲线图实例
weixin_45742249的博客
06-07 1190
首先说我这里是因为实际工作时需要用到了所以进行了学习使用，本人所在公司就我一人独苗连个交流讨论的人都没得，自己边学先做。要求是做一个多曲线图组合数据展示折线图：这个就是需求，需要照着这个样子做出来，也使用其它技术做过但是没有实现最后换成了echarts。
wpf入门第五篇 WPF with ECharts 示例项目源码
04-03
wpf入门第五篇 WPF with ECharts 示例项目源码，详细介绍可以查看博客 ： https://blog.csdn.net/wf824284257/article/details/89002133
WPF嵌套百度EChart
06-20
WPF可以嵌套HTML页面，使用百度EChart JavaScript库显示图表，简单、方便、免费、功能强大，不需要购买收费WPF控件。
WPF_Echarts.zip
07-05
在WPF中使用ECHART控件，并实现C#与JS的互相调用。此资源中包含了编译后的Echarts.js文件和可运行的exe程序。是一个比较简单的事例。下载运行时，注意.net版本。
WPFchartsDemo
03-12
wpf 图表插件 将微软的WpfToolkit中的Charts库升级到了.NET4.5，对命名空间进行了替换调整，同时增加了StepLineChart，对库做了小幅的修改：可以显示和掩藏Legend,可以横排和竖排Legend，可显示和隐藏标题，在只有一个Series的情况下，可以像WPFVisifire一样，每个柱状图可显示不同的颜色
WPF 数据可视化 大屏展示 实现地图仿echarts模拟迁移效果 Telerik图表 仪表盘
04-03
分数已被csdn修改，我也无法修改分数，过高无法下载请联系我，我下载发给你，抱歉 WPF 数据可视化 大屏展示 实现地图仿echarts模拟迁移效果 Telerik图表 仪表盘 效果图https://blog.csdn.net/shishuwei111/article/details/79486365#comments
Wpf嵌入Echart控件，在MVVM模式下使用
m0_48144113的博客
09-29 861
Wpf嵌入Echart控件，在MVVM模式下使用
C# 在WPF 嵌入 百度ECharts --- 随手笔记
小姐姐
06-29 6075
在网上下载echarts插件 和你想要的样式 1、在html页面添加 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> ...
WPF与echarts联动
Tony_Starky的博客
05-05 1197
echarts可以制作精美的数据图表，但是在官网他所使用的语言是JavaScript，所以在转为html的过程当中还需要操作一下。 首先在项目里创建一个html的文件（我的visualstudio不可以直接创建，所以我创建了个txt格式的文本，转成了html文件）！！！！！！！！！！！注意注意！！！！！html的文件属性----高级属性----复制到输出目录---一定选择始终复制！！！！！ 新的html文件应 <!DOCTYPE html> <html> <!-- s
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

战族狼魂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值