Qt配置，载入html，Echart, 交互

摘要：

b）在QT项目的UI界面中添加QPushButton，并添加信号和插槽功能。在slot函数中添加以下代码：；插槽功能代码：QJsonObjectseriesData；QJsonArraydata1={1,3,9,27,81247}；系列数据插入；QStringoptionStr=QJsonDocument.toJson（）；QStringjs=QString.arg；ui-˃gantChart-˃page（）-˃runJavaScript；Js代码：functioninit2｛//指定图表varoption的配置项和数据：｛title:｛text:‘first ECharts instance'｝，工具提示：｛｝，图例：｛data:['sales']｝，xAxis:｛data:[“shirt”，“weather”，“chiffon”，series:[｛name:'sales'，type:'bar'，data:str[“data1”]｝]｝//使用刚刚指定的配置项和数据来显示图表。

一、下载、安装、配置

a) http://download.qt.io/archive/qt/5.9/5.9.0/ 官方网站下载合适的版本；

　　本次下载 qt-opensource-windows-x86-5.9.0.exe；并安装；

b) 编译器下载，本次要用到MSVC的编译器，下载安装visual studio 2017 版本（某博客说该版本支持 QWebEngineView）

c) QT 安装过程中缺少组件可在QT安装目录下找到 MaintenanceTool.exe 添加；

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

ii. 需要添加临时镜像 http://mirrors.ustc.edu.cn/qtproject/online/qtsdkrepository/windows_x86/root/qt/

iii. 组件选择时勾选要使用的QT相关的组件尤其是 webengine；

d) 环境变量配置；将QT编译器的include 和 bin 添加到系统 path;(有说法不用配置)

i. C:QtQt5.9.05.9msvc2017_64include

ii. C:QtQt5.9.05.9msvc2017_64in

e) 打开Qt Creator ->工具->选项->构建和运行配置Kit;

i. 主要包括编译器、调试器、Qt 版本三个信息；

ii. Qt配置，载入html，Echart, 交互第1张

f) 打开QT安装目录下的Examples ;

i. C:QtQt5.9.0ExamplesQt-5.9webenginewidgets

ii. 编译运行其中的 minimal项目，成功即可。

二、QT 项目结构简介

Qt配置，载入html，Echart, 交互第2张

三、QT 使用QWebEngineView 显示 html

a) 工程文件 .pro 中添加

QT  += webenginewidgets webchannel

i. Webenginewidgets （web显示类，用于显示web界面)

ii. Webchannel（web数据通道类，用于数据通信）

b) 双击打开界面ui，在UI编辑器中添加一个widget,（建议改名，ganttChart）并将widget提升为“QWebEngineView” ；

Qt配置，载入html，Echart, 交互第3张

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 调用前端 js

a) QT是通过QWebEngineView来调用HTML页面的，而HTML是通过JS来调用ECharts。因此QT可以通过QWebEngineView调用加载的html页面中的JS方法，先将HTML页面中JS设置ECharts属性的那段代码封装成一个方法供QWebEngineView调用。

b) 在QT工程中的UI界面中增加一个QPushButton并添加信号和槽函数，在槽函数中添加如下代码；

槽函数代码：（封装成 json 数据）

       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){

// 指定图表的配置项和数据

var option = {

    title: {

        text: '第一个 ECharts 实例'

    },

    tooltip: {},

    legend: {

        data:['销量']

    },

    xAxis: {

        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

    },

    yAxis: {},

    series: [{

        name: '销量',

        type: 'bar',

        data: str["data1"]

    }]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

}

五、Qt与前端交互Qwebchannel

a) QWebEngine实现一个能打开网页的简单浏览器的基础的项目；

b) 本地应用与网页端之间的通讯过程，是通过信号和槽函数实现的，本地应用通过发送信号达到把信息发送到网页端，而网页端通过直接调用槽函数实现把信息传到本地应用。很简单，就是本地应用通过发送通讯类的信号通知网页端，网页端通过直接调用通讯类的槽函数来通知本地应用。网页端对本地应用的操作一定要调用槽函数，写在public slots 限定符下面的槽函数，不能是普通的public函数。

　　　　流程：

i. 实现一个继承于QObject的类（以下简称通信类），此类包含本地应用与网页端通信的所有方法（信号，槽函数的方式）；

Qt配置，载入html，Echart, 交互第4张

Qt配置，载入html，Echart, 交互第5张

ii. 给本地应用的网页载体QWebEnginePage对象注册通信类对象；

Qt配置，载入html，Echart, 交互第6张

Qt配置，载入html，Echart, 交互第7张

iii. 网页实现中引入qwebchannel.js，创建网页端的QWebChannel对象并与本地应用的通信类对像进行关联，最终实现网页端能够直接访问通信类的方法与本地应用进行通讯；

Qt配置，载入html，Echart, 交互第8张

六、信号槽函数使用

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) 发送信号 emit findPrevious(text, cs);

b) 槽函数：需要在GUI里添加；

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

d) 一个信号可以连接多个槽函数，这些槽会一个接一个的被调用，但是它们的调用顺序是不确定的。

七、Shared library

a) 创建动态链接库

i. 创建Library项目

Qt配置，载入html，Echart, 交互第9张