winform+webBrowser+Echarts

最新推荐文章于 2024-08-23 15:40:32 发布
最新推荐文章于 2024-08-23 15:40:32 发布
阅读量1.5k 收藏 17
点赞数 5
分类专栏： winform echarts 文章标签： winform webbrowser echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccsandjm/article/details/111773208
版权

winform+webBrowser+Echarts+JavaScript（多图表一个Echarts）

最近安排做一个winform客户端项目，现在就webBrowser和Echarts做一些知识点的总结

需求：连续不断加载PLC传入的数据，在ｗｉｎｆｏｒｍ界面显示，用echarts图表展示出来

步骤

1、一个form,一个panel,拖入webBrowser,注意命名规范
2、Html加载进webBrowser,显示echarts图表

（1）
在这里插入图片描述

最好在本项目下的bin目录下创建一个showEchart文件夹，大家可以在string midcharts 打断点，看这个 System.Environment.CurrentDirectory 显示什么路径，其实就是获取当前项目可执行文件的路径

（2）

在这里插入图片描述

wb_fullchart是webBrowser的name,fullchart是文件路径，放在frame_Load方法里面，启动就能加载；这样就可以显示Echarts内容了

3、可能遇到的问题
（1）浏览器兼容问题

1.1html 里面的js添加这行代码

window.console = window.console || (function () {

var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile

= c.clear = c.exception = c.trace = c.assert = function () { };

return c;

})();

1.2 可以写浏览器兼容工具类，可以在frame控制里面写,然后在frame.cs调用SetWebBrowserFeatures(1100)；变成内核为iE11就好了，如果是工具类注意新建对象调用；

    public void SetWebBrowserFeatures(int ieVersion)
        {
            // don't change the registry if running in-proc inside Visual Studio  
            if (LicenseManager.UsageMode != LicenseUsageMode.Runtime)
                return;
            //获取程序及名称  
            var appName = System.IO.Path.GetFileName(System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName);
            //得到浏览器的模式的值  
            UInt32 ieMode = GeoEmulationModee(ieVersion);
            var featureControlRegKey = @"HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\";
            //设置浏览器对应用程序（appName）以什么模式（ieMode）运行  
            Registry.SetValue(featureControlRegKey + "FEATURE_BROWSER_EMULATION",
                appName, ieMode, RegistryValueKind.DWord);
            // enable the features which are "On" for the full Internet Explorer browser  
            //不晓得设置有什么用  
            Registry.SetValue(featureControlRegKey + "FEATURE_ENABLE_CLIPCHILDREN_OPTIMIZATION",
                appName, 1, RegistryValueKind.DWord);

} 
    /// <summary>  
    /// 获取浏览器的版本  
    /// </summary>  
    /// <returns></returns>  
    public int GetBrowserVersion()
    {
        int browserVersion = 0;
        using (var ieKey = Registry.LocalMachine.OpenSubKey(@"SOFTWARE\Microsoft\Internet Explorer",
            RegistryKeyPermissionCheck.ReadSubTree,
            System.Security.AccessControl.RegistryRights.QueryValues))
        {
            var version = ieKey.GetValue("svcVersion");
            if (null == version)
            {
                version = ieKey.GetValue("Version");
                if (null == version)
                    throw new ApplicationException("Microsoft Internet Explorer is required!");
            }
            int.TryParse(version.ToString().Split('.')[0], out browserVersion);
        }
        //如果小于7  
        if (browserVersion < 10)
        {
            throw new ApplicationException("no support ie");
        }
        return browserVersion;
    }
    /// <summary>  
    /// 通过版本得到浏览器模式的值  
    /// </summary>  
    /// <param name="browserVersion"></param>  
    /// <returns></returns>  
    public UInt32 GeoEmulationModee(int browserVersion)
    {
        UInt32 mode = 11000; // Internet Explorer 11. Webpages containing standards-based !DOCTYPE directives are displayed in IE11 Standards mode.   
        switch (browserVersion)
        {
            case 7:
                mode = 7000; // Webpages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode.   
                break;
            case 8:
                mode = 8000; // Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode.   
                break;
            case 9:
                mode = 9000; // Internet Explorer 9. Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode.                      
                break;
            case 10:
                mode = 10000; // Internet Explorer 10.  
                break;
            case 11:
                mode = 11000; // Internet Explorer 11  
                break;
        }
        return mode;
    }
（2）webBrowser 显示不全

我们要把WebBrowser当成是html对象，用css 去掉边框，自己想自己改变背景颜色自己试一下

<style type="text/css">
        html {border:0px; overflow:hidden;background-color: black;}
    </style>
