Powerpoint的旧瓶装上ECharts的新酒，让你的年终总结PPT高大上起来——Web Viewer 与 WebBrowser对比

传说Echart 4.0版本支持在 PPT 里使用 ECharts！

在 PPT 中插入 ECharts 一直是许多PPTer反馈最多的需求，如今，终于可以在 PPT 里使用 ECharts 了！你可以在 Gallery 里创建你自己的图表作品后保存。然后在 PPT 里插入 ECharts 组件，选择你刚保存的图表，马上你就可以在 PPT 里拥有一个丰富的样式，动画和交互的图表展示了！
……
目前该插件已经在等待微软商店审核，相信不需要多久，用户进行该功能的试用。

上文编辑于2018-1-19，如今将近一年过去了，似乎PPT插入ECharts组件的功能并没有出现。
又到年关，想必无数的年终总结PPT正在酝酿与展示中吧。对于那些想将制作精美的ECharts动态图表插入到PPT中的设计者，想说的是，想要在PowerPoint中用上ECharts的交互功能和可视化效果，倒也不算是特别难的事。
说到底，ECharts完成的是数据可视化的动态网页，因此要在PPT演示用上ECharts动态图表，只需要用到Web Viewer加载项或是WebBrowser控件加载网页即可。

使用Web Viewer加载项插入网页

在PPT中插入ECharts互动图表，第一个可选的方法是利用PowerPoint自带的Web Viewer加载项。这里以ECharts Gallery中用户上传的“地图时间轴多样”为例加以演示。其步骤为：
插入 → 我的加载项 → Web Viewer → 调整至合适的尺寸 → 输入网址并预览 → 搞定！

Web Viewer加载网页

使用Web Viewer的方法相对比较省心，网页显示的效果好，也不用考虑PowerPoint信任中心的宏设置、Active设置等；Web Viewer只支持https网址的网页，但也不是大问题。如前面演示中用到的ECharts Gallery，或是GitHub等常用的平台，其实都是https网址。
Web Viewer在本人的Win10 + PowerPoint2016中使用正常，但换到另外一台Win7 + PowerPoint2016无法正常显示EChart可视化图表。究其原因Internet Explorer渲染ECharts容易出现问题。用Chrome内核渲染ECharts没有任何问题，但IE浏览器对ECharts的支持不是很完美。echarts兼容IE浏览器的问题提到的解决方案：一是选用ECharts2版本（3以下），二是自己在编辑ECharts可视化图表时，在页面title标签下加上一句：

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

第一个方法用低版本的EChart没去试了。这里提到的第二个方法，在使用WebBrowser 控件加载ECharts网页时也是必须的，需要添加这么一句的。当然，如果想要插入PPT中的是别人设计的在线网页，要加上兼容性版本的语句可能就不是那么方便了。
此外，在使用过程中还发现Web Viewer的最大尺寸有限制。当PPT的尺寸设置得过大时，Web Viewer无法拉伸到全屏。

使用WebBrowser 控件插入网页

在PPT中插入ECharts网页的第二种方法，是利用WebBrowser控件，具体步骤参见在 PowerPoint 2016 中嵌入网页和如何在ppt中插入html动态图表，此处不再赘述。
插入WebBrowser控件的实现方式中的几个关键步骤包括：

首先需要修改注册表，允许WebBrowser控件；
其次网页的加载需要编辑VBA代码；
文件必须保存为启用宏的PowerPoint演示文稿(.pptm)格式；
需要设置PowerPoint选项 → “信任中心” → “宏设置”、“Active设置”启用宏、允许ActiveX；
此外，WebBrowser控件默认按IE7内核渲染网页，可能导致ECharts图像无法正常显示。解决这个问题，注册表新增键值：
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
"POWERPNT.EXE" = dword:0x00002AF8

HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION 
"POWERPNT.EXE" = dword:0x00002AF8

其中的11000 (0x2AF8)表示的Internet Explorer 11，改成其它的版本也可以，如10000 (0x2710)：Internet Explorer 10，8888 (0x22B8) IE8……
不想去修改注册表的话，也可以采用和刚才Web Viewer同样的方法，在html文件中加上IE 兼容性标记X-UA-Compatible设置WebBrowser解析网页时使用的文档模式，实现 IE 浏览器版本模拟。

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
或
<meta http-equiv="X-UA-Compatible" content="IE=10"/> //IE=8、IE=7……

翻页自动加载网页以及本地网页（相对地址）的实现

参考资料中对于WebBrowser控件的使用方法介绍得很详细，这里只补充下两点。

翻页时自动加载网页。PPT加载网页的办法，参考资料中介绍了PPT演示过程中点击按钮加载页面的方法，个人不是很喜欢；所以改成了翻页后自动加载网页的方式，免去布置按钮、美化对齐等麻烦事。当然这个网页加载方式纯属个人偏好，大家根据自己的PPT设计风格选择喜欢的方式就是。
采用相对地址调用本地的网页。采用相对地址至少有一个好处，文件复制移动过程中可免去html网页文件地址错误的可能性。代码中用到了“ActivePresentation.Path”来获取PPT文件的目录，字符串连接来设置网页文件的地址。此处是将.html与.pptm文件放在了同一个目录下，想将html文件放在子目录下自己相应修改即可。
从ECharts 官方示例中下载了“堆叠区域图”作为演示的示例。相应的代码和效果如下。

