在WPF程序当中，有多种场合使用图表工具，在.net4.0下有MSchart可供选择，但重绘困难，样式单一，而HTML大行其道的今天，有诸多的HTML开源图表可供选择，样式丰富，修改方便，调用简单。本文描述如何在WPF中使用Echarts。
一.下载ECharts
撰文时，ECharts的版本为2.2.7，下载链接如下：https://codeload.github.com/ecomfe/echarts/zip/2.2.7
二.在wpf中准备ECharts的使用环境
Echarts本质上是一个html5的文件，在wpf/winfrom程序中，可以使用webbrowser这个控件来加载本地的html文件。加载过程相对简单，可以参考：http://www.cnblogs.com/MaKui/archive/2011/08/02/2128842.html中第二点的描述，也可以选择使用webkit作为html的载体，下载地址：http://webkitdotnet.sourceforge.net/downloads.php。本文以webbrowser为例。
新建一个wpf工程文件，命名为：“EChartsDemo”，在设计界面添加如下代码：
<Grid> <WebBrowser Name="Web"> </WebBrowser> </Grid> 然后，就可以开始编辑我们需要的表格了，这里就拿官方的给的例子来做测试。三.使用ECharts
将下载下来的ECharts文件中的dist文件夹全部拷到Debug文件夹下，然后新建一个html文件，代码如下：
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="main" style="width:1900px;height:700px" /> <script src="echarts.js"></script> <script src="echarts-all.js"></script> <script> myChart = echarts.init(document.getElementById('main')); option = { title: { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, legend: { data: ['最高气温', '最低气温'] }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true, xAxis: [ { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] } ], yAxis: [ { type: 'value', axisLabel: { formatter: '{value} °C' } } ], series: [ { name: '最高气温', type: 'line', data: [11, 11, 15, 13, 12, 13, 10], markPoint: { data: [ { type: 'max', name: '最大值' }, { type: 'min', name: '最小值' } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] } }, { name: '最低气温', type: 'line', data: [1, -2, 2, 5, 3, 2, 0], markPoint: { data: [ { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] } } ] }; myChart.setOption(option); </script> </body> </html> 以上代码来自： http://echarts.baidu.com/echarts2/doc/example/line1.html ，如果觉得默认的主题样式不好看，还可以使用ECharts的主题来进行切换，使用主题的方法如下：下载需要的主题js文件，可以在 http://echarts.baidu.com/theme-builder/找到各个主题的下载链接，也允许使用者自行构建，以使用macarons为例，将下载好的macarons.js文件拷贝到dist文件夹下，在html文件中对其进行引用，然后就可以使用ECharts的初始化函数使用这个主题了，代码如下： <script src="macarons.js"></script> <script> myChart = echarts.init(document.getElementById('main'),'macarons');四.在WebBrowser中加载图表在MainWindow的构造函数中定义web需要加载的文件，代码如下：
Web.Navigate(new Uri( Directory.GetCurrentDirectory() + "/dist/LineChart.html")); 此时调试就可以看到运行效果了，这里会出现一个比较奇怪的提示，解决这个问题，需要在html中插入如下的注释代码：
<!-- saved from url=(0013)about:internet --> 再次运行即可显示在html中编辑的图表五.交互
完成显示步骤后，我们可以通过代码来对图表进行刷新、更改、清除等一系列操作。也可以在图表中触发事件向WPF发出消息。
5.1 C# to js
这一步骤非常简单，只需插入如下代码即可：
Web.InvokeScript("Type",0);//Type js中的函数名称，0代指传入的参数 其中Type是js中需要被使用的函数的名字，0是需要传入的参数，在Demo中借用Type函数控制图表的显示和消失，在界面中添加按钮用以向html发送消息，代码如下： <Button Name="load" HorizontalAlignment="Left" Content="卸载" Click="Button_Click" /><pre name="code" class="csharp">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调用方法： <button οnclick="click1()" style="width:100px;height:20px">测试</button> <script> function click1() { window.external.ShowMsg("这是一条信息"); } </script>即可实现js调用C#.Demo下载链接：Demo.rar
抛砖引玉，万望指正。
