qt显示echart_Qt配置,载入html,Echart, 交互
一、下载、安装、配置
b) 编译器下载,本次要用到MSVC的编译器,下载安装visual studio 2017 版本(某博客说该版本支持 QWebEngineView)
c) QT 安装过程中缺少组件可在QT安装目录下找到 MaintenanceTool.exe 添加;
i. 需要注册,或者更新 MaintenanceTool.exe;
iii. 组件选择时勾选要使用的QT相关的组件尤其是 webengine;
d) 环境变量配置;将QT编译器的include 和 bin 添加到系统 path;(有说法不用配置)
i. C:\Qt\Qt5.9.0\5.9\msvc2017_64\include
ii. C:\Qt\Qt5.9.0\5.9\msvc2017_64\bin
e) 打开Qt Creator ->工具->选项->构建和运行 配置Kit;
i. 主要包括 编译器、调试器、Qt 版本 三个信息;
ii.
f) 打开QT安装目录下的Examples ;
i. C:\Qt\Qt5.9.0\Examples\Qt-5.9\webenginewidgets
ii. 编译运行其中的 minimal项目,成功即可。
二、QT 项目结构简介
三、QT 使用QWebEngineView 显示 html
a) 工程文件 .pro 中添加
QT += webenginewidgets webchannel
i. Webenginewidgets (web显示类,用于显示web界面)
ii. Webchannel(web数据通道类,用于数据通信)
b) 双击打开界面ui,在UI编辑器中添加一个widget,(建议改名,ganttChart)并将widget提升为“QWebEngineView” ;
c) 在工程中引入html文件和相关的js等资源;项目右键->Add Existing Directory
d) 在代码中载入html; (添加对应的头文件)
QString htmlpath ="D:/Qt_project/QtCommDialog/demo1/a.html";
ui->ganttChart->load(QUrl(htmlPath));
e) 选择MSVC 2017 编译器运行即可显示html页面;
四、QT 调用前端 js
a) QT是通过QWebEngineView来调用HTML页面的,而HTML是通过JS来调用ECharts。因此QT可以通过QWebEngineView调用加载的html页面中的JS方法,先将HTML页面中JS设置ECharts属性的那段代码封装成一个方法供QWebEngineView调用。
b) 在QT工程中的UI界面中增加一个QPushButton并添加信号和槽函数,在槽函数中添加如下代码;
槽函数代码:(封装成 json 数据)
QJsonObject seriesData;
QJsonArray data1 = {1, 3, 9, 27, 81, 247};
seriesData.insert("data1", data1);
QString optionStr = QJsonDocument(seriesData).toJson();
QString js = QString("init2(%1)").arg(optionStr);
ui->ganttChart->page()->runJavaScript(js);
js 代码:
function init2(str){
// 指定图表的配置项和数据
var option = {
title: {
text: '第一个 ECharts 实例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: str["data1"]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
五、Qt与前端交互Qwebchannel
a) QWebEngine实现一个能打开网页的简单浏览器的基础的项目;
b) 本地应用与网页端之间的通讯过程,是通过信号和槽函数实现的,本地应用通过发送信号达到把信息发送到网页端,而网页端通过直接调用槽函数实现把信息传到本地应用。很简单,就是本地应用通过发送通讯类的信号通知网页端,网页端通过直接调用通讯类的槽函数来通知本地应用。网页端对本地应用的操作一定要调用槽函数,写在public slots 限定符下面的槽函数,不能是普通的public函数。
流程:
i. 实现一个继承于QObject的类(以下简称通信类),此类包含本地应用与网页端通信的所有方法(信号,槽函数的方式);
ii. 给本地应用的网页载体QWebEnginePage对象注册通信类对象;
iii. 网页实现中引入qwebchannel.js,创建网页端的QWebChannel对象并与本地应用的通信类对像进行关联,最终实现网页端能够直接访问通信类的方法与本地应用进行通讯;
六、信号槽函数使用
signals:
void findNext(const QString &str, Qt::CaseSensitivity cs);
void findPrevious(const QString &str, Qt::CaseSensitivity cs);
private slots:
void findClicked();
void enableFindButton(const QString &text);
a) 发送信号 emit findPrevious(text, cs);
b) 槽函数:需要在GUI里添加;
c) connect(ui->pushButton_2,SIGNAL(clicked()),this, SLOT(onResizeEcharts()));
d) 一个信号可以连接多个槽函数,这些槽会一个接一个的被调用,但是它们的调用顺序是不确定的。
七、Shared library
a) 创建动态链接库
i. 创建Library项目
ii. 创建UI文件
iii. 编辑UI文件,添加widget 提升为QWebEngineView;
iv. 根据UI文件编辑头文件和源文件(将代码和UI关联,然后在代码控制UI控件)
b) 使用动态链接库
i. 创建项目
ii. 将动态链接库的四个文件拷贝到项目目录下
iii. 编辑项目的pro文件
INCLUDEPATH 这一行就是为了让我们的项目可以找到 ganttchardll.h 和 ganttchardll_global.h 这两个文件,你需要把这里的路径替换成符合你的工程的路径。LIBS 这一行则需要告诉编译器(注意,这里是编译器)到哪里去找到这个 dll 文件。
iv. 编辑源文件
v. 找到工程下的exe文件,运行缺少dll,将dll复制到当前文件;(运行时需要dll,查找顺序:当前路径-系统路径)
vi. 运行即可。
c) 更新dll
共享库的一个好处是可以动态加载,也就是说,如果你需要升级程序,那么就要简单的替换掉这个 dll 就好了,不需要要求用户重新安装全部文件。当然,这些 dll 也是有缺点的:动态加载的东西肯定会比静态编译的东西效率低一些。不过在现在的硬件环境下,这点性能损失已经可以忽略不计了。
1、修改共享库的代码,添加一个按钮,槽函数为点击关闭。
2、选择重新构建项目
3、将项目目录下的dll替换新的dll。
4、运行即可
八、项目源码
九、参考文献
Qt 基础通识:
qt加载EChart 调用js:
Qt UI和 代码关联:
Qt 动态链接库:
qt html webchannel 通信:
qt显示echart_Qt配置,载入html,Echart, 交互相关推荐
- VTK-医学三维图像四视图显示以及鼠标滑轮控制切片交互
VTK-医学三维图像四视图显示以及鼠标滑轮控制切片交互 一.四视图介绍 vs直接创建Qt Widgets Application项目 四视图界面,采用vtk和QVTKOpenGLNativeWidge ...
- Qt学习之路(58): 进程间交互
所谓 IO 其实不过是与其他设备之间的数据交互.在 Linux 上这个概念或许会更加清楚一些.Linux 把所有设备都看作是一种文件,因此所有的 IO 都归结到对文件的数据交互.同样,与其他进程之间也 ...
- (原创)基于ZedBoard的Webcam设计(二):USB摄像头图片采集+QT显示
在(原创基于ZedBoard的Webcam设计(一):Zedboard上的USB摄像头(V4L2接口)的图片采集中,我们完成了ZedBoard上USB摄像头的单幅图片采集,采集到的图片是存储在文件系统 ...
- Qt Creator5.12配置OpenCV4.3.0和opencv_contrib扩展包(亲测有效)
本文结构 第一部分 只安装Qt Creator和配置OpenCV 1.Qt Creator5.12.2下载与安装 2.Cmake下载与安装 3.OpenCV下载 4.编译OpenCV 5.测试Qt程序 ...
- Qt Creator的配置
Qt Creator的配置 配置Qt Creator 检查构建和运行设置 更改键盘快捷键 更改配色方案 添加您自己的代码段 配置版本控制系统 管理插件 启用和禁用插件 安装插件 配置Qt Creato ...
- linux qt显示gif图片,QT显示GIF图片
在QT中要显示GIF图片,不能通过单单的添加部件来完成. 还需要手动的编写程序. 工具:QT Creator 新建一个工程,我们先在designer中,添加一个QLabel部件. 如下图: 将QLab ...
- [imx6 VPU]硬解码+示例[ffmpeg获取海康rtsp h264流 QT显示]
0.说明: 1,代码基于imx6q.imx6dl已验证. 2,网上关于imx6 VPU的资料很少,遂从官方例程mxc_vpu_test里面活生生抽出来.主要是dec_test()里面提取,因为我只要解 ...
- 基于ZedBoard的Webcam设计(二):USB摄像头图片采集+QT显示
在(原创基于ZedBoard的Webcam设计(一):Zedboard上的USB摄像头(V4L2接口)的图片采集中,我们完成了ZedBoard上USB摄像头的单幅图片采集,采集到的图片是存储在文件系统 ...
- USB摄像头图片采集+QT显示(二)
硬件平台:Digilent ZedBoard + USB 摄像头+HDMI显示器 开发环境:Windows XP 32 bit + Wmare 8.0 + Ubuntu 10.04 +Qt Creat ...
最新文章
- AjaxControltoolkit(工具包)安装步骤说明
- 【USACO 2.1】The Castle
- app vue 真机运行_uni-app黑魔法:小程序自定义组件运行到H5平台
- sql是否包含多个字符串_工作中遇到的99%SQL优化,这里都能给你解决方案
- 自定义线程池-参数设计分析
- oracle 写declare例子
- 怎么学ui设计入门?怎样才能少走弯路?
- python爬取下拉列表数据_python 抓取下拉列表控制的表格的所有数据
- python下载官网-python下载官网
- boost中的mutex与lock
- 在 Ubuntu 中使用 GDebi 快速安装 DEB 包
- html video拖放设置,HTML5新特性以及video和audio标签和拖放笔记
- git命令行命令(1)
- efucms搭建教程_EFUCMS E16小说漫画源码(附安装教程)
- C++ 结构体内存对齐
- 安卓编程用什么软件_STM32用什么软件编程?
- Node.js学习笔记--进阶之路
- 公鸡五钱,母鸡三钱,小鸡三只一文钱,求百钱买百鸡
- 中了exe病毒文件夹变exe应用程序解决办法
- 熟练的运用计算机英语怎么说,熟练的英文翻译,熟练英语怎么说
热门文章
- VS, VS Code, VS Online, VS xxx, 你都分清了吗?
- Asp.Net Core WebAPI使用Swagger时API隐藏与分组
- 你可能不知道的.Net Core Configuration
- “.Net 社区大会”(dotnetConf) 2017 Day 1 Keynote: .NET Everywhere
- ASP.NET Core 运行原理解剖[2]:Hosting补充之配置介绍
- 期待微软平台即服务技术Service Fabric 开源
- .NET Core开发:项目实践
- dotnetConf 2016 线上虚拟大会
- ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' 解决Mysql错误
- ArcGIS实验教程——实验七:矢量数据空间校正(Spatial Adjustment)