一、下載、安裝、配置

b)????? 編譯器下載，本次要用到MSVC的編譯器，下載安裝visual studio 2017 版本(某博客說該版本支持 QWebEngineView)

c)????? QT 安裝過程中缺少組件可在QT安裝目錄下找到 MaintenanceTool.exe 添加；

i.????????? 需要注冊，或者更新 MaintenanceTool.exe;

iii.????????? 組件選擇時勾選要使用的QT相關的組件尤其是 webengine；

d)????? 環(huán)境變量配置；將QT編譯器的include 和 bin 添加到系統(tǒng) path;(有說法不用配置)

i.????????? C:\Qt\Qt5.9.0\5.9\msvc2017_64\include

ii.????????? C:\Qt\Qt5.9.0\5.9\msvc2017_64\bin

e)????? 打開Qt Creator ->工具->選項->構建和運行 配置Kit;

i.????????? 主要包括 編譯器、調(diào)試器、Qt 版本 三個信息；

ii.

f)?????? 打開QT安裝目錄下的Examples ;

i.????????? C:\Qt\Qt5.9.0\Examples\Qt-5.9\webenginewidgets

ii.????????? 編譯運行其中的 minimal項目，成功即可。

二、QT 項目結構簡介

三、QT 使用QWebEngineView 顯示 html

a)????? 工程文件 .pro 中添加

QT += webenginewidgets webchannel

i.????????? Webenginewidgets (web顯示類，用于顯示web界面)

ii.????????? Webchannel(web數(shù)據(jù)通道類，用于數(shù)據(jù)通信)

b)????? 雙擊打開界面ui，在UI編輯器中添加一個widget,(建議改名，ganttChart)并將widget提升為“QWebEngineView” ；

c)????? 在工程中引入html文件和相關的js等資源；項目右鍵->Add Existing Directory

d)????? 在代碼中載入html; (添加對應的頭文件)

QString htmlpath ="D:/Qt_project/QtCommDialog/demo1/a.html";

ui->ganttChart->load(QUrl(htmlPath));

e)????? 選擇MSVC 2017 編譯器運行即可顯示html頁面；

四、QT 調(diào)用前端 js

a)????? QT是通過QWebEngineView來調(diào)用HTML頁面的，而HTML是通過JS來調(diào)用ECharts。因此QT可以通過QWebEngineView調(diào)用加載的html頁面中的JS方法，先將HTML頁面中JS設置ECharts屬性的那段代碼封裝成一個方法供QWebEngineView調(diào)用。

b)????? 在QT工程中的UI界面中增加一個QPushButton并添加信號和槽函數(shù)，在槽函數(shù)中添加如下代碼；

槽函數(shù)代碼：(封裝成 json 數(shù)據(jù))

QJsonObject seriesData;

QJsonArray data1 = {1, 3, 9, 27, 81, 247};

seriesData.insert("data1", data1);

QString optionStr = QJsonDocument(seriesData).toJson();

QString js = QString("init2(%1)").arg(optionStr);

ui->ganttChart->page()->runJavaScript(js);

js 代碼：

function init2(str){

// 指定圖表的配置項和數(shù)據(jù)

var option = {

title: {

text: '第一個 ECharts 實例'

},

tooltip: {},

legend: {

data:['銷量']

},

xAxis: {

data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]

},

yAxis: {},

series: [{

name: '銷量',

type: 'bar',

data: str["data1"]

}]

};

// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。

myChart.setOption(option);

}

五、Qt與前端交互Qwebchannel

a)????? QWebEngine實現(xiàn)一個能打開網(wǎng)頁的簡單瀏覽器的基礎的項目；

