欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Qt之QWebEngineView调用Echarts方法

程序员文章站 2022-07-13 13:38:07
...

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

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

Qt之QWebEngineView调用Echarts方法

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

Qt之QWebEngineView调用Echarts方法
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的路径,截图如下:

Qt之QWebEngineView调用Echarts方法
2、调用html文件时也需要注意路径问题,可以参考上面的代码。

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