文章目錄
- 前言
- 一、NuGet安裝WebView2
- 二、代碼部分
- 1.xaml中引入webview2
- 2.編寫html
- 3.在WebView2中加載html
- 4.調用js方法為Echarts賦值
- 總結
前言
為了實現數據的三維效果，所以需要使用Echarts，但如何在WPF中使用Echarts呢？
一、NuGet安裝WebView2
二、代碼部分
1.xaml中引入webview2
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
<wv2:WebView2 Name = "webview2"/>
2.編寫html
寫一個html文件（請注意寫你自己Echarts.js的路徑），放到項目中，html內容如下：
<!DOCTYPE html>
<html><head><title>Simple Surface</title><meta charset="utf-8"><script src="source/echarts.min.js"></script><script src="source/echarts-gl.min.js"></script>
</head><body><div id="main" style="width: 100%;height:300px;"></div>
</body><script type="text/javascript">var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var data3d = [];var option;option = {tooltip: {},backgroundColor: '#fff',visualMap: {show: true,dimension: 2,min: -300,max: 100,inRange: {color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']}},xAxis3D: {name: '縱向',type: 'value'},yAxis3D: {name: '橫向',type: 'value'},zAxis3D: {name: '高程',type: 'value',min: -20,max: 30},grid3D: {viewControl: {projection: 'orthographic'}},series: [{name: "路面高程",type: 'surface',data: data3d,}]};option && myChart.setOption(option);
</script>
<script type="text/javascript">function setChartSize(width, height){console.log(width + "|"+height);document.getElementById('main').style.width = width + 'px';document.getElementById('main').style.height = height + 'px';myChart.resize();}function set3dData(data, min,max){console.log("設置數據中");data3d = data;option.visualMap.min = min;option.visualMap.max = max;myChart.resize();Draw3d();}function Draw3d(){option.series[0].data = data3d;myChart.setOption(option);}
</script>
</html>
3.在WebView2中加載html
在代碼中加入如下方法，使webview2加載我們寫好的html。
//初始化標識bool webview2_initialized = false;private async void InitializeWebView(){// 確保WebView2控件已經初始化await webview2.EnsureCoreWebView2Async(null);// 注冊DOMContentLoaded事件，確保頁面加載完成后調用JavaScript方法webview2.CoreWebView2.DOMContentLoaded += CoreWebView2_DOMContentLoaded;// 加載HTML內容var htmlFilePath = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory + "你的路徑", "index.html");this.webview2.CoreWebView2.Navigate(htmlFilePath);}private void CoreWebView2_DOMContentLoaded(object sender, CoreWebView2DOMContentLoadedEventArgs e){var width = this.webview2.ActualWidth - 20;var height = this.webview2.ActualHeight - 20;//webview2加載完成。webview2_initialized = true;//調用js中的setChartSize方法webview2.CoreWebView2.ExecuteScriptAsync("setChartSize(" + width + "," + height + ")");}
4.調用js方法為Echarts賦值
//檢測webview2是否初始化完成。while (!webview2_initialized){//程序等待await Task.Delay(100);}//調用js方法為echart方法賦值。this.Dispatcher.Invoke(() =>{string jsString = "set3dData({0},{1},{2});";string[] data = 你的方法;jsString = String.Format(jsString, data[0], data[1], data[2]);if (webview2.CoreWebView2 != null) {//調用js代碼webview2.CoreWebView2.ExecuteScriptAsync(jsString);}});
總結
完成上述操作后，就可以看到如下效果了。至此我們完成了WPF使用的Echarts的操作。感謝觀看，下集再見。