务必加兼容性标识语句否则WebBrowser可能无法正常显示

点击按钮加载网页

PPT翻页自动加载网页

WebBrowser加载本地动态网页实现效果

此外，将WebBrowser控件的Silent属性设置为True，可以避免加载网页过程中频繁跳出各种提示（如上图VBA代码所示）。
个人认为，相比Web Viewer，WebBrowser控件的实现方式起点稍高（修改注册表之类），但能实现的效果更加灵活。
需要注意的是，如前所述WebBrowser对于某些ECharts的图表可能会出现无法正常渲染。尤其是没有修改注册表中的FEATURE_BROWSER_EMULATION键值的情况下，调用WebBrowser加载在线网页时可能更容易碰到此类问题。此时WebBrowser会提示“请升级您的浏览器”，如下图所示。

WebBrowser无法打开网页

所以如果可以接受的话，在注册表中加入相应的键值可能更保险一点，出现类似上图这种提示升级浏览器的情况的机率会稍少一点。

自动缩放ECharts中的字体大小（fontSize）

如果仔细看前述Gif动画中加载本地的“堆叠区域图”网页，也许会发现和浏览器（Chrome、IE、Edge）显示的效果相比，PPT中WebBrowser控件显示的网页，字体明显偏小。
出现这一情况的原因，在于我们从ECharts 官方示例下周的示例html文件，对于字体大小都是默认设置，并未专门指定：如坐标轴中的字体大小默认为12。
当使用Chrome浏览器查看示例文件时浏览器自动进行了页面缩放，但在WebBrowser控件中却并没有这么做。比如在本人新建16:9的ppt文件中插入WebBrowser控件，将控件尺寸缩放至PPT页面大小，此时控件尺寸是（Height：1080，Width：1920）。演示PPT文稿时，全屏时屏幕分辨率变大（2540×1440），WebBrowser又没有相应的缩放显示比例，此时仍然按照默认的字体大小就显得明显偏小了。

fontSize默认设置显示效果

由于本人不知道如何去修改VBA代码调整WebBrowser控件的网页显示比例（熟悉Office VBA的倒是可以去尝试下），所以采用了一个变通的办法：将ECharts中的字体大小设置为随页面尺寸自动缩放来解决这一问题。参见参考资料Echarts 文字大小随页面宽度变化一文中的思路。
需要注意的是，参考资料中提到的读取页面宽度的语句有误

const e = document.window.offsetWidth ;

需改为

var e = window.innerWidth ;

ECharts中的字体大小随页面宽度自动调整

上图中的1920就是PPT文件中WebBrowser控件尺寸，大家按照实际情况修改即可。
如此修改后的显示效果如图所示。

fontSize autoscale

这样做还有一个优点就是，对于多显示器演示PPT时不用考虑投影分辨率的影响。比如本人习惯在PPT播放过程中使用“演示者视图”，使用页面宽度调整fontSize的方法，无论那个显示器作为主显示器，都不会出现字体太大挤作一团，或是字体偏小无法看清的这些问题。
选作示例的ECharts比较简单，更为复杂的图表，无非是按照同样的思路，对相应的fontSize进行设定就是。只不过需要注意各个元素的字体大小选项所在的位置可能会有不同，如上图中坐标轴的字体大小，具体的设定可以查下ECharts的配置项手册就是。建议不妨还可以按照参考资料12中的方法，将resize()也加上就更完美了。
比较而言，就可以看出Web Viewer确实是要省心多了，也不用担心什么网页显示比例，也不用去修改注册表之类。
啰嗦了这么多，其实都是因为想把ECharts动态图表非要用PowerPoint来演示给弄的。照我看来，直接拿Chrome浏览器来查看动态图表最省事。
不过也知道，虽然亚马逊、美团、包括美国陆军训练与条令司令部（UATDOC: U.S. Army Training and Doctrine Command）在内的众多公司（集团）对PPT嗤之以鼻，还是会有众多的大小领导们会将PowerPoint奉为圭璧，甚至把做PPT当成员工们的福报也说不定吧。所以抱怨归抱怨，PPT还得做。
当然了，也许真如一年前的新闻中所言，ECharts发布新版本完美支持PPT，应该就不存在这些问题了。我们拭目以待就是。没出来这些功能之前，不妨先用本文中的方法来试试看。

小结

ECharts的功能强大，一定要想在PPT中插入ECharts（或其它）动态图表的话，可以采用Web Viewer加载项和WebBrowser控件来实现；
Web Viewer加载项的方法相对简单，但只支持https网址；
WebBrowser控件更加灵活，但需要按照前述提到的注意事项，按部就班不能马虎；
将ECharts图表中的字体大小修改为按网页宽度自动调整，显示效果更好；
没有PPT就没有伤害(〃'▽'〃)