Qt与Echarts混合编程

Echarts是一款开源、功能强大的数据可视化产品，其图表库丰富且美观。使用Echarts与Qt混合编程，可以将Echarts上的一些图表在界面上显示出来，如故障树。

1、非传参

下载Echarts

首先，在官网下载Echarts，可以从apache下载（链接：https://echarts.apache.org/zh/download.html ），因为使用Qt是用的C++语言，对于java中的文件等不了解，所以建议使用网站上的在线定制功能，最后生成一个，echars.min.js的包，可以直接使用。
图片说明

下载图表

登录Echars官网，选择其中需要的实例，本人使用的是故障树，故选择的是树图。
图片说明

Qt程序设计

Qt使用Echarts可以使用WebEngineView、WebView或者WebEngine等，WebEngineView是Qt提供于动态渲染并显示网页内容的web引擎视图，本身是一个web浏览器；WebView是一个用于显示网页内容的组件，是在可用平台上使用本机API实现的，并不要求一定将包含完整的web浏览器堆栈作为应用程序的一部分，因此应用程序更加轻量。但是不知是版本还是其他问题，在Qt 5.10中未能成功调用WebView，故使用了WebEngineView方式。
步骤：

在.pro文件中加入webenginewidgets模块
头文件中引入#include <QtWebEngineWidgets/QWebEngineView>
将下载的echarts与html文件放到同一文件夹中
在qt中打开html文件，在中的src中将echarts的地址改为相对于运行文件的地址（地址很重要，后面单独说）

编写Qt程序，调用html文件

#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() + "/tree.html"));
  pEngView->show();
}
WidgetEcharts::~WidgetEcharts()
{
  delete ui;
}

大概的效果图就是这样了：
图片说明

地址问题

之所以说地址重要，是因为自己就在地址上耽误了时间，地址分为调试地址和封装后的地址。
首先，WebEngineView读取html文件，可以有两种方式：

/******第一种*********/
pEngineView->setUrl(QUrl("qrc:/tree.html"));
/******第二种********/
pEngineView->load(QUrl("file:///"+qApp->applicationDirPath()+"/tree.html"));