QT5中使用Echarts图表组件

Myth丶恋晨 2022-08-18 13:14 446阅读 0赞

# 1 背景介绍 #

自从开发使用Qt后一直寻找一款Qt下的图形控件库，网上有很多推荐的文章推荐使用ChartDirector和QWT，由于以前在Java下使用了比较多的基于WEB的图表开源控件，例如：Jfreechart和ECharts。在试用ChartDirector和QWT后发现QT上的图形曲线绘制和JS的图库比较起来真是弱爆了！尤其是动态数据大数据的绘制，JS真是速度，而且鼠标悬停的数值提示效果，超链接等功能，个人还是推荐与JS的开源图库结合。

注： 本文主要是以静态报表为例，若要实现动态报表，以及要使用QT5.6及QT5.6最新的技术请参看本人的另一篇博文《[QT5.5或QT5.6与echarts实现动态图表][QT5.5_QT5.6_echarts]》， 链接地址：[http://blog.csdn.net/liuyez123/article/details/50532091][QT5.5_QT5.6_echarts]。

下面是QT中使用ECharts的效果图：

> ![Center][]
> 
> ![Center 1][]
> 
> ![Center 2][]
> 
> ![Center 3][]

qwebkit为c++和html建起了一个沟通的桥梁,让软件的底层开发和ui的开发解耦,只要底层的api足够稳定强大,那ui的开发就算变化多端都会很轻松了(对于qt c++开发者来说,不用编译了...^ \_ ^),同时可以即时更新ui,或者淘汰旧的版本(更换本地或服务端的html即可),或者增加js统计..等等。同时在项目团队中可以很方便的将UI开发和底层开发分开进行。

# 2 开发例子 #

## 2.1 新建QT5项目 ##

新建QT5项目，在"Project Settings"里面选中“WebKit”和“Webkit Widgets”选项:

> ![Center 4][]

## 2.2 添加头文件 ##

> \#include<QtGui>
> 
> \#include<QtWebKit>
> 
> \#include<QWebView>

## 2.3 解析内容 ##

### 2.3.1 解析http形式的url ###

使用QWebView的setUrl方法,示例如下：

> QWebView view;
> 
> view.show(); 
> 
> view.setUrl(QUrl("http://www.cnblogs.com/ "));

### 2.3.2 解析本地文件 ###

使用QWebView的setUrl方法,示例如下：

> QWebView view;
> 
> view.show(); 
> 
> view.setUrl(QUrl("file:///E:/tmp/1.html"));

### 2.3.3 解析html字符串 ###

使用QWebView的setHtml方法,示例如下：

> QApplicationapp(argc, argv); 
> 
> QWebViewview; 
> 
> view.show();
> 
> std::ifstreamfin("E:/tmp/1.html"); 
> 
> std::stringstreambuffer; buffer << fin.rdbuf();
> 
> fin.close();
> 
> view.setHtml(buffer.str().c\_str());

下面是上面示例图中的例子的完整代码如下：

**EchartDemo.pro文件内容如下：**

\#-------------------------------------------------

\# Project created byQtCreator 2015-12-12T19:45:18

\#-------------------------------------------------

QT \+= core gui webkit

greaterThan(QT\_MAJOR\_VERSION,4): QT += widgets webkitwidgets multimedia multimediawidgets

TARGET = EchartDemo

TEMPLATE = app

SOURCES += main.cpp\\

widget.cpp

HEADERS \+= widget.h

FORMS \+= widget.ui

INCLUDEPATH += $$PWD

MOC\_DIR = temp/moc

RCC\_DIR = temp/rcc

UI\_DIR = temp/ui

OBJECTS\_DIR =temp/obj

DESTDIR = bin

**widget.h内容如下：**

\#ifndef WIDGET\_H

\#defineWIDGET\_H

\#include<QWidget>

namespace Ui \{

classWidget;

classWidget :publicQWidget

Q\_OBJECT

public:

explicit Widget(QWidget \*parent = 0);

~Widget();

privateslots:

void on\_btnLine\_clicked();

void on\_btnLinex\_clicked();

void on\_btnLiney\_clicked();

void on\_btnBar\_clicked();

void on\_btnBarx\_clicked();

void on\_btnBary\_clicked();

void on\_btnScatter\_clicked();

void on\_btnK\_clicked();

void on\_btnPie\_clicked();

void on\_btnRadar\_clicked();

void on\_btnChord\_clicked();

void on\_btnGauge\_clicked();

void on\_btnFunnel\_clicked();

void on\_btnData\_clicked();

private:

Ui::Widget \*ui;

\};

\#endif// WIDGET\_H

**main.cpp内容如下：**

\#include"widget.h"

\#include<QApplication>

\#include<QTextCodec>

int main(intargc,char \*argv\[\])

QApplication a(argc,argv);

Widget w;

w.showMaximized();

return a.exec();

**widget.cpp内容如下：**

\#include"widget.h"

\#include"ui\_widget.h"

Widget::Widget(QWidget \*parent) :

QWidget(parent),

ui(new Ui::Widget)

ui->setupUi(this);

ui->btnLine->click();

Widget::~Widget()

delete ui;

voidWidget::on\_btnLine\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/line.html"));

voidWidget::on\_btnLinex\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/linex.html"));

voidWidget::on\_btnLiney\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/liney.html"));

voidWidget::on\_btnBar\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/bar.html"));

voidWidget::on\_btnBarx\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/barx.html"));

voidWidget::on\_btnBary\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/bary.html"));

voidWidget::on\_btnScatter\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/scatter.html"));

voidWidget::on\_btnK\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/k.html"));

voidWidget::on\_btnPie\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/pie.html"));

voidWidget::on\_btnRadar\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/radar.html"));

voidWidget::on\_btnChord\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/chord.html"));

voidWidget::on\_btnGauge\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/gauge.html"));

voidWidget::on\_btnFunnel\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/funnel.html"));

voidWidget::on\_btnData\_clicked()

ui->webView->load(QUrl("file:///"\+qApp\->applicationDirPath()\+"/html/data.html"));

**代码编译通过后，将包含UI展示的Html目录（含有html文件和js文件）拷到与生成的运行文件相同的目录下运行即可。这样简单的静态图表就可以完成了。如果要实现动态的图形显示则要实现Qwebkit与Html之间通信。下次我在用一个单独的例子演示。**

**文中使用的例子的源码请参看地址：[http://download.csdn.net/detail/liuyez123/9370526][http_download.csdn.net_detail_liuyez123_9370526]**

[QT5.5_QT5.6_echarts]: http://blog.csdn.net/liuyez123/article/details/50532091
[Center]: /images/20220731/1b77052c1494413da96d1957bd861b1e.png
[Center 1]: /images/20220731/0b3999400b3d4e4ca0f0a265c02dac82.png
[Center 2]: /images/20220731/8210a1cfcf1f4f339259d3a297b80f10.png
[Center 3]: /images/20220731/91fa803c30aa4eb9a04e571b5218fa12.png
[Center 4]: /images/20220731/35be81bf52d34262b5697744bf2538b1.png
[http_download.csdn.net_detail_liuyez123_9370526]: http://download.csdn.net/detail/liuyez123/9370526