b)????? 本地應用與網(wǎng)頁端之間的通訊過程，是通過信號和槽函數(shù)實現(xiàn)的，本地應用通過發(fā)送信號達到把信息發(fā)送到網(wǎng)頁端，而網(wǎng)頁端通過直接調(diào)用槽函數(shù)實現(xiàn)把信息傳到本地應用。很簡單，就是本地應用通過發(fā)送通訊類的信號通知網(wǎng)頁端，網(wǎng)頁端通過直接調(diào)用通訊類的槽函數(shù)來通知本地應用。網(wǎng)頁端對本地應用的操作一定要調(diào)用槽函數(shù)，寫在public slots 限定符下面的槽函數(shù)，不能是普通的public函數(shù)。

流程：

i.????????? 實現(xiàn)一個繼承于QObject的類(以下簡稱通信類)，此類包含本地應用與網(wǎng)頁端通信的所有方法(信號，槽函數(shù)的方式)；

ii.????????? 給本地應用的網(wǎng)頁載體QWebEnginePage對象注冊通信類對象；

iii.????????? 網(wǎng)頁實現(xiàn)中引入qwebchannel.js，創(chuàng)建網(wǎng)頁端的QWebChannel對象并與本地應用的通信類對像進行關聯(lián)，最終實現(xiàn)網(wǎng)頁端能夠直接訪問通信類的方法與本地應用進行通訊；

六、信號槽函數(shù)使用

signals:

void findNext(const QString &str, Qt::CaseSensitivity cs);

void findPrevious(const QString &str, Qt::CaseSensitivity cs);

private slots:

void findClicked();

void enableFindButton(const QString &text);

a)? ? ? 發(fā)送信號? emit findPrevious(text, cs);

b)????? 槽函數(shù)：需要在GUI里添加；

c)????? connect(ui->pushButton_2,SIGNAL(clicked()),this, SLOT(onResizeEcharts()));

d)????? 一個信號可以連接多個槽函數(shù)，這些槽會一個接一個的被調(diào)用，但是它們的調(diào)用順序是不確定的。

七、Shared library

a)????? 創(chuàng)建動態(tài)鏈接庫

i.????????? 創(chuàng)建Library項目

ii.????????? 創(chuàng)建UI文件

iii.????????? 編輯UI文件，添加widget 提升為QWebEngineView;

iv.????????? 根據(jù)UI文件編輯頭文件和源文件(將代碼和UI關聯(lián)，然后在代碼控制UI控件)

b)????? 使用動態(tài)鏈接庫

i.????????? 創(chuàng)建項目

ii.????????? 將動態(tài)鏈接庫的四個文件拷貝到項目目錄下

iii.????????? 編輯項目的pro文件

INCLUDEPATH 這一行就是為了讓我們的項目可以找到 ganttchardll.h 和 ganttchardll_global.h 這兩個文件，你需要把這里的路徑替換成符合你的工程的路徑。LIBS 這一行則需要告訴編譯器(注意，這里是編譯器)到哪里去找到這個 dll 文件。

iv.????????? 編輯源文件

v.????????? 找到工程下的exe文件，運行缺少dll,將dll復制到當前文件；(運行時需要dll,查找順序：當前路徑-系統(tǒng)路徑)

vi.????????? 運行即可。

c)????? 更新dll

共享庫的一個好處是可以動態(tài)加載，也就是說，如果你需要升級程序，那么就要簡單的替換掉這個 dll 就好了，不需要要求用戶重新安裝全部文件。當然，這些 dll 也是有缺點的：動態(tài)加載的東西肯定會比靜態(tài)編譯的東西效率低一些。不過在現(xiàn)在的硬件環(huán)境下，這點性能損失已經(jīng)可以忽略不計了。

1、修改共享庫的代碼，添加一個按鈕，槽函數(shù)為點擊關閉。

2、選擇重新構建項目

3、將項目目錄下的dll替換新的dll。

4、運行即可

八、項目源碼

九、參考文獻

Qt 基礎通識：

qt加載EChart 調(diào)用js:

Qt UI和 代碼關聯(lián)：

Qt 動態(tài)鏈接庫：

qt html webchannel 通信：

總結

以上是生活随笔為你收集整理的qt显示echart_Qt配置，载入html，Echart, 交互的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。