1.前言
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
在之前的blog中曾经就QT与echarts混合开发实现漂亮的图表做了讲解,参见《QT5中使用Echarts图表组件》--链接地址:http://blog.csdn.net/liuyez123/article/details/50372123,但是QT与echarts混合开发还能打造丰富的动态图表,例如:需要将分布在全国各地的系统用户数量统计出来,以地图的形式展示出每个地域的用户数量,用户点击全国地图中的各个省区域时,能够打开各省地图,在各省地图上的地市区域上以不同的颜色着色,显示地域的用户量情况。这个需求可以基于Echarts的地图图表功能实现,这是其他图表工具很难做到的。先展示下最终实现效果。
2.实现思路
本例中右侧的图表是基于Echarts将分布在全国各地的系统用户数量统计出来,以地图的形式展示出每个地域的用户数量,用户点击全国地图中的各个省区域时,能够打开各省地图,在各省地图上的地市区域上以不同的颜色着色,显示地域的用户量情况,当鼠标移到相应的地市上面还会显示相应的数据。Echarts图表还有更多复杂的功能大家可以参考百度Echarts的官方文档。
为了简化演示程序,将用户数据存放在文件中,用户数据以JSON格式存放。实际应用中可以将数据存放于数据库。在本例中使用两个JSON文件,一个用于存放省和地市的对应数据,另一个用于存放各个地市的实际用户数据。
在QtWebengine载入的Echarts图表页面中将点击选中的省份通过QtWebchannel传至QT C++程序中,QT C++程序通过查找存在JSON文件中的数据,组成JSON格式的数据传回Echart组件实现数据展现。QtWebchannel能够实现QT C++和HTML页中JS双向数据交互,实现对象传递和基于QT的信号和槽机制,具体的实现机制可以参看另一篇blog《实现QT与HTML页面通信》—链接地址:http://blog.csdn.net/liuyez123/article/details/50509788。
这种设计思路是基于:Echarts有着丰富的图表展现功能,各种图表的样式是很容易在HTML和JS定制,而重要的数据源(如图中的各区域的用户数量)是需要进行库表的查询、业务逻辑处理,最终进行展现数据的拼装,这些处理工作不是Echarts的强项,但是QT却很容易实现,所以可以将两者结合进行混合开发,打造完美的应用。另外,Echarts是一款开源组件,可以流畅的运行在 PC 和移动设备上,具有很强的跨平台能力。
3.实现代码
Document对象是桥接QT C++和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