Taro 微信小程序接入echart 折線圖柱狀圖踩坑記錄

經歷過H5接入echart 的需求後，同時小程序端使用taro開發，本覺得小程序接入圖表不是很難的事，結果硬生生躺了一次坑，上線以後決定總結一次，記錄開發期間遇到的各類問題以及解決辦法，方便本身後續迭代並幫助後來者避開風險。只有在面臨bug和上線的一番對抗和心裏掙扎以後，纔會理解經驗是多麼寶貴。

原文連接

本地下載 ec-canvas 文件過大（超過500k），微信開發者工具沒法編譯上傳的問題

按照官網的指示，下載 ec-canvas 包引入工程目錄，github版本的 echart.js 文件大小爲 700k，雖然本地能夠成功引入並繪製，但最後一步上傳卻讓人大失所望，超過微信單個文件大小限制500k。

此時官網按照指示，在線定製 echart.js 內容

定製好後，成功將文件大小控制在363k，導入工程目錄替換原文件。然而通過taro編譯壓縮事後，原來的圖表變成一片空白，心裏崩潰。

通過幾番折騰事後，終於找到了解決辦法： 在官網定製時不能勾選代碼壓縮，下載源文件後去專業的壓縮網站壓縮代碼，再導入工程目錄

此時上傳問題迎刃而解。出現這個問題的緣由在於，taro在編譯 echart.js 時會將部分註釋的內容進行編譯致使代碼報錯，報錯截圖爲證：

微信原生 canvas 層級最高問題，遮擋底部懸浮菜單和彈窗

在通過一番掙扎事後，終於能夠畫出滿意的折線圖了，微信開發者工具中一切風平浪靜，上傳到體驗版後，傻眼了，彈窗和底部懸浮 button 都被圖標蓋住了，這下改動就大了。因而傻乎乎的把底部button和彈窗的容器改爲了 cover-view，再到真機上，渲染一個列表就卡的不行，更不談樣式的各類不兼容。看來cover-view 雖然強大可也不能濫用啊！

通過一番思索，決定在渲染完成後，啓用 echart 的保存圖片功能，將繪製完成的 canvas 保存成圖片。

const ecComponent = this.$scope.selectComponent('#deal-chart-dom-area');
if (!ecComponent) {
  return;
}

ecComponent.canvasToTempFilePath({
  success: res => {
    this.setState({ img: res.tempFilePath });
  },
  fail: res => console.error('canvasToTempFilePath', res)
});

複製代碼

可問題是，圖片雖然能夠解決層級問題，但失去了圖表的可交互性，沒法一箭雙鵰，若是能在初始狀態echart渲染圖表，渲染完成後將canvas轉換成圖片保存下來，在有彈框時將 canvas 切換成圖片，就能夠解決這個問題。實際效果看上去還能夠接受，剩下的問題就是控制圖片和圖表的切換，工做量應該會大幅減小。

安卓真機上沒法保存圖片的問題

生產環境中，在部分安卓手機上保存圖片會失敗，查找緣由，將下部分代碼

ctx.draw(true, () => {
    wx.canvasToTempFilePath(opt, this);
});

複製代碼

加100ms延時，改爲

ctx.draw(true, setTimeout(() => {
   wx.canvasToTempFilePath(opt, this);
}, 100));

複製代碼

從新編譯，圖片就能正常保存啦！

總結來看，微信小程序作圖表不是一個很好的方式，從長期看，建議使用h5承載圖表業務，代碼的健壯性和擴展性能更加可控。

以上是開發過程的不徹底記錄，也是我的的解決辦法，可能有不妥之處。若是有更好的微信圖表方案，歡迎留言探討！