【原】技術(shù)圖文：如何利用C# + Echarts 繪制 Bar Simple,？

老馬的程序人生 2020-08-17

展開全文

背景

Echarts 是百度推出的一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫(kù),。該庫(kù)提供了常規(guī)的折線圖、柱狀圖,、散點(diǎn)圖,、餅圖、K線圖,，用于統(tǒng)計(jì)的盒形圖,，用于地理數(shù)據(jù)可視化的地圖、熱力圖,、線圖,，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap,、旭日?qǐng)D,，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖,，儀表盤,，并且支持圖與圖之間的混搭。

三維圖

既然 Echarts 提供了豐富的圖形,，所以咱們有必要把它封裝起來(lái),，以便讓其支持 Windows 窗體應(yīng)用程序。

技術(shù)分析

整體的技術(shù)方案就是做一個(gè)自定義控件,，該控件中包含 WebBrowser 瀏覽器控件,，通過(guò)該瀏覽器控件顯示指定位置的網(wǎng)頁(yè),。就像咱們直接通過(guò) Web 瀏覽器網(wǎng)頁(yè)一樣。具體的步驟如下：

首先,，創(chuàng)建一個(gè)在 Windows 窗體應(yīng)用程序中使用的控件項(xiàng)目 LSGO.Core.ECharts,。

其次，在該控件項(xiàng)目的設(shè)計(jì)器中,，拖入一個(gè) WebBrowser 控件,，并設(shè)置其 Dock 屬性為 Fill，即讓 WebBrowser 充滿整個(gè)容器,。

接著,，寫一個(gè) InitialECharts 方法，加載指定目錄的網(wǎng)頁(yè).\assets\echarts.html,，讓該網(wǎng)頁(yè)在 WebBrowser 中打開,。

當(dāng)該網(wǎng)頁(yè)加載完成后，觸發(fā) WebBrowser 的 WebBrowserDocumentCompletedEventHandler 事件,，在該事件注冊(cè)的方法中調(diào)用該網(wǎng)頁(yè)中用 JS 寫的 showChart 方法,，則在該網(wǎng)頁(yè)中顯示圖形。

當(dāng)窗體控件的尺寸發(fā)生變化后,，觸發(fā) WebBrowser 的 SizeChanged 事件,，在該事件注冊(cè)的方法中調(diào)用該網(wǎng)頁(yè)中用 JS 寫的 setPosition 方法，則重新調(diào)整顯示圖形的布局,，以滿足新的尺寸,。

WebBrowser 類的常用屬性、事件與方法,。

屬性

/// <summary>
/// 獲取或設(shè)置一個(gè)對(duì)象,，該對(duì)象可由顯示在 WebBrowser 控件中的網(wǎng)頁(yè)所包含的腳本代碼訪問(wèn)。
/// </summary>
/// <returns>
/// 可用于腳本代碼的對(duì)象,。
/// </returns>
public object ObjectForScripting { get; set; }

/// <returns>
/// 表示當(dāng)前頁(yè)的 HtmlDocument,，如果未加載任何頁(yè)，則為 null,。
/// </returns>
public HtmlDocument Document { get; }

事件

/// <summary>
/// 在 WebBrowser 控件完成加載文檔時(shí)發(fā)生,。
/// </summary>
public event WebBrowserDocumentCompletedEventHandler DocumentCompleted;

/// <summary>
/// 在 Control.Size 屬性值更改時(shí)發(fā)生。
/// </summary>
public event EventHandler SizeChanged;

方法

/// <summary>
/// 將指定的統(tǒng)一資源定位器 (URL) 處的文檔加載到 WebBrowser 控件中,，替換上一個(gè)文檔,。
/// </summary>
/// <param name="urlString">要加載的文檔的 URL。</param>
public void Navigate(string urlString);

HtmlDocument 類的常用方法,。

/// <returns>
/// 活動(dòng)腳本調(diào)用所返回的對(duì)象,。
/// </returns>
/// <param name="scriptName">要調(diào)用的腳本方法的名稱。</param>
/// <param name="args">要傳遞給腳本方法的參數(shù)。</param>
public object InvokeScript(string scriptName, object[] args);

代碼實(shí)現(xiàn)

Step1：創(chuàng)建一個(gè)用于顯示圖形的網(wǎng)頁(yè),。

