.NET WinForms（C#）中使用Echarts绘制图表

疯狂之SSR

已于 2024-01-16 16:41:37 修改

阅读量3.4k

点赞数 5

文章标签： .net c# 开发语言

于 2023-06-25 10:56:52 首次发布

本文链接：https://blog.csdn.net/weixin_44453199/article/details/131191375

版权

.NET WinForms（C#）中使用Echarts绘制图表

Chromium Embedded Framework (CEF)是个基于Google Chromium项目的开源Web browser控件，支持Windows, Linux, Mac平台。除了提供C/C++接口外，也有其他语言的移植版。因为基于Chromium，所以CEF支持Webkit & Chrome中实现的HTML5的特性，并且在性能上面，也比较接近Chrome。CEF还提供的如下特性：自定义插件、自定义协议、自定义JavaScript对象和扩展；可控制的resource loading, navigation, context menus等等。

CefSharp中的Sharp说明它是用于C#的，它可以在WPF或Winforms中使用，增加一个类似WebBrowser但是基于谷歌浏览器内核的容器显示HTML内容。Winforms自带的WebBrowser控件是基于IE，实际使用中常常遇到页面布局问题（并且发现.NET WinForms中也没有了，可能也仅限于 .NET Framework WinForms）。其他类似的还有CefGlue。

引用

.NET WinForms使用这个包
VS自带的Nugget包里直接安装使用。如果项目基于.NET Framework应该使用图中第一个包。

ECharts

介绍

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、Treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

总之，就是一款通过JS实现图表功能的包。

引用

Apache ECharts官网或一些JavaScript公共库网站上直接获取.js文件。
(nugget上的ECharts包版本太老，踩了很多坑)

这个js文件是html文件中需要引用的，而不是在vs项目中添加依赖性。
echarts.js包位置
这里我直接将html文件和引用包放在上下级目录，同时设置了始终复制到目录
html中引用js包

代码部分

C#代码

初始化CefSharp。（只需要初始化一次,多次初始化会报错，所以我放在主界面的构造函数中）

            //浏览器组件只初始化一次，所以放在主界面
            //参数设置
            CefSettings settings = new CefSettings();
            //  settings.Locale = "zh-CN";
            // settings.CefCommandLineArgs.Add("disable-gpu", "1");//去掉gpu，否则chrome显示有问题
            Cef.Initialize(settings);

定义一个ChromiumWebBrowser控件

		public ChromiumWebBrowser chromeBrowser;

初始化时选择需要加载的路径（这里我们直接加载Html文件显示Echarts，路径即为html的路径)，并加载到WinForms中的容器中。

        public void InitChart()
        {
        	string currentPath = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location);
            if (currentPath == null)
            {
            	//这里引用了SerialLog
                //logger.Error($"Failed to {nameof(InitChart)},Failed to GetDirectoryName");
                return;
            }
            string filepath = currentPath + @"\obj\html\EChart.html";
            if (File.Exists(filepath))
            {  //创建实例
                chromeBrowser = new ChromiumWebBrowser(filepath);
                // 将浏览器放入容器中
                chromeBrowser.Dock = DockStyle.Fill;
                chromeBrowser.Parent = panel_chart;
                chromeBrowser.MenuHandler = new MenuHandler();
            }
        }

添加实现接口，禁用浏览器控件右键的菜单项

internal class MenuHandler : IContextMenuHandler
        {
            public bool OnBeforeContextMenu(IWebBrowser browser, IContextMenuParams parameters)
            {
                return false;
            }

            public void OnBeforeContextMenu(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model)
            {
                return;
            }

            public bool OnContextMenuCommand(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame, IContextMenuParams parameters, CefMenuCommand commandId, CefEventFlags eventFlags)
            {
                return false;
            }

            public void OnContextMenuDismissed(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame)
            {
                return;
            }

            public bool RunContextMenu(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model, IRunContextMenuCallback callback)
            {
                return false;
            }
        }

添加方法来调用Html中的JS函数

        public void addChartData(float val)
        {
            //执行JS
            string js = $"addData({val:f2});";
            chromeBrowser.ExecuteScriptAsync(js);
        }

Html部分

Apache ECharts官网有许多教程和示例，这里我给出我需要做的一个实例。
我实现的图表是记录值在图表中，同时标记处最大值最小值和平均值。图表中的X轴位记录时间，Y轴位实际值。

建立一个div，chart就在这个div中

    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width:100%;height:430px;"></div>

构建一个ECharts实例，稍微解释一些代码部分：

