WPF編程,WPF項目中使用Echart控件畫圖的使用方法

在這裏插入圖片描述
在這裏插入圖片描述
Echarts官網

Echarts js文件下載
在這裏插入圖片描述
在這裏插入圖片描述

注意:

** 源碼是不能直接調用的,需要下載編譯後的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"));

6、這樣一個簡單的使用例子就建成了,正常情況下運行即可呈現效果。

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章