初始顯示的網(wǎng)頁(yè) echarts.html

<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
<script src="./jquery-1.11.2.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./json2.js"></script>
<head>
  <title></title>
</head>
<body>
    <div class="container-fluid">
        <div id="main" style="height:350px;"></div>
    </div>
    <script src="./echarts.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項(xiàng)和數(shù)據(jù)
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart.setOption(option);
    </script>    
</body>
</html>

顯示圖形時(shí)調(diào)用的 JS 代碼 showChart

function showChart(option) {
    myChart.clear();
    var op = JSON.parse(option);
    myChart.setOption(op);
}

當(dāng)控件的尺寸發(fā)生變化時(shí)調(diào)用的 JS 代碼 setPosition

function setPosition(height) {
    var divMain = document.getElementById("main");
    divMain.style.height = height + "px";
    window.onresize = myChart.resize();
}

Step2：創(chuàng)建自定義控件 Echarts,。

初始化 Echarts 控件的方法

public object Option { get; set; }

public void InitialECharts(Option option)
{
    if (option == null)
        throw new ArgumentNullException();

    Option = JsonConvert.SerializeObject(option);
    string strHtml = Application.StartupPath + @"\assets\echarts.html";
    if (File.Exists(strHtml))
    {
        webBrowserMain.Navigate(strHtml);
        webBrowserMain.ObjectForScripting = this;
    }
}

當(dāng) echarts.html 在 WebBrowser 內(nèi)加載完成之后執(zhí)行的方法。

private void webBrowserMain_DocumentCompleted(object sender,
    WebBrowserDocumentCompletedEventArgs e)
{
    object[] objArray = new object[] {Option};
    HtmlDocument htmlDocument = webBrowserMain.Document;
    if (htmlDocument != null)
    {
        htmlDocument.InvokeScript("showChart", objArray);
        objArray[0] = Height;
        htmlDocument.InvokeScript("setPosition", objArray);
        _isDocumentLoaded = true;
    }
}

當(dāng)控件 Echarts 尺寸發(fā)生變化之后執(zhí)行的方法,。

private void webBrowserMain_SizeChanged(object sender, EventArgs e)
{
    if (_isDocumentLoaded)
    {
        object[] objArray = new object[] {Height};
        HtmlDocument htmlDocument = webBrowserMain.Document;
        if (htmlDocument != null)
        {
            htmlDocument.InvokeScript("setPosition", objArray);
        }
    }
}

Step3：對(duì)百度 Echarts 組件的封裝,。

對(duì) ECharts 中的 xAxis 結(jié)構(gòu)的封裝。

public class XAxis
{
    /// <summary>
    /// 坐標(biāo)軸類型
    /// </summary>
    public string type { get; set; } = "category";

    /// <summary>
    /// 類目數(shù)據(jù)
    /// </summary>
    public List<string> data { get; set; }
}

對(duì) ECharts 中 yAxis 結(jié)構(gòu)的封裝,。

public class YAxis
{
    /// <summary>
    /// 坐標(biāo)軸類型
    /// </summary>
    public string type { get; set; } = "value";
}

對(duì) ECharts 中 series 集合元素的封裝。

public class SeriesItem
{
    /// <summary>
    /// 每個(gè)系列通過(guò) type 決定自己的圖表類型
    /// </summary>
    public string type { get; set; }

    /// <summary>
    /// 系列中的數(shù)據(jù)內(nèi)容數(shù)組
    /// </summary>
    public List<int> data { get; set; }
}

對(duì) ECharts 中 option 結(jié)構(gòu)的封裝,。

public class Option
{
    /// <summary>
    /// x軸
    /// </summary>
    public XAxis xAxis { get; set; }

    /// <summary>
    /// y軸
    /// </summary>
    public YAxis yAxis { get; set; }

    /// <summary>
    /// 數(shù)據(jù)
    /// </summary>
    public List<SeriesItem> series { get; set; }
}

總結(jié)

百度示例的代碼：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

封裝成控件之后的調(diào)用代碼：

private List<string> GetXAxisData()
{
    List<string> reslt = new List<string>
    {
        "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
    };
    return reslt;
}

