C#WinForm应用程序中嵌入ECharts图表

程序运行效果：

下载ECharts：

官网下载ECharts ：http://echarts.baidu.com/download.html

或者直接在这里下载：源码版echarts.js  、完整版 echarts.min.js   下载地址

引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <!-- 引入 ECharts 文件 -->

     <script src="echarts.min.js"></script>

 </head>

 </html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

 <body>

     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

     <div id="main" style="width: 600px;height:400px;"></div>

 </body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>ECharts</title>

     <!-- 引入 echarts.js -->

     <script src="echarts.js"></script>

 </head>

 <body>

     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

     <div id="main" style="width: 600px;height:400px;"></div>

     <script type="text/javascript">

         // 基于准备好的dom，初始化echarts实例

         var myChart = echarts.init(document.getElementById('main'));

         // 指定图表的配置项和数据

         var option = {

             title: {

                 text: 'ECharts 入门示例'

             },

             tooltip: {},

             legend: {

                 data:['销量']

             },

             xAxis: {

                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

             },

             yAxis: {},

             series: [{

                 name: '销量',

                 type: 'bar',

                 data: [5, 20, 36, 10, 10, 20]

             }]

         };

         // 使用刚指定的配置项和数据显示图表。

         myChart.setOption(option);

     </script>

 </body>

 </html>

建立WinForm工程项目添加WebBrowser控件并设置属性，再添加一些必要按钮等控件如下图所示

WebBrowser控件属性设置

   //防止 WebBrowser 控件打开拖放到其上的文件。

             webBrowser1.AllowWebBrowserDrop = false;

             //防止 WebBrowser 控件在用户右击它时显示其快捷菜单.

             webBrowser1.IsWebBrowserContextMenuEnabled = false;

             //以防止 WebBrowser 控件响应快捷键。

             webBrowser1.WebBrowserShortcutsEnabled = false;

             //以防止 WebBrowser 控件显示脚本代码问题的错误信息。

             webBrowser1.ScriptErrorsSuppressed = true;

             //（这个属性比较重要，可以通过这个属性，把WINFROM中的变量，传递到JS中，供内嵌的网页使用；但设置到的类型必须是COM可见的，所以要设置     [System.Runtime.InteropServices.ComVisibleAttribute(true)]，因为我的值设置为this,所以这个特性要加载窗体类上）

             webBrowser1.ObjectForScripting = this;

将设计好的图表加载到WebBrowser控件

  this.webBrowser1.Url = new Uri(str + "\\"+comboBox1.Text.Trim());

加载列表

         private void button1_Click(object sender, EventArgs e)

         {

             comboBox1.Items.Clear();

             this.getAllHtmlFile();

         }
  /// <summary>

         /// 获取html文件

         /// </summary>

         private void getAllHtmlFile()

         {

             //获取指定文件夹的所有文件

             string[] paths = Directory.GetFiles(str);

             foreach (var item in paths)

             {

                 //获取文件后缀名

                 string extension = Path.GetExtension(item).ToLower();

                 if (extension == ".html")

                 {

                     comboBox1.Items.Add(Path.GetFileName(item));

                 }

             }

             if (comboBox1.Items.Count > )

             {

                 comboBox1.SelectedIndex = ;

                 this.webBrowser1.Url = new Uri(str + "\\" + comboBox1.Text.Trim());

             }

         }

刷新程序

         /// <summary>

         /// 刷新

         /// </summary>

         /// <param name="sender"></param>

         /// <param name="e"></param>

         private void button2_Click(object sender, EventArgs e)

         {

             this.webBrowser1.Refresh();

         }

运行程序

这里来自官方的例子多添加了几个可以参考，如下所示

index2.html

index3.html

index4.html

index5.html

index6.html

index7.html

源码工程文件下载 WinformInsertEChartsDemo.zip

