傳說Echart 4.0版本支持在 PPT 里使用 ECharts！

題圖來自ECharts 全新大版本 4.0 正式發(fā)布！該文中提到：

在 PPT 中插入 ECharts 一直是許多PPTer反饋?zhàn)疃嗟男枨?，如今，終于可以在 PPT 里使用 ECharts 了！你可以在 Gallery 里創(chuàng)建你自己的圖表作品后保存。然后在 PPT 里插入 ECharts 組件，選擇你剛保存的圖表，馬上你就可以在 PPT 里擁有一個(gè)豐富的樣式，動(dòng)畫和交互的圖表展示了！
……
目前該插件已經(jīng)在等待微軟商店審核，相信不需要多久，用戶進(jìn)行該功能的試用。

上文編輯于2018-1-19，如今將近一年過去了，似乎PPT插入ECharts組件的功能并沒有出現(xiàn)。
又到年關(guān)，想必?zé)o數(shù)的年終總結(jié)PPT正在醞釀與展示中吧。對(duì)于那些想將制作精美的ECharts動(dòng)態(tài)圖表插入到PPT中的設(shè)計(jì)者，想說的是，想要在PowerPoint中用上ECharts的交互功能和可視化效果，倒也不算是特別難的事。
說到底，ECharts完成的是數(shù)據(jù)可視化的動(dòng)態(tài)網(wǎng)頁，因此要在PPT演示用上ECharts動(dòng)態(tài)圖表，只需要用到Web Viewer加載項(xiàng)或是WebBrowser控件加載網(wǎng)頁即可。

使用Web Viewer加載項(xiàng)插入網(wǎng)頁

在PPT中插入ECharts互動(dòng)圖表，第一個(gè)可選的方法是利用PowerPoint自帶的Web Viewer加載項(xiàng)。這里以ECharts Gallery中用戶上傳的“地圖時(shí)間軸多樣”為例加以演示。其步驟為：
插入 → 我的加載項(xiàng) → Web Viewer → 調(diào)整至合適的尺寸 → 輸入網(wǎng)址并預(yù)覽 → 搞定！

Web Viewer加載網(wǎng)頁

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

第一個(gè)方法用低版本的EChart沒去試了。這里提到的第二個(gè)方法，在使用WebBrowser 控件加載ECharts網(wǎng)頁時(shí)也是必須的，需要添加這么一句的。當(dāng)然，如果想要插入PPT中的是別人設(shè)計(jì)的在線網(wǎng)頁，要加上兼容性版本的語句可能就不是那么方便了。
此外，在使用過程中還發(fā)現(xiàn)Web Viewer的最大尺寸有限制。當(dāng)PPT的尺寸設(shè)置得過大時(shí)，Web Viewer無法拉伸到全屏。

使用WebBrowser 控件插入網(wǎng)頁

在PPT中插入ECharts網(wǎng)頁的第二種方法，是利用WebBrowser控件，具體步驟參見在 PowerPoint 2016 中嵌入網(wǎng)頁和如何在ppt中插入html動(dòng)態(tài)圖表，此處不再贅述。
插入WebBrowser控件的實(shí)現(xiàn)方式中的幾個(gè)關(guān)鍵步驟包括：

• 首先需要修改注冊(cè)表，允許WebBrowser控件；
• 其次網(wǎng)頁的加載需要編輯VBA代碼；
• 文件必須保存為啟用宏的PowerPoint演示文稿(.pptm)格式；
• 需要設(shè)置PowerPoint選項(xiàng) → “信任中心” → “宏設(shè)置”、“Active設(shè)置”啟用宏、允許ActiveX；
  此外，WebBrowser控件默認(rèn)按IE7內(nèi)核渲染網(wǎng)頁，可能導(dǎo)致ECharts圖像無法正常顯示。解決這個(gè)問題，注冊(cè)表新增鍵值：
  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……
不想去修改注冊(cè)表的話，也可以采用和剛才Web Viewer同樣的方法，在html文件中加上IE 兼容性標(biāo)記X-UA-Compatible設(shè)置WebBrowser解析網(wǎng)頁時(shí)使用的文檔模式，實(shí)現(xiàn) IE 瀏覽器版本模擬。

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

翻頁自動(dòng)加載網(wǎng)頁以及本地網(wǎng)頁（相對(duì)地址）的實(shí)現(xiàn)

參考資料中對(duì)于WebBrowser控件的使用方法介紹得很詳細(xì)，這里只補(bǔ)充下兩點(diǎn)。