toolbox：ECharts自带的工具，这里主要用到了缩放的功能，可以筛选数据缩放图表。
markLine：图表的标记线，这里用与显示数据平均值。
markPoint：图表的标记点，这里会用气泡标记出图表数据中的最大值和最小值。
tooltip：图表中光标的提示功能，这里使用坐标轴十字线，可以显示定位光标放置的精准数据。

  // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();
        var x_dates = [];
        var y_datas = [];       
        // 指定图表的配置项和数据
        option = {
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    restore: {},
                }
            },
            xAxis: {
                type: 'category',
                data: x_dates,

            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    smooth: true,
                    name: 'Measurement',
                    data: y_datas,
                    type: 'line',
                    markLine: {
                        data: [
                            {
                                type: 'average',  // type 类型， 可以是最大值max， 最小值min， 平均值
                                name: 'average',
                            },
                        ],

                    },
                    markPoint: {
                            data: [{
                            name: "max",
                            type: "max",
                            symbol: "pin",
                            symbolSize: 50,
                            animation: true,
                            label: {
                                show: true,
                                color: '#000'
                            },
                            itemStyle: { color: '#f00' }
                        },

                        {
                            name: "min",
                            type: "min",
                            symbol: "pin",
                            symbolSize: 50,
                            animation: true,
                            label: {
                                show: true,
                                color: '#000'
                            },
                            itemStyle: { color: '#faf' }
                        }]
                    },

                }
            ],
            tooltip: {
                //trigger: 'axis',
                //triggerOn: 'mousemove',
                //transitionDuration: 0.4,
                //formatter: "时间：{b}<br/>数据值:{c}"
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
        };     
        myChart.hideLoading();
        myChart.setOption(option);

写一个JS方法，用于更新图表

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

        function addData(val) {

            var date = new Date();

            var hour = date.getHours().toString(); //时
            hour = hour.length < 2 ? '0' + hour : hour;
            var minutes = date.getMinutes().toString(); //分
            minutes = minutes.length < 2 ? '0' + minutes : minutes;
            var seconds = date.getSeconds().toString(); //秒
            seconds = seconds.length < 2 ? '0' + seconds : seconds;

            now = [hour, minutes, seconds].join(':');
            x_dates.push(now);


            y_datas.push(val);
            //alert(x_dates.length + ":" + y_datas.length);
            myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                xAxis: {
                    data: x_dates,
                },
                series: [
                    {
                        data: y_datas,
                    }
                ],
            });
        }

Html完整代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../echarts.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width:100%;height:430px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();
        var x_dates = [];
        var y_datas = [];       
        // 指定图表的配置项和数据
        option = {
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    restore: {},
                }
            },
            xAxis: {
                type: 'category',
                data: x_dates,

            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    smooth: true,
                    name: '测量值',
                    data: y_datas,
                    type: 'line',
                    markLine: {
                        data: [
                            {
                                type: 'average',  // type 类型， 可以是最大值max， 最小值min， 平均值
                                name: '平均值',
                            },
                        ],

                    },
                    markPoint: {
                        data: [{
                            type: "max",
                            symbol: "pin",
                            symbolSize: 50,
                            animation: true,
                            label: {
                                show: true,
                                color: '#000'
                            },
                            itemStyle: { color: '#f00' }
                        },

                        {
                            name: "最大值",
                            type: "min",
                            symbol: "pin",
                            symbolSize: 50,
                            animation: true,
                            label: {
                                show: true,
                                color: '#000'
                            },
                            itemStyle: { color: '#faf' }
                        }]
                    },

                }
            ],
            tooltip: {
                //trigger: 'axis',
                //triggerOn: 'mousemove',
                //transitionDuration: 0.4,
                //formatter: "时间：{b}<br/>数据值:{c}"
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
        };     
        myChart.hideLoading();
        myChart.setOption(option);


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

        function addData(val) {

            var date = new Date();

            var hour = date.getHours().toString(); //时
            hour = hour.length < 2 ? '0' + hour : hour;
            var minutes = date.getMinutes().toString(); //分
            minutes = minutes.length < 2 ? '0' + minutes : minutes;
            var seconds = date.getSeconds().toString(); //秒
            seconds = seconds.length < 2 ? '0' + seconds : seconds;

            now = [hour, minutes, seconds].join(':');
            x_dates.push(now);


            y_datas.push(val);
            //alert(x_dates.length + ":" + y_datas.length);
            myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                xAxis: {
                    data: x_dates,
                },
                series: [
                    {
                        data: y_datas,
                    }
                ],
            });
        }   
    </script>
</body>
</html>

最终效果

最终运行效果如下:
图表演示
通过ECharts自带的工具,可以点击Zoom然后选中区域进行数据缩放，也可以点击Zoom Reset变回缩放前状态。
缩放数据
可以点击Data View查看数据值

还可以点击Restore还原到图表无脚本运行的初始加载状态。
Restore
参考文章：
1、Winform/WPF利用CefSharp集成vue开发
 2、新版【CefSharp】禁用右键菜单 43.00+
3、C# （江湖熟手）- Cefsharp 的使用（几行代码写个浏览器）
4、WinForm完美实现Cefsharp-v49控件C#与JS交互，并且可加载运行flash。

疯狂之SSR

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
.NET WinForms（C#）中使用Echarts绘制图表

使用.NET 6编写Winforms时，需要绘制图表，发现.NET Core中默认不支持Chart控件。经过查询，使用CefSharp控件和Echart图可以实现想要的显示效果。
复制链接

扫一扫