C#上使用Echarts做报表

C#上使用Echarts做报表

.cs[设计]文件拖入控件

使用C#自带的内置网页控件 WebBrowser

在.cs文件中,对该内置页面进行属性设置

//设置Com对外可访问     (在 .cs 文件中进行修改)
    [System.Runtime.InteropServices.ComVisible(true)]  //放在命名空间和类的中间(与class 同等级)

internal 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>  
        internal 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;
        }






///在构造器中对相应属性进行设置(你这个放到构造器里面啊,别无脑抄,毕竟我不知道你页面啥名字,还有URL写你HTML文件放的位置)****************
 				//设置webBrowser
                wb1.AllowWebBrowserDrop = false;
                //防止 WebBrowser 控件在用户右击它时显示其快捷菜单。
                wb1.IsWebBrowserContextMenuEnabled = false;
                //以防止 WebBrowser 控件响应快捷键。
                wb1.WebBrowserShortcutsEnabled = true;
                //以防止 WebBrowser 控件显示脚本代码问题的错误信息。    
                wb1.ScriptErrorsSuppressed = true;
                //这个属性比较重要，可以通过这个属性，把WINFROM中的变量，传递到JS中，供内嵌的网页使用。
                wb1.ObjectForScripting = this;
                //URL写你HTML文件放的位置(这只是示例)
                wb1.Url = new Uri(Application.StartupPath + "\\" + this.Name + ".html");




///从后台调取数据传JSON数据

 private void Wb1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
        {
            status = "INIT";
            String time = date ;
            String time2="";
             //这个 myPicInit  是我自己写的方法,没贴出来,看看即可
            Object[] jsonObject = myPicInit(time,time2); 
            //js传值
            wb1.Document.InvokeScript("getData", jsonObject); //getdata 对应HTML文件中的function   数据格式为 JSON  (JSON根据需要自己拼就可以了)
            //this.ss1.Visible = true;
        }

接下来是HTML文件的一些配置(其实这部分可以看ECharts官网了)

<script type="text/javascript">		
		    var mon = '';
		    var yy1 = '';
		    var yy2 = '';
		    //这个就是.cs文件中提到的传JSON值   上文中jsonObject返回值为 (jsonStr1, jsonStr2, jsonStr3, date, year, year2 )  的形式
		    function getData(jsonStr1, jsonStr2, jsonStr3, date, year, year2 ) {
		        mon = date;
		        yy1 = year;
		        yy2 = year2;
		    var json1 = eval('(' + jsonStr1 + ')');//echarts的初始化方法
	
		    initPic1(json1);

		 
		}

function initPic1(json1) {
			// 基于准备好的dom，初始化echarts图表
			var dom = document.getElementById("m1");
			var myChart = echarts.init(dom); 			
			var option = {
			****************这个就看Echart的官网吧**********
			}
			}
</script >



<body style="height: 100%; margin: 0">
		<div id="m1" style="height: 50%;width: 50%;float: left"></div>
</body>