C#WinForm应用程序中嵌入ECharts图表的更多相关文章

  1. 在WinForm应用程序中嵌入WPF控件

    我们知道,在WPF界面上添加WinForm的控件需要使用WindowsFormHost类.而在WinForm界面上添加WPF控件该如何做呢?有没有类似的类呢?明显是有的,ElementHost就是为了 ...

  2. 使用CefSharp在.Net程序中嵌入Chrome浏览器（一）——简介

    有的时候,我们需要在程序中嵌入Web浏览器,其实.Net Framework中本身就提供了WebBrowser控件,本身这个是最简单易用的方案,但不知道是什么原因,这个控件在浏览网页的时候有些莫名的卡 ...

  3. 在WinForm应用程序中快速实现多语言的处理

    在国际化环境下,越来越多的程序需要做多语言版本,以适应各种业务需求的变化.在Winform应用程序中实现多语言也有常规的处理方式处理,不过需要针对每个语言版本,重新修改Winform界面的显示,对一些 ...

  4. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  5. 在WinForm应用程序中快速实现多语言的处理(2)--开发框架模块的整合

    我在上篇随笔<在WinForm应用程序中快速实现多语言的处理>里面介绍了Winform开发中多语言的处理解决方案,整个多语言解决方案是以实际需求为驱动,以减少代码改动,高效处理为目的,通过 ...

  6. WinForm应用程序中实现自动更新功能

    WinForm应用程序中实现自动更新功能 编写人:左丘文 2015-4-20 近来在给一客户实施ECM系统,但他们使用功能并不是我们ECM制造版提供的标准功能,他们要求对系统作一些定制功能,为了避免因 ...

  7. 使用CefSharp在.Net程序中嵌入Chrome浏览器（二）——参数设置

    在实现了.Net程序中嵌入Chrome浏览器后,下一步的个性化操作就是加入一些设置了,在前面的文章中,我们可以看到在使用Chrome控件前,有如下一个操作: var setting = new Cef ...

  8. 安卓WebView的使用，在应用程序中嵌入一个浏览器，轻松地展示各种各样的网页

    WebView 在应用程序中嵌入一个浏览器,轻松地展示各种各样的网页. 1.定义一个WebView位置 <?xml version="1.0" encoding=" ...

  9. 微信小程序中使用ECharts 异步加载数据 实现图表

    <!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="my ...

随机推荐

  1. extern字符串常量，宏定义字符串常量，怎么选

    在使用常量的时候,我看到主要有两种写法: #define RKLICURegexEnumerationOptionsErrorKey @"RKLICURegexEnumerationOpti ...

  2. [CGAL]带岛多边形三角化

    CGAL带岛多边形三角化,并输出(*.ply)格式的模型 模型输出的关键是节点和索引 #include <CGAL/Triangulation_vertex_base_with_id_2.h&g ...

  3. html5调用手机陀螺仪实现方向辨识

    获取移动设备的陀螺仪,需要知道陀螺仪包含什么. 我们可以让document监听deviceorientation 来获取相关的数据,里面包括3个值 alpha.beta和gamma. 这三个值分别代表 ...

  4. 微信小程序无法获取UnionId的情况及处理

    问题背景:做了微信小程序,一切都还正常,但是最后体验版放出去时,却发现很多用户无法绑定用户,后台返回:参数非法.经过多方排查,发现是微信拿到的code请求返回的数据里没有UnionId,也就是接口返回 ...

  5. NModbus类库使用

    通过串口进行通信 : 1.将 NMobus 类库导入工程中,添加引用.命名空间.工程属性必须配置 为 .NET 4.0. 2.创建 SerialPort 类的一个实例,配置参数,打开串口,如: pub ...

  6. Visual Studio 打开程序提示仅我的代码怎么办

    工具-->选项--->调试---->常规-->禁用"启动仅我的代码"

  7. C#访问MySQL数据库的方法

    C#访问MySQL数据库的方法 (1)首先需要下载C#访问MySQL数据库的ADO.NET驱动程序 下载地址为: http://dev.mysql.com/downloads/connector/ne ...

  8. aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

    中国的IT 需要无私分享和贡献的人,一起努力 本篇博客来自地址:http://www.cnblogs.com/AaronYang/p/3673933.html,请支持原创,未经允许不许转载 一.第一步 ...

  9. Effective Java 第三版——51. 仔细设计方法签名

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  10. bindpose定义

    根据常识,有: 但根据骨骼动画的定义,又有: 对比两式,可得bindpose的定义: 即骨骼bone的bindpose是:在绑定时刻,将顶点由mesh的局部空间变换到bone的局部空间的变换.