（3）多个图表在在一个echarts页面（四个图表一个Echarts）
xAxis: [{
            gridIndex :0,//这个索引是很关键的，每一个xAxis 的gridIndex代表这个你画的第一个图的X轴配置，同样对应yAxis的gridIndex
            axisLabel:{   
                show:false,
                textStyle:{
                    color:'#FFFFFF'
                },
                interval:0
            },
            axisLine: {
               
                lineStyle: {
                    color:'#F0FFFF'
                }
            }, 
            
            type: 'category',
            
            data: date
        },{
            
            gridIndex :1,//
            axisLabel:{ 
                show:false,
                textStyle:{
                    color:'#FFFFFF'
                },
                interval:0
            },
            axisLine: {
                lineStyle: {
                    color:'#0B438B'
                }
            },
            type: 'category',
            
            data: date
        },{
            
            gridIndex :2,
            axisLabel:{ 
                show:false,
                textStyle:{
                    color:'#FFFFFF'
                },
                interval:0
            },
            axisLine: {
                lineStyle: {
                    color:'#0B438B'
                }
            },
            type: 'category',
            
            data: date
        },{
            gridIndex :3,
            axisLabel:{ 
                show:true,
                textStyle:{
                    color:'#FFFFFF'
                },
                interval:0
            },
            axisLine: {
                lineStyle: {
                    color:'#0B438B'
                }
            },
            type: 'category',
            
            data: date
        },
    ],
        yAxis: [{
            gridIndex:0,
            minInterval:1,  // y轴的间隔
            splitLine:{
                show:false
            },
            axisLine: {
                lineStyle: {
                    color:'#0B438B'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#FFFFFF'
                }
            },
            boundaryGap: [0, '10%'],
            type: 'value'
        },{
            gridIndex:1,
            minInterval:1,
            splitLine:{
                show:true
            },
            axisLine: {
                lineStyle: {
                    color:'#0B438B'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#FFFFFF'
                }
            },
            boundaryGap: [0, '10%'],
            type: 'value'
        },{
            gridIndex:2,
            minInterval:1,
            splitLine:{
                show:true
            },
            axisLine: {
                lineStyle: {
                    color:'#0B438B'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#FFFFFF'
                }
            },
            boundaryGap: [0, '10%'],
            type: 'value'
        },{
            gridIndex:3,
            minInterval:1,
            splitLine:{
                show:true
            },
            axisLine: {
                lineStyle: {
                    color:'#0B438B'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#FFFFFF'
                }
            },
            boundaryGap: [0, '10%'],
            type: 'value'
        }
    
    ],
            
        grid:[{   //grid 是四块区域的边框间距
						top:'5%',
						left: '3%',
						right: '5%',
						bottom: '76%'
					}, {
						top: '26%',
						left: '3%',
						right: '5%',
						bottom: '52%'
					},{
						top: '50%',
						left: '3%',
						right: '5%',
						bottom: '26%'
					},
					{
						top: '76%',
						left: '3%',
						right: '5%',
						bottom: '5%'
					}],
        series: [
            {
                barWidth:'50%',//柱状图的宽度
                color: '#F0FFFF',
                type:'bar',
                data:data_Ly,
                xAxisIndex: 0,  //四个图表的X，Y要对应上序号
				yAxisIndex: 0
            },
            {
                barWidth:'50%',
                color: '#DC143C',
                type:'bar',
                data:data_ay,
                xAxisIndex: 1,
				yAxisIndex: 1
            },
            {
                barWidth:'50%',
                color: '#FFFF00',
                type:'bar',
                data:data_by,
                xAxisIndex: 2,
				yAxisIndex: 2
            },
            {
                barWidth:'50%',
                color: '#00FA9A',
                type:'bar',
                data:data_Ey,
                xAxisIndex: 3,
				yAxisIndex: 3
            },
            
        ]
    };

在这里插入图片描述

总结：至此，前台基本上满足需求，后面webBrowser通过控制传数据，另写一篇

