摘要：再網上參考了一篇文章小程序實現頁面轉化圖片并保存到相冊根據這篇文章的內容，修改源碼，針對安卓機型寫了兼容的配置，如果你的頁面只有一個圖表，就完全可以成功轉換了，如果是多個請修改的源碼，方法選擇就可以了。

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

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: "純屬虛構",
                x: "center"
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} 
{b} : {c} (omq2y0m%)"
            },
            legend: {
                orient: "vertical",
                x: "left",
                data: ["直接訪問", "郵件營銷", "聯盟廣告", "視頻廣告", "搜索引擎"]
            },
            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: "聯盟廣告"},
                        {value: 135, name: "視頻廣告"},
                        {value: 1548, name: "搜索引擎"}
                    ]
                }
            ]
        });
        Chart2.setOption({
            title: {
                text: "某站點用戶訪問來源",
                subtext: "純屬虛構",
                x: "center"
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} 
{b} : {c} (2ew22ow%)"
            },
            legend: {
                orient: "vertical",
                x: "left",
                data: ["直接訪問", "郵件營銷", "聯盟廣告", "視頻廣告", "搜索引擎"]
            },
            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: "聯盟廣告"},
                        {value: 135, name: "視頻廣告"},
                        {value: 1548, name: "搜索引擎"}
                    ]
                }
            ]
        });
        wx.hideLoading();
    }
   })

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

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

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