小程序中echartscanvas-合成图片保存下载

最近做的小程序项目在 echarts 合成图片的时候遇到了一些问题，综合了很多网友的经验，在此分享一下我的经历，如有错误，欢迎指正。

1. 在小程序中引入 echarts 组件请参考 echarts-for-weixin
我的页面有多个图表，所以稍微改造了一下

index.wxml 页面

   <view class="container">
     <ec-canvas id="mychart-dom1" canvas-id="mychart1" ec="{{ec1}}"></ec-canvas>
   </view>
  <view class="container">
     <ec-canvas id="mychart-dom2" canvas-id="mychart2" ec="{{ec2}}"></ec-canvas>
   </view>

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} <br/>{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} <br/>{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 就可以了。

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