CS&Chan
关注
专栏目录
ECharts 在winform中使用(访问JS)
08-31
ECharts 在winform中使用(访问JS)
winform实现Echart统计图（基于webBrowser）
u014712365的博客
10-05 570
【实例简介】动态绑定数据 【实例截图】 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using System.Linq; using System.Text...
记录｜C# winform——Chart控件
最新发布
技术小白=-=的博客
08-23 1269
零基础C#教程037期 winform大数据Chart图形开发技巧。
使用webbrowser控件展示echarts的三维图像
u010898567的博客
09-17 680
1.webbrowser控件导航到目标文件 string dataDir = Path.GetFullPath(@"..//.."); //取得当前程序的上上级目录 webBrowser1.Navigate(dataDir + @"\asset\p1.html"); 注意指示托管类型对 COM 可见 [System.Runtime.InteropServices.ComVisible(true)] public partial class Form1 : Form { } 2.p1.
winform实现Echart统计图（基于webBrowser）.rar
12-12
动态绑定数据
Winform程序中嵌入Echarts
qq_40994326的博客
07-18 3608
Echarts Winform程序中嵌入Echarts 原文链接：https://jingyan.baidu.com/article/eb9f7b6d5a0395869364e829.html 公司项目需要用Winform程序来做一个店铺经营看板,因此希望能在winform程序内生成相应的图表。 于是找到了这篇文章，在这里备忘一下。 首先设置WebBrowser控件的几个属性： chartBrow...
winform实现Echart统计图（基于webBrowser）.zip
12-12
本项目“winform实现Echart统计图（基于webBrowser）”的核心目标就是教你如何在Winform应用中利用ECharts创建动态、交互式的统计图表。以下是具体步骤和知识点： 1. **WebBrowser控件**：首先，你需要在Winform...
winform与内嵌echarts的数据交互，让数据动起来.rar
12-12
之前下载了winform实现Echart统计图（基于webBrowser）有了echart在winform的应用。但发现他实际上是静态页面的，统计图未有数据交互功能。本例主要通过C#winform给echart赋值，实现数据动态交互。
EChartsNet-master_C#_C#winform_echarts_
10-03
在Winform和WPF应用中，EChartsNet通常通过WebBrowser控件来实现ECharts的渲染。WebBrowser控件允许.NET应用内嵌一个HTML渲染引擎，这样ECharts的JavaScript代码就可以在Windows应用内部运行，生成图表。EChartsNet...
通过WebBrowser使用Echats
u014712365的博客
10-09 155
后端使用webBrowser，前端利用window.external调用后端写好的方法有很多人已解答了，这里就不说了。。这里主要说怎么让Echarts从后端数据库取到值并绑定在data上(在这之前需要先将eharts的包引入) C#后台代码： /*在后台写一个输出要要绑定数据的方法，输出的是字符串*/ public string GetData() { ...
Winform调用Echart，实现曲线分段变色功能
a5pansq的博客
05-16 2155
首先找到Echart曲线分段变色的官方demo Echart官方demo 实现效果如下： 然后在VS中添加form窗体，插入webrowser控件 在bin-debug中添加上述网站编写的HTML文件和网上下载的两个JS文件 ...
WinformECharts.zip
08-28
1. 环境： Win10 x64, VS2015, C#,ECharts 2. 内容： 通过 WebBrowser控件 加载 ECharts ，实现大数据量时X轴方向拖动
winform与内嵌echarts的数据交互，让数据动起来.zip
12-12
winform与内嵌echarts的数据交互，让数据动起来.zip
Winform桌面程序嵌入echarts图表，程序使用C#和JS完成，内容涉及到嵌入CefSharp第三方浏览器控件
2301_78004637的博客
05-06 561
Winform桌面程序嵌入echarts图表，程序使用C#和JS完成，内容涉及到嵌入CefSharp第三方浏览器控件，并在该浏览器中加载echarts图表，（VS自带浏览器控件不支持H5特性），界面展示完美地把echarts图表嵌入桌面程序中，并能实现JS和C#的方法相互调用。本程序是一个源码项目，创建于VS2019，基于.NET Framework4.7.2版本，买家注意要保持一致。本项目高达百MB，并不是我写了多少代码，而是CefSharp浏览器控件有这么大。
C#WinForm应用程序中嵌入ECharts图表
weixin_30657541的博客
04-03 2427
C#WinForm应用程序中嵌入ECharts图表 程序运行效果： 下载ECharts： 官网下载ECharts ：http://echarts.baidu.com/download.html 或者直接在这里下载：源码版echarts.js 、完整版 echarts.min.js 下载地址 引入 ECharts ECharts 3 开始不再强制使用 AMD 的方式按需引入，代...
C#中使用ECharts——Winform程序静态页面
有问题请发邮箱dengyifanlittle@163.com进行讨论
10-19 7898
ECharts不做过多介绍，只需要知道其是一个特别好用的数据处理的图形界面的js就行。 这里讲一下在C#中使用ECharts的方法，首先建立一个Winform程序，在窗口中添加一个WebBrowser控件，此控件主要用来加载后期的html文件。界面如下： 接着导入需要的第三方插件，即ECharts，通过NuGet查找，之后安装到项目中，也可以...
C# webBrowser控件调用echart
静默与黑白的博客
06-07 2624
C#调用Echart Echart对于数据展示相当优美，前端调用很方便，对于古老的Winform如何调用呢？ 下载Echart Echart官网 下载后得到：echarts.js 和 echarts.min.js html中引入： <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> 之后可以调用Echart使用，主要是对Echart的option设置。 Echart Option主要参数说明
winform+internal
12-09
WinForms 是一个用于创建 Windows 桌面应用程序的 Microsoft .NET 框架。它提供了一组用于创建用户界面的类和控件，使开发人员可以轻松地创建 Windows 应用程序。而 internal 是 C# 中的一种访问修饰符，它表示只有在同一程序集中的代码才能访问该成员。因此，WinForms + internal 可以理解为在同一程序集中使用 WinForms 创建 Windows 应用程序。 使用 internal 访问修饰符可以帮助我们实现更好的封装性和安全性，因为只有在同一程序集中的代码才能访问该成员，从而避免了其他程序集中的代码对该成员的访问。同时，使用 WinForms 可以快速创建 Windows 应用程序，并且提供了丰富的控件和类库，使得开发人员可以轻松地创建出美观、易用的应用程序。 如果您有任何关于 WinForms + internal 的问题，请随时提出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值