Qt之QWebEngineView调用Echarts方法

来源：互联网发布：影视特效需要编程吗编辑：程序博客网时间：2024/06/08 16:30

最近在做Qt绘制散点图和统计图的方法，顺便研究了一下Qt中使用Echarts的方法，Echarts功能很强大，Qt中调用其他也很方便。我使用的是Qt5.6版本中的QWebEngineView显示Echarts图的，Qt5.4（包括5.4）之前的版本是使用QWebView进行显示的，方法都是一样的。测试代码写的比较简单，只是为了说明使用。

一、效果图如下：
效果图中的html代码是从官网中直接粘贴下来的，相信了解过Echarts的应该能看出来的，Echarts官方提供很多的示例图，更多示例效果请参考官方样例：http://echarts.baidu.com/examples.html。

这里写图片描述

二、使用方法：
1、从官方下载Echarts，下载地址：http://echarts.baidu.com/download.html。可以根据自己的需要选择不同的版本，下载的是源代码，源代码也不大，就是一个echarts.js文件。看官方给出的各个版本的大小，如图：

这里写图片描述
2、建立Qt工程，和创建其他的工程一样的，不在细说。需要注意一下几点：

<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中。

3、在Qt工程中调用Echarts，代码很简单，示例如下：

/**.cpp***************/

#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;}

三、需要注意的问题：
1、建立的testEcharts.html文件和echarts.js最好在一个文件夹下，这样在.html文件中引入echarts.js文件比较方便，下图中划线部分，src是引入echarts的路径，截图如下：

这里写图片描述
2、调用html文件时也需要注意路径问题，可以参考上面的代码。

说明：更多Echarts使用参考官方文档，官方给的很详细，动起手来搞起来吧。

阅读全文

'); })();