private List<SeriesItem> GetSeriesData()
{
    List<SeriesItem> result = new List<SeriesItem>();
    SeriesItem item = new SeriesItem
    {
        type = "bar",
        data = new List<double>
        {
            120, 200, 150, 80, 70, 110, 130
        }
    };
    result.Add(item);
    return result;
}

private void FormMain_Load(object sender, EventArgs e)
{
    Option option = new Option
    {
        title = new Title
        {
            text= "ECharts 入門示例",
        },
        xAxis = new XAxis
        {
            type = "category",
            data = GetXAxisData()
        },
        yAxis = new YAxis
        {
            type = "value"
        },
        series = GetSeriesData()
    };
    echartsMain.InitialECharts(option);
}

圖形顯示如下：

當(dāng)然,，咱們封裝百度的 Echarts 并非心血來(lái)潮，學(xué)習(xí)任何技術(shù)的目的都要應(yīng)用于實(shí)際,，去體現(xiàn)技術(shù)的價(jià)值,。

好了，今天就到這里吧,！See You,！

相關(guān)圖文：

如何利用 C# 實(shí)現(xiàn) K 最鄰近算法？
如何利用 C# 實(shí)現(xiàn) K-D Tree 結(jié)構(gòu),？
如何利用 C# + KDTree 實(shí)現(xiàn) K 最鄰近算法,？
如何利用 C# 對(duì)神經(jīng)網(wǎng)絡(luò)模型進(jìn)行抽象？
如何利用 C# 實(shí)現(xiàn)神經(jīng)網(wǎng)絡(luò)的感知器模型,？
如何利用 C# 實(shí)現(xiàn) Delta 學(xué)習(xí)規(guī)則,？
如何利用 C# 爬取帶 Token 驗(yàn)證的網(wǎng)站數(shù)據(jù)？
如何利用 C# 向 Access 數(shù)據(jù)庫(kù)插入大量數(shù)據(jù),？
如何利用 C# 開發(fā)「桌面版百度翻譯」軟件,！
如何利用 C# 開發(fā)「股票數(shù)據(jù)分析軟件」（上）
如何利用 C# 開發(fā)「股票數(shù)據(jù)分析軟件」（中）
如何利用 C# 開發(fā)「股票數(shù)據(jù)分析軟件」（下）
如何利用 C# 爬取「財(cái)報(bào)說(shuō)」中的股票數(shù)據(jù)？
如何利用 C# 爬取 One 持有者返利數(shù)據(jù),！
如何利用 C# 爬取Gate.io交易所的公告,！
如何利用 C# 爬取BigOne交易所的公告！
如何利用 C# 爬取 ONE 的交易數(shù)據(jù),？
如何利用 C# 爬取「貓眼電影：熱映口碑榜」及對(duì)應(yīng)影片信息,！
如何利用 C# 爬取「貓眼電影專業(yè)版：票房」數(shù)據(jù)！
如何利用 C# 爬取「貓眼電影：最受期待榜」及對(duì)應(yīng)影片信息,！
如何利用 C# 爬取「貓眼電影：國(guó)內(nèi)票房榜」及對(duì)應(yīng)影片信息,！
如何利用 C# + Python 破解貓眼電影的反爬蟲機(jī)制？
如何利用BigOne的API制作自動(dòng)化交易系統(tǒng) -- 身份驗(yàn)證
如何利用BigOne的API制作自動(dòng)化交易系統(tǒng) -- 獲取賬戶資產(chǎn)
如何利用BigOne的API制作自動(dòng)化交易系統(tǒng) -- 訂單系統(tǒng)

經(jīng)過(guò)8年多的發(fā)展,，LSGO軟件技術(shù)團(tuán)隊(duì)在「地理信息系統(tǒng)」,、「數(shù)據(jù)統(tǒng)計(jì)分析」、「計(jì)算機(jī)視覺」等領(lǐng)域積累了豐富的研發(fā)經(jīng)驗(yàn)，也建立了人才培養(yǎng)的完備體系,，目前深耕的領(lǐng)域?yàn)?span style="color: rgb(62, 62, 62);font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;font-size: 16px;caret-color: rgb(62, 62, 62);">「機(jī)器學(xué)習(xí)與量化金融」,，歡迎對(duì)計(jì)算機(jī)技術(shù)感興趣的同學(xué)加入，與我們共同成長(zhǎng)進(jìn)步,。