小程序中echarts+canvas 合成图片保存下载

摘要：再网上参考了一篇文章小程序实现页面转化图片并保存到相册根据这篇文章的内容，修改源码，针对安卓机型写了兼容的配置，如果你的页面只有一个图表，就完全可以成功转换了，如果是多个请修改的源码，方法选择就可以了。

最近做的小程序项目在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} ({d}%)"
            },
            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} ({d}%)"
            },
            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就可以了。

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