注意:
** 源碼是不能直接調用的,需要下載編譯後的dist文件夾下的echarts.js文件。通過查看文件可以看出,源碼echarts.js裏面調用很多別的文件,各種import。而編譯好的裏面都是各種function的定義。
這裏感謝 yanggengzhen分享的經驗 **
具體使用參考地址:wpf入門第五篇 WPF with ECharts
1、創建WPF項目
2、將下載好的編譯後的JS文件增加到項目中
- 將文件放在項目所在文件夾
- 選擇最上面顯示所有文件按鈕
- 右擊JS文件,
- 包括在項目中
- 右擊JS文件,在屬性中更改爲始終複製
3、引入WPF瀏覽器控件 WebBrowser
爲控件起一個名字,方便在後臺中使用。
<WebBrowser Name="Web" />
4、爲項目新增HTML頁面
右擊項目,增加新建項
選擇html頁
增加如下代碼:
<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0013)about:internet -->
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=5,6,7,8,9,10,11, chrome=1" />
<title>ECharts</title>
</head>
<body>
<h1>html頁面</h1>
<div id="main" style="width:1000px;height:500px;margin-left:-8px" />
<script src="echarts.js"></script>
<script>
myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
myChart.setOption(option);
</script>
</body>
</html>
注意:
同樣需要將增加的html頁的屬性改爲始終複製
5、MainWindow.xaml.cs 後臺調用
在頁面的構造函數中對Web控件指定html頁面。
Web.Navigate(new Uri(Directory.GetCurrentDirectory() + "\\chart1.html"));