您的位置：首页 > 编程语言 > Qt开发

QT5.5或QT5.6与echarts实现动态图表

2016-01-17 15:48 579 查看

1.前言

ECharts开源来自百度商业前端数据可视化团队，基于html5Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

在之前的blog中曾经就QT与echarts混合开发实现漂亮的图表做了讲解，参见《QT5中使用Echarts图表组件》--链接地址：/article/3644431.html，但是QT与echarts混合开发还能打造丰富的动态图表，例如：需要将分布在全国各地的系统用户数量统计出来，以地图的形式展示出每个地域的用户数量，用户点击全国地图中的各个省区域时，能够打开各省地图，在各省地图上的地市区域上以不同的颜色着色，显示地域的用户量情况。这个需求可以基于Echarts的地图图表功能实现，这是其他图表工具很难做到的。先展示下最终实现效果。



2.实现思路

本例中右侧的图表是基于Echarts将分布在全国各地的系统用户数量统计出来，以地图的形式展示出每个地域的用户数量，用户点击全国地图中的各个省区域时，能够打开各省地图，在各省地图上的地市区域上以不同的颜色着色，显示地域的用户量情况，当鼠标移到相应的地市上面还会显示相应的数据。Echarts图表还有更多复杂的功能大家可以参考百度Echarts的官方文档。
为了简化演示程序，将用户数据存放在文件中,用户数据以JSON格式存放。实际应用中可以将数据存放于数据库。在本例中使用两个JSON文件，一个用于存放省和地市的对应数据，另一个用于存放各个地市的实际用户数据。
在QtWebengine载入的Echarts图表页面中将点击选中的省份通过QtWebchannel传至QTC++程序中，QTC++程序通过查找存在JSON文件中的数据，组成JSON格式的数据传回Echart组件实现数据展现。QtWebchannel能够实现QTC++和HTML页中JS双向数据交互，实现对象传递和基于QT的信号和槽机制，具体的实现机制可以参看另一篇blog《实现QT与HTML页面通信》—链接地址：/article/3644434.html。
这种设计思路是基于：Echarts有着丰富的图表展现功能，各种图表的样式是很容易在HTML和JS定制，而重要的数据源（如图中的各区域的用户数量）是需要进行库表的查询、业务逻辑处理，最终进行展现数据的拼装，这些处理工作不是Echarts的强项，但是QT却很容易实现，所以可以将两者结合进行混合开发，打造完美的应用。另外，Echarts是一款开源组件，可以流畅的运行在PC和移动设备上，具有很强的跨平台能力。

3.实现代码

Document对象是桥接QTC++和JS的对象，QT将Document对象receiveText槽函数开放给JS，当HTML页面中用户点击相应的省份时调用此方法接收选中的省份，并最终发送sendText(constQByteArray&text)信号给JS通知HTML页面接受返回的处理结果。

document.h内容

#ifndefDOCUMENT_H
#defineDOCUMENT_H

#include<QObject>
#include<QString>
#include<QJsonArray>
#include<QJsonObject>


classDocument:publicQObject
{
Q_OBJECT
Q_PROPERTY(QStringtextMEMBERs_textNOTIFYsendText)

public:
explicitDocument(QObject*parent=nullptr);
voidsetSendTextText(constQString&text);

publicslots:
voidreceiveText(constQString&r_text);

signals:
voidsendText(constQByteArray&text);

private:
QJsonObjectprovinceJsonObj;
QJsonArraycityJsonData;
QStrings_text;
QStringrecieve_text;
};

#endif//DOCUMENT_H

document.cpp内容

#include"document.h"

#include<QDebug>

#include<QJsonArray>

#include<QtCore/QFile>

#include<QtCore/QTextStream>

#include<QJsonDocument>



Document::Document(QObject*parent):QObject(parent)

{


QFileproJsonFile(":/provinces.json");


if(!proJsonFile.open(QIODevice::ReadOnly)){

qWarning("Couldn'topenproincesjsonfile.");

return;

}

QTextStreaminProData(&proJsonFile);

//将文本流读取到字符串中：

QStringprovinceDat=inProData.readAll();

//关闭文本流：

proJsonFile.close();

QJsonDocumentloadDoc(QJsonDocument::fromJson(provinceDat.toUtf8()));

provinceJsonObj=loadDoc.object();


QFilecityJsonFile(":/citygeo.json");

cityJsonFile.open(QIODevice::ReadOnly);

QTextStreaminData(&cityJsonFile);

//将文本流读取到字符串中：

QStringdat=inData.readAll();

//关闭文本流：

cityJsonFile.close();


QJsonDocumentdoc=QJsonDocument::fromJson(dat.toUtf8());

cityJsonData=doc.array();


}


