Recently, I have encountered some problems in the small program project of echarts, which integrates the experience of many netizens, and I would like to share my experience here. If there are any mistakes, please correct them.

1. Please refer to echarts-for-weixin
My page has multiple charts, so I changed it a little.

index.wxml page

   <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 page

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: 'Loading...',
        })

         Chart1.setOption({
            title: {
                text: 'User access source of a site',
                subtext: 'Pure fiction',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['Direct access', 'Mail marketing', 'Alliance advertising', 'Video advertising', 'Search Engines']
            },
            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: 'Access source',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: 'Direct access'},
                        {value: 310, name: 'Mail marketing'},
                        {value: 234, name: 'Alliance advertising'},
                        {value: 135, name: 'Video advertising'},
                        {value: 1548, name: 'Search Engines'}
                    ]
                }
            ]
        });
        Chart2.setOption({
            title: {
                text: 'User access source of a site',
                subtext: 'Pure fiction',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['Direct access', 'Mail marketing', 'Alliance advertising', 'Video advertising', 'Search Engines']
            },
            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: 'Access source',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: 'Direct access'},
                        {value: 310, name: 'Mail marketing'},
                        {value: 234, name: 'Alliance advertising'},
                        {value: 135, name: 'Video advertising'},
                        {value: 1548, name: 'Search Engines'}
                    ]
                }
            ]
        });
        wx.hideLoading();
    }
   })

2. Convert the charts of echarts into pictures
The app provides an interface of wx.canvas to tempfilepath, which can directly draw canvas as a png picture. Now the problem is coming. There's no problem in drawing on apple. Android phone probably fails to draw, especially multiple charts. I refer to an article on the Internet. Echarts + canvas applet realizes page conversion and saving to album

According to the content of this article, modify the source code of / / ec-canvas.js, and write a compatible configuration for Android. If your page has only one ecarts chart, it can be successfully converted. If there are multiple ecarts, please modify the source code of ec-canvas.js, and select false for draw method.

Hope that the partner who meets the pit can walk around the pit.