前言

QT使用过程中需要展示一些炫酷表格效果。此时可以Echarts+QtEngine来实现。

1、WEbEngie与WEBkit

1、同步vs异步 QWebKit很多操作都是同步进行的，包括JS的调用、获得返回值等等。QWebEngine几乎所有的操作都是异步的。

2、Html5兼容性 WebKit打开带有WebGL的3d CesiumJS 地理信息客户端时，性能显著低于 QWebEngine。在python tensorflow 对应的tensorboard监控状态页面表现差别更大。

3、编译器兼容性 QWebKit在windows下有mingw、vc++几个版本的预编译包。但是，要是使用QWebEngine,貌似暂时只能使用VisualStudio，且官方提供的是x64版本。从编译器兼容性来说，WebKit显然更好。

版本支持 Qt5.4开始提供QWebEngine，Qt5.5版本QWebEngine和QWebKit同时存在，Qt5.6之后废弃QWebKit。

综合以上因素，将QWebKit更换成QWebEngine，将Qt版本从Qt4.8升级到Qt5.7。同时Qt5使用了大量的C++11的特性，然而VC2013之前的版本对C++11基本不能很好的支持，所以要将VS2008+ Qt4.8工程移植到VS2013+ Qt5.7。参考官方提供的一个例子cookiebrowser。

2、ECahrts

官网地址 ：https://echarts.apache.org/zh/index.html

提供了三种方式的下载：

方法一：从下载的源代码或编译产物安装

方法二：从 npm 安装

方法三：选择需要的模块，在线定制下载

3、WebEngine+EChahrts使用

3.1 自动展示

代码如下（示例）：

<1>、在.pro文件中加入webenginewidgets模块。
<2>、头文件中引入#include <QtWebEngineWidgets/QWebEngineView>
<3>、建立一个testEcharts.html文件，在文件中引入echarts.js，我的html是从官网文档复制的，参考官网：
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
<4>、把建好的.html文件和echarts.js放在同一个文件夹htmlEcharts中。

实际调用

#include "WidgetEcharts.h"
#include "ui_WidgetEcharts.h"

WidgetEcharts::WidgetEcharts(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::WidgetEcharts)
{
          
   
    ui->setupUi(this);
    QWebEngineView *pEngView = new QWebEngineView(this);
    pEngView->setContextMenuPolicy(Qt::NoContextMenu);
    pEngView->load(QUrl("file:///" + qApp->applicationDirPath() + "/htmlEcharts/testEcharts.html"));
    pEngView->show();
}

WidgetEcharts::~WidgetEcharts()
{
          
   
    delete ui;
}

3.2 自定义输出数据（仅从qt到echart展示数据）

1、在js中把调用的数据线程函数，相当于接口 2、QWebEngineView可以调用它的page()->runJavaScript(“function(str)”)来运行JS方法。

3、在QT中我们需要组成一个JSON字符串将数据传过去，所以我们需要用到QJonsObject来组成一个JSON对象，使用QJsonArray往JSON对象中添加一数组，使用QJsonDocument来将JSON对象转化成字符串。

第二种方法： qt 利用QWebEngineView和QWebChannel

总结

1、 2、 4、