C# webBrowser控件调用echart

C#调用Echart

Echart对于数据展示相当优美，前端调用很方便，对于古老的Winform如何调用呢？

下载Echart

Echart官网

下载后得到：echarts.js 和 echarts.min.js

html中引入：

 <!-- 引入 ECharts 文件 -->
 <script src="echarts.min.js"></script>

之后可以调用Echart使用，主要是对Echart的option设置。

Echart Option主要参数说明

参数	说明
title	标题
tooltip	根据鼠标移动提示所在点的相关数据
legend	图形样式
xAxis，yAxis	x、y轴刻度、命名等显示参数的设定
series	显示的线条类型、点的数据等

c# webBrowser调用

拖出一个webbrower控件，并设定：

//防止 WebBrowser 控件打开拖放到其上的文件。
  webBrowser1.AllowWebBrowserDrop = false
//防止 WebBrowser 控件在用户右击它时显示其快捷菜单.
  webBrowser1.IsWebBrowserContextMenuEnabled = false;
//以防止 WebBrowser 控件响应快捷键。
  webBrowser1.WebBrowserShortcutsEnabled = false;         
//以防止 WebBrowser 控件显示脚本代码问题的错误信息。  
  webBrowser1.ScriptErrorsSuppressed = true;
//传递参数到js
  webBrowser1.ObjectForScripting = this;

调用使用Echart写好的Html：

  string path = System.AppDomain.CurrentDomain.BaseDirectory + "line-sections.html";  //html路径
  this.webBrowser1.Url = new Uri(path);  //传入路径到webBrowser

c#传参到JS

以下实例为根据webBrowser1大小修改Echart的大小：

            string size_str = "[" + webBrowser1.Height.ToString() + "," +      webBrowser1.Width.ToString() + "]";
            HtmlDocument htmlDocument = webBrowser1.Document;
            object[] objArray = new object[] { size_str };
            htmlDocument.InvokeScript("setPosition", objArray);

JS中代码

 function setPosition(option) {
   var data_pri = eval(option);  //解析webBrowser1传入的数据
   var divMain = document.getElementById("main");  //获取html中id为main的echart控件
   divMain.style.height = data_pri[0] + "px";
   divMain.style.width = data_pri[1]+"px";
   window.onresize = myChart.resize(); //改变大小
  }

总结

使用echart进行数据的展示会给界面增色不少，可以尝试使用一下，调用也相对简单。

图片展示

注意：webBrowser默认内核采用IE7，当显示效果不佳时可以更改内核，具体操作更改代码如下, 亲测有效

   static 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>  
        /// <param name="browserVersion"></param>  
        /// <returns></returns>  
        static 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;
        }
  //调用
   SetWebBrowserFeatures(10);

DEMO获取

关注公众号发送echarts