voidDocument::setSendTextText(constQString&text)

{

QJsonArraycityArray=provinceJsonObj[text.toUtf8()].toArray();


QJsonArrayreturnArray;

for(intcityIndex=0;cityIndex<cityArray.size();++cityIndex)

{

QStringcity=cityArray[cityIndex].toString();

for(intvalueIndex=0;valueIndex<cityJsonData.size();++valueIndex)

{

QJsonObjectvalueObject=cityJsonData[valueIndex].toObject();

if(valueObject["name"].toString()==city)

{

returnArray.append(valueObject);

}

}

}

QJsonDocumentreturnDoc;

returnDoc.setArray(returnArray);


emitsendText(returnDoc.toJson());

}


/*!

ThisslotisinvokedfromtheHTMLclientsideandthetextdisplayedontheserverside.

*/

voidDocument::receiveText(constQString&r_text)

{

setSendTextText(r_text);

}


MainWidget对象负责主界面的显示。


mainwidget.h内容
#ifndefMAINWIDGET_H
#defineMAINWIDGET_H

#include"document.h"

#include<QWidget>
#include<QString>

namespaceUi{
classMainWidget;
}

classMainWidget:publicQWidget
{
Q_OBJECT

public:
explicitMainWidget(QWidget*parent=0);
~MainWidget();

private:

Ui::MainWidget*ui;
Documentm_content;

};

#endif//MAINWIDGET_H

mainwidget.cpp内容
#include"mainwidget.h"

#include"ui_mainwidget.h"

#include"previewpage.h"

#include"document.h"


#include<QFile>

#include<QWebChannel>


MainWidget::MainWidget(QWidget*parent):

QWidget(parent),

ui(newUi::MainWidget)

{

ui->setupUi(this);


PreviewPage*page=newPreviewPage(this);

ui->preview->setPage(page);


QWebChannel*channel=newQWebChannel(this);

channel->registerObject(QStringLiteral("content"),&m_content);

page->setWebChannel(channel);


ui->preview->setUrl(QUrl("qrc:/index.html"));


}


MainWidget::~MainWidget()

{

deleteui;

}


previewpage.h内容
PreviewPage对象用于封装展现Echarts组件的HTML页面。

#ifndefPREVIEWPAGE_H

#definePREVIEWPAGE_H


#include<QWebEnginePage>


classPreviewPage:publicQWebEnginePage

{

Q_OBJECT

public:

explicitPreviewPage(QObject*parent=nullptr):QWebEnginePage(parent){}


protected:

boolacceptNavigationRequest(constQUrl&url,NavigationTypetype,boolisMainFrame);

};


#endif//PREVIEWPAGE_H


previewpage.cpp内容
#include"previewpage.h"

#include<QDesktopServices>

boolPreviewPage::acceptNavigationRequest(constQUrl&url,

QWebEnginePage::NavigationType/*type*/,

bool/*isMainFrame*/)
{
//Onlyallowqrc:/index.html.
if(url.scheme()==QString("qrc"))
returntrue;
QDesktopServices::openUrl(url);
returnfalse;
}

main.cpp内容
#include"document.h"
#include"mainwidget.h"
#include<QApplication>

intmain(intargc,char*argv[])
{
QApplicationa(argc,argv);
MainWidgetw;
w.show();

returna.exec();
}

文中使用例子的代码可以从此链接下载：http://download.csdn.net/detail/liuyez123/9407361
注：例子中的provinces.json文件只包含了部分省份的省名和组成地市对照关系，运行例子时，有正确对应关系的省份会以不同着色显示，没有的省份则显示为灰色，但在编造的地市数据文件citygeo.json文件中除了上海、天津、北京三个直辖市外基本数据是完整的，如果感兴趣可以自行添加数据补充完整。如有不明白之处可以给我留言~
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航