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文件中加上

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的路径下才能正常显示，不然会显示找不到文件