• 翻頁時(shí)自動(dòng)加載網(wǎng)頁。PPT加載網(wǎng)頁的辦法，參考資料中介紹了PPT演示過程中點(diǎn)擊按鈕加載頁面的方法，個(gè)人不是很喜歡；所以改成了翻頁后自動(dòng)加載網(wǎng)頁的方式，免去布置按鈕、美化對(duì)齊等麻煩事。當(dāng)然這個(gè)網(wǎng)頁加載方式純屬個(gè)人偏好，大家根據(jù)自己的PPT設(shè)計(jì)風(fēng)格選擇喜歡的方式就是。
• 采用相對(duì)地址調(diào)用本地的網(wǎng)頁。采用相對(duì)地址至少有一個(gè)好處，文件復(fù)制移動(dòng)過程中可免去html網(wǎng)頁文件地址錯(cuò)誤的可能性。代碼中用到了“ActivePresentation.Path”來獲取PPT文件的目錄，字符串連接來設(shè)置網(wǎng)頁文件的地址。此處是將.html與.pptm文件放在了同一個(gè)目錄下，想將html文件放在子目錄下自己相應(yīng)修改即可。
  從ECharts 官方示例中下載了“堆疊區(qū)域圖”作為演示的示例。相應(yīng)的代碼和效果如下。
  
  務(wù)必加兼容性標(biāo)識(shí)語句否則WebBrowser可能無法正常顯示
  
  
  點(diǎn)擊按鈕加載網(wǎng)頁
  
  
  PPT翻頁自動(dòng)加載網(wǎng)頁
  
  
  WebBrowser加載本地動(dòng)態(tài)網(wǎng)頁實(shí)現(xiàn)效果
  
  此外，將WebBrowser控件的Silent屬性設(shè)置為True，可以避免加載網(wǎng)頁過程中頻繁跳出各種提示（如上圖VBA代碼所示）。
  個(gè)人認(rèn)為，相比Web Viewer，WebBrowser控件的實(shí)現(xiàn)方式起點(diǎn)稍高（修改注冊(cè)表之類），但能實(shí)現(xiàn)的效果更加靈活。
  需要注意的是，如前所述WebBrowser對(duì)于某些ECharts的圖表可能會(huì)出現(xiàn)無法正常渲染。尤其是沒有修改注冊(cè)表中的FEATURE_BROWSER_EMULATION鍵值的情況下，調(diào)用WebBrowser加載在線網(wǎng)頁時(shí)可能更容易碰到此類問題。此時(shí)WebBrowser會(huì)提示“請(qǐng)升級(jí)您的瀏覽器”，如下圖所示。
  
  WebBrowser無法打開網(wǎng)頁

所以如果可以接受的話，在注冊(cè)表中加入相應(yīng)的鍵值可能更保險(xiǎn)一點(diǎn)，出現(xiàn)類似上圖這種提示升級(jí)瀏覽器的情況的機(jī)率會(huì)稍少一點(diǎn)。

自動(dòng)縮放ECharts中的字體大?。╢ontSize）

如果仔細(xì)看前述Gif動(dòng)畫中加載本地的“堆疊區(qū)域圖”網(wǎng)頁，也許會(huì)發(fā)現(xiàn)和瀏覽器（Chrome、IE、Edge）顯示的效果相比，PPT中WebBrowser控件顯示的網(wǎng)頁，字體明顯偏小。
出現(xiàn)這一情況的原因，在于我們從ECharts 官方示例下周的示例html文件，對(duì)于字體大小都是默認(rèn)設(shè)置，并未專門指定：如坐標(biāo)軸中的字體大小默認(rèn)為12。
當(dāng)使用Chrome瀏覽器查看示例文件時(shí)瀏覽器自動(dòng)進(jìn)行了頁面縮放，但在WebBrowser控件中卻并沒有這么做。比如在本人新建16:9的ppt文件中插入WebBrowser控件，將控件尺寸縮放至PPT頁面大小，此時(shí)控件尺寸是（Height：1080，Width：1920）。演示PPT文稿時(shí)，全屏?xí)r屏幕分辨率變大（2540×1440），WebBrowser又沒有相應(yīng)的縮放顯示比例，此時(shí)仍然按照默認(rèn)的字體大小就顯得明顯偏小了。

fontSize默認(rèn)設(shè)置顯示效果

由于本人不知道如何去修改VBA代碼調(diào)整WebBrowser控件的網(wǎng)頁顯示比例（熟悉Office VBA的倒是可以去嘗試下），所以采用了一個(gè)變通的辦法：將ECharts中的字體大小設(shè)置為隨頁面尺寸自動(dòng)縮放來解決這一問題。參見參考資料Echarts 文字大小隨頁面寬度變化一文中的思路。
需要注意的是，參考資料中提到的讀取頁面寬度的語句有誤

