WPF+ webbrowser+Echarts

一.下载ECharts

ECharts的版本为2.2.7，下载链接如下：https://codeload.github.com/ecomfe/echarts/zip/2.2.7

二.准备ECharts的使用环境

可使用webbrowser这个控件来加载本地的html文件，参考：http://www.cnblogs.com/MaKui/archive/2011/08/02/2128842.html。也可使用webkit作为html的载体，下载地址：http://webkitdotnet.sourceforge.net/downloads.php。

此处只针对webbrowser描述：

三.开始实现

1、新建一个wpf工程文件，命名为：“EChartsDemo”，在设计界面添加如下代码：

2、创建Echarts项目，并将其复制到bin目录下面。（具体详情见源码）

四.在WebBrowser中加载图表

五.交互

完成显示步骤后，我们可以通过代码来对图表进行刷新、更改、清除等一系列操作。也可以在图表中触发事件向WPF发出消息。

5.1 C# to js

这一步骤非常简单，只需插入如下代码即可：

Web.InvokeScript("Type",0);//Type js中的函数名称，0代指传入的参数

其中Type是js中需要被使用的函数的名字，0是需要传入的参数，在Demo中借用Type函数控制图表的显示和消失，在界面中添加按钮用以向html发送消息，代码如下：

   

private void Button_Click(object sender, RoutedEventArgs e)
             {           
                 if (load.Content.ToString() == "加载")
                 {
                     Web.InvokeScript("Type", 1);
                     load.Content = "卸载";
                 }
                 else
                 {
                     Web.InvokeScript("Type",0);
                     load.Content = "加载";
                 }            
             }
 
  
即可实现对html的控制，当然在实际应用中需要控制的参数较多，就需要仔细设计操作了。
 
  
5.2 js to C#
 
  
js由于是托管代码，调用C#需要足够的权限，所以在项目中添加一个新类，代码如下：
 
  
    [PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
         [System.Runtime.InteropServices.ComVisible(true)]//给予权限并设置可见
         public class WebAdapter
         {
             public void ShowMsg(string Msg)
             {
                 Console.WriteLine(Msg);            
             }
         }
 
  
js调用方法：
 
  
    

测试
           

五.结束

源码地址：

链接：https://pan.baidu.com/s/1m6UZ3Qcsi31aNCz6eMaxvw
提取码：i2wx