背景
如今web端的圖表可以說是非常豐富且用起來方便，ECharts已經(jīng)非常成熟了，如果在winform中使用那就太好了。
思路
使用winfrom程序封裝一個web控件，然后進行展示就可以了，說干就干！
第一步（先搞一個能展示圖表的html文件）
按照ECharts官網(wǎng)搞了一個折線圖，效果如下
第二步（封裝到winform中）
這里重點強調(diào)一下，不要使用webBrowser，因為這個東西的引擎導(dǎo)致一些渲染有問題
引入Web.View2
<PackageReference Include="Microsoft.Web.WebView2" Version="1.0.1722.45" />
在winfrom的工具箱中就能看到控件了
第三步 寫代碼
在窗體加載后，將webview的url給到指定的html文件就可以了
我這個放在根目錄了
private void Form1_Load(object? sender, EventArgs e)
{
webView21.Source = new Uri(AppDomain.CurrentDomain.BaseDirectory + "line_chart.html");
}
到此一切都挺好，能正常顯示了。但是不能交互。
第四步 winfrom與html交互
在html中增加方法 如下
function LoadData(data) {
myChart.setOption({
series: data
});
}
html的完整代碼如下文章來源：http://www.zghlxwxcb.cn/news/detail-436170.html
<!--
此示例下載自 https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
title: {
text: '這是一個測試數(shù)據(jù)'
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true
}
},
xAxis: {
type: 'category',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
dataZoom: [{
type: 'slider',//圖表下方的伸縮條
show: true, //是否顯示
realtime: true, //拖動時，是否實時更新系列的視圖
start: 0, //伸縮條開始位置（1-100），可以隨時更改
end: 100, //伸縮條結(jié)束位置（1-100），可以隨時更改
}],
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: "none"
}
}
},
series: [
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
function LoadData(data) {
myChart.setOption({
series: data
});
}
</script>
</body>
</html>
在winfrom中增加調(diào)用方法
private void toolStripLabel1_Click(object sender, EventArgs e)
{
OpenFileDialog openFileDialog = new OpenFileDialog();
openFileDialog.Filter = "*.data|*.data";
openFileDialog.InitialDirectory = AppDomain.CurrentDomain.BaseDirectory;
openFileDialog.ShowDialog();
if (string.IsNullOrEmpty(openFileDialog.FileName)) return;
var s = File.ReadAllText(openFileDialog.FileName);
var js = $"let dd = {s};" +
$"LoadData(dd);";
webView21.CoreWebView2.ExecuteScriptAsync(js);
}
數(shù)據(jù)文件代碼
[
{
"name": "測試數(shù)1",
"type": "line",
"showSymbol": false,
"data": [
[ "a", 1 ],
[ "b", 2 ],
[ "c", 3 ],
[ "d", 4 ],
[ "e", 5 ],
[ "f", 6 ],
[ "h", 7 ],
[ "i", 8 ],
[ "j", 9 ],
[ "k", 10 ]
]
},
{
"name": "測試數(shù)2",
"type": "line",
"showSymbol": false,
"data": [
[ "a", 10 ],
[ "b", 20 ],
[ "c", 30 ],
[ "d", 40 ],
[ "e", 50 ],
[ "f", 60 ],
[ "h", 70 ],
[ "i", 80 ],
[ "j", 90 ],
[ "k", 10 ]
]
}
]
完整的運行效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-436170.html
到了這里，關(guān)于利用ECharts實現(xiàn)winform中的可視化圖表的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
