qt + echarts 使用QWebEngineView 显示 echarts图表小白教程
研究这个是因为我之前看到别人用qt5.5 显示echarts能显示出非常酷炫的图表,但是因为5.6以后qt抛弃了WebKit,我的环境又是5.9,然后我就只能找资料用QWebEngine 来实现,但是基本参考的资料都没有一开始搭建这个环境的细节,基本就只有代码,于是我遇到了很多坑,想想自己这两天的苦逼,干脆写个博客给大家以作参考
因为是第一次写博客,可能比较乱。。。
1、从Echarts官网先把库下下来,
然后到下载界面
再往下拉,选择定制
因为只是上手demo,直接使用默认的定制项
但是下面这个兼容选项一定要勾
这里是我遇到的第一个坑,不勾这个会导致后面加载的网页不显示画面
然后点击下载,就能构建出一个echarts.min.js的js文件,保存下来
接下来就是创建使用这个echarts库的html文件
新建文本文档,重命名为2.html
然后再从echarts官网复制实例化的代码到2.html中
这时2.html和echarts.min.js在同一路径下,直接双击2.html就能打开
到这里我们关于echarts的准备工作就完成了。
但是想用qt显示这种漂亮的图表还有很多事情要做
首先我先创建一个qt项目,然后在.pro文件中加上
[code]QT += webenginewidgets
并将项目代码写成如下
尝试编译 ,编译失败
这是因为我们在安装qt的时候没有勾选安装webengine
所以我们第一步得重装或者更新qt,装上webengine
这里同样有个大坑,webengine只能用msvc2017编译,所以如果安装时没有安装这个编译器选项,即使有webengine依旧无法成功编译,如下:
所以安装qt时一定必须把这两个选项都勾上
当你把Qt重新装好后,再次编译,然后你会发现还是编译失败
百度了一阵,发现这是因为微软的编译器版本对不上
打开工具->选项->构建与运行,然后我看到了编译器信息
msvc2017对应的版本是15.0而我这里是12.0,原因出来了没装VS2017,根本找不到2017的编译器
所以我又屁颠屁颠跑去官网花了几小时装好2017
再次进qt项目,把编译器版本设置到15.0,再次编译,我又遇到了这个问题
但是其实我的环境已经配好了,右键项目,清除,执行qmake(必须这一步),再编译,成功,
于是我终于看到了echarts的页面
这里还有一点要注意,html和js文件我们要放到exe的路径下才能正常显示,不然会显示找不到文件
- 如何在网页中显示数据图表--Echarts入门教程
- Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表
- 使用Bootstrap tab切换引入echarts图表。第一个tab显示正常,
- 在vscode中使用webpack中安装的echarts文件失败,dom获取class名,图表不显示
- WPF中使用Echarts显示图表
- Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表
- 记录下遇到到前端VUE 使用ui时间选择器获取后台数据,更新echarts图表的输出显示到html
- 使用echarts显示图表
- React Native使用百度Echarts显示图表
- 在vue中添加Echarts图表的基本使用教程
- MFC+Opencv4+vs2017 显示图像 详细小白教程(不使用cvvImage)
- 解决Echarts使用tab切换时只显示第一个tab中图表,其他tab中图表不显示或显示不全问题
- TeeChart For VCL/FMX V2017使用教程:第二章-图表显示参数
- echarts初次使用 显示图表
- React Native使用百度Echarts显示图表的示例代码
- WordPress全球通用Gravatar头像注册使用教程(小白进)
- 如何在Chart FX for WPF 中使用Sketchflow原型显示图表
- 针对小白的Python入门教程——Python使用说明书
- 使用ECharts实现数据图表分析
- jquery jqPlot API 中文使用教程(非常强大的图表工具)