Winform程序中嵌入Echarts

Echarts

Winform程序中嵌入Echarts

原文链接：https://jingyan.baidu.com/article/eb9f7b6d5a0395869364e829.html

公司项目需要用Winform程序来做一个店铺经营看板,因此希望能在winform程序内生成相应的图表。
于是找到了这篇文章，在这里备忘一下。

首先设置WebBrowser控件的几个属性：
chartBrowser.AllowWebBrowserDrop = false;//防止 WebBrowser 控件打开拖放到其上的文件。
chartBrowser.IsWebBrowserContextMenuEnabled = false;//防止 WebBrowser 控件在用户右击它时显示其快捷菜单.
chartBrowser.WebBrowserShortcutsEnabled = false;//以防止 WebBrowser 控件响应快捷键。
chartBrowser.ScriptErrorsSuppressed = true;//以防止 WebBrowser 控件显示脚本代码问题的错误信息。
chartBrowser.ObjectForScripting = this; （这个属性比较重要，可以通过这个属性，把WINFROM中的变量，传递到JS中，供内嵌的网页使用；但设置到的类型必须是COM可见的，所以要设置 [System.Runtime.InteropServices.ComVisibleAttribute(true)]，因为我的值设置为this,所以这个特性要加载窗体类上）

string webPageURL = AppDomain.CurrentDomain.BaseDirectory + @“Html\Chart.html”;
chartBrowser.Navigate(webPageURL);
this.ChartPatams = Newtonsoft.Json.JsonConvert.SerializeObject(chartValues);
//此处的chartValues可以是任意的对象，我只是把它序列话成一个JSON字符串，并保存在窗体的自定义属性里。
这些属性的设定可以写在任何事件里，方便测试的话直接写到窗体构造函数里。
到此WINFROM程序的设置完成。
接下来编辑嵌入的HTML页面。
我们只为了生成图表，所以要引入ECharts.js（记的发布的时候要把HTML文件和JS文件同时发布）

var myChart = echarts.init(document.getElementById(‘main’));
var data = eval(’(’ +window.external.ChartPatams+ ‘)’); //把WINFROM中保存的变量转换成JSON对象（此处我的对象就是一个数值的数组类似[1,2,3,4,5]）
var xAxisData = new Array();
var yAxisData = new Array();
for (var i = 1; i <= data.length; i++) {
xAxisData[i - 1] = i;
yAxisData[i - 1] = data[i - 1];
}
// 指定图表的配置项和数据
var option = {
title: {
text: ‘趋势图’
},
xAxis: {
data: xAxisData
},
tooltip: {},
yAxis: {},
series: [{
type: ‘line’,
data: yAxisData
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}

到此结束。