摘要：再網(wǎng)上參考了一篇文章小程序?qū)崿F(xiàn)頁面轉(zhuǎn)化圖片并保存到相冊根據(jù)這篇文章的內(nèi)容，修改源碼，針對安卓機型寫了兼容的配置，如果你的頁面只有一個圖表，就完全可以成功轉(zhuǎn)換了，如果是多個請修改的源碼，方法選擇就可以了。

最近做的小程序項目在echarts合成圖片的時候遇到了一些問題，綜合了很多網(wǎng)友的經(jīng)驗，在此分享一下我的經(jīng)歷，如有錯誤，歡迎指正。

1.在小程序中引入echarts組件請參考 echarts-for-weixin
我的頁面有多個圖表，所以稍微改造了一下

index.wxml頁面

index.js 頁面

var Chart1 = null;
var Chart2 = null;
Page({
    data: {
       ec1: {
            onInit: function (canvas, width, height) {
                Chart1 = echarts.init(canvas, null, {
                    width: width,
                    height: height
                });
                canvas.setChart(Chart1);
                return Chart1;
            }
        },
          ec2: {
            onInit: function (canvas, width, height) {
                Chart1 = echarts.init(canvas, null, {
                    width: width,
                    height: height
                });
                canvas.setChart(Chart1);
                return Chart1;
            }
        },
      },
      onLoad(){
         setTimeout(this.getData, 1000);
      },
       getData() {
        wx.showLoading({
            title: "加載中...",
        })

         Chart1.setOption({
            title: {
                text: "某站點用戶訪問來源",
                subtext: "純屬虛構(gòu)",
                x: "center"
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} 
 : {c} (qoyqs8suu2u%)"
            },
            legend: {
                orient: "vertical",
                x: "left",
                data: ["直接訪問", "郵件營銷", "聯(lián)盟廣告", "視頻廣告", "搜索引擎"]
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ["pie", "funnel"],
                        option: {
                            funnel: {
                                x: "25%",
                                width: "50%",
                                funnelAlign: "left",
                                max: 1548
                            }
                        }
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            series: [
                {
                    name: "訪問來源",
                    type: "pie",
                    radius: "55%",
                    center: ["50%", "60%"],
                    data: [
                        {value: 335, name: "直接訪問"},
                        {value: 310, name: "郵件營銷"},
                        {value: 234, name: "聯(lián)盟廣告"},
                        {value: 135, name: "視頻廣告"},
                        {value: 1548, name: "搜索引擎"}
                    ]
                }
            ]
        });
        Chart2.setOption({
            title: {
                text: "某站點用戶訪問來源",
                subtext: "純屬虛構(gòu)",
                x: "center"
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} 
 : {c} (qoyqs8suu2u%)"
            },
            legend: {
                orient: "vertical",
                x: "left",
                data: ["直接訪問", "郵件營銷", "聯(lián)盟廣告", "視頻廣告", "搜索引擎"]
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ["pie", "funnel"],
                        option: {
                            funnel: {
                                x: "25%",
                                width: "50%",
                                funnelAlign: "left",
                                max: 1548
                            }
                        }
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            series: [
                {
                    name: "訪問來源",
                    type: "pie",
                    radius: "55%",
                    center: ["50%", "60%"],
                    data: [
                        {value: 335, name: "直接訪問"},
                        {value: 310, name: "郵件營銷"},
                        {value: 234, name: "聯(lián)盟廣告"},
                        {value: 135, name: "視頻廣告"},
                        {value: 1548, name: "搜索引擎"}
                    ]
                }
            ]
        });
        wx.hideLoading();
    }
   })

2.把echarts圖表轉(zhuǎn)化成圖片
小程序提供了一個 wx.canvasToTempFilePath 的接口，可以直接把canvas繪制成png的圖片，現(xiàn)在問題就來了，蘋果上繪制沒問題，安卓手機大概率繪制失敗，尤其是多個圖表。再網(wǎng)上參考了一篇文章 小程序echarts+canvasdrawer實現(xiàn)頁面轉(zhuǎn)化圖片并保存到相冊

根據(jù)這篇文章的內(nèi)容，修改//ec-canvas.js源碼，針對安卓機型寫了兼容的配置，如果你的頁面只有一個echarts圖表，就完全可以成功轉(zhuǎn)換了，如果是多個echarts,請修改ec-canvas.js 的源碼，draw方法選擇false就可以了。

希望遇到坑的伙伴可以繞坑而行。