Qt之QWebEngineView调用Echarts方法
最近在做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使用参考官方文档,官方给的很详细,动起手来搞起来吧。
上一篇: 阿里云服务器Centos7更换源
下一篇: centos7更换阿里云yum源