const e = document.window.offsetWidth ;

需改為

var e = window.innerWidth ;

ECharts中的字體大小隨頁面寬度自動(dòng)調(diào)整

上圖中的1920就是PPT文件中WebBrowser控件尺寸，大家按照實(shí)際情況修改即可。
如此修改后的顯示效果如圖所示。

fontSize autoscale

這樣做還有一個(gè)優(yōu)點(diǎn)就是，對(duì)于多顯示器演示PPT時(shí)不用考慮投影分辨率的影響。比如本人習(xí)慣在PPT播放過程中使用“演示者視圖”，使用頁面寬度調(diào)整fontSize的方法，無論那個(gè)顯示器作為主顯示器，都不會(huì)出現(xiàn)字體太大擠作一團(tuán)，或是字體偏小無法看清的這些問題。
選作示例的ECharts比較簡單，更為復(fù)雜的圖表，無非是按照同樣的思路，對(duì)相應(yīng)的fontSize進(jìn)行設(shè)定就是。只不過需要注意各個(gè)元素的字體大小選項(xiàng)所在的位置可能會(huì)有不同，如上圖中坐標(biāo)軸的字體大小，具體的設(shè)定可以查下ECharts的配置項(xiàng)手冊(cè)就是。建議不妨還可以按照參考資料12中的方法，將resize()也加上就更完美了。
比較而言，就可以看出Web Viewer確實(shí)是要省心多了，也不用擔(dān)心什么網(wǎng)頁顯示比例，也不用去修改注冊(cè)表之類。
啰嗦了這么多，其實(shí)都是因?yàn)橄氚袳Charts動(dòng)態(tài)圖表非要用PowerPoint來演示給弄的。照我看來，直接拿Chrome瀏覽器來查看動(dòng)態(tài)圖表最省事。
不過也知道，雖然亞馬遜、美團(tuán)、包括美國陸軍訓(xùn)練與條令司令部（UATDOC: U.S. Army Training and Doctrine Command）在內(nèi)的眾多公司（集團(tuán)）對(duì)PPT嗤之以鼻，還是會(huì)有眾多的大小領(lǐng)導(dǎo)們會(huì)將PowerPoint奉為圭璧，甚至把做PPT當(dāng)成員工們的福報(bào)也說不定吧。所以抱怨歸抱怨，PPT還得做。
當(dāng)然了，也許真如一年前的新聞中所言，ECharts發(fā)布新版本完美支持PPT，應(yīng)該就不存在這些問題了。我們拭目以待就是。沒出來這些功能之前，不妨先用本文中的方法來試試看。

小結(jié)

• ECharts的功能強(qiáng)大，一定要想在PPT中插入ECharts（或其它）動(dòng)態(tài)圖表的話，可以采用Web Viewer加載項(xiàng)和WebBrowser控件來實(shí)現(xiàn)；

• Web Viewer加載項(xiàng)的方法相對(duì)簡單，但只支持https網(wǎng)址；

• WebBrowser控件更加靈活，但需要按照前述提到的注意事項(xiàng)，按部就班不能馬虎；

• 將ECharts圖表中的字體大小修改為按網(wǎng)頁寬度自動(dòng)調(diào)整，顯示效果更好；

• 沒有PPT就沒有傷害(〃'▽'〃)

參考資料

1. ECharts 全新大版本 4.0 正式發(fā)布！
2. Add a Live Webpage to a PowerPoint Slide with Web Viewer
3. PPT Web Viewer插件安裝
4. 如何在ppt中插入html動(dòng)態(tài)圖表
5. 在 PowerPoint 2016 中嵌入網(wǎng)頁
6. 用webBrowser打開網(wǎng)頁出現(xiàn)腳本錯(cuò)誤怎么辦？
7. PowerPoint中插入本地HTML網(wǎng)頁（使用相對(duì)路徑）
8. Web Browser Control & Specifying the IE Version
9. A Brief Guide to FEATURE_BROWSER_EMULATION
10. IE 兼容性標(biāo)記 X-UA-Compatible 解釋和用法
11. Echarts 文字大小隨頁面寬度變化
12. echarts自動(dòng)適應(yīng)屏幕大小
13. Apache ECharts (incubating)
14. Jeff Bezos Banned PowerPoint in Meetings
15. 如何看待美團(tuán)效仿亞馬遜，內(nèi)部匯報(bào)拒用PPT，而改用Word?
16. U.S. Army discovers PowerPoint makes you stupid
17. The Army Learning Model - ASQ San Antonio Section 1404