echarts 安卓机 wx.canvasToTempFilePath第二次生成图片为空白?
发布于 4 年前 作者 oxue 229 次浏览 来自 问答

echarts 安卓机 wx.canvasToTempFilePath第二次生成图片为空白?

echarts底层

canvasToTempFilePath(opt) {
  if (!opt.canvasId) {
    opt.canvasId = this.data.canvasId;
  }
  const system = wx.getSystemInfoSync().system;
    console.log(system)
    console.log(opt)
  if(/ios/i.test(system)){
    console.log("ios")
    ctx.draw(true, () => {
        wx.canvasToTempFilePath(opt, this);
    });
  }else{
    console.log("android")
      ctx.draw(true, () => {
          ctx.draw(true);
          setTimeout(()=>{
            console.log(opt)
              wx.canvasToTempFilePath(opt, this);
          },3000);
      });
  }

}

调用

//获取报表数据
getReportData: function () {
    let c = this;
    wx.showLoading({
        title: '加载中...',
    })
    c.setData({
        ecList: [],
        echartsImgList: [],
        showEcharts: true
    })
    wx.request({
        url: app.api.QueryReportList,
        data: {
            dateTimeType: parseInt(c.data.dateTimeType) + 1,
            labelId: c.data.labelId,
            labelType: c.data.labelType
        },
        success: res => {
            console.log(res)
            if (res.data.Code == 0 && res.data.Lst.length > 0) {
                let data = res.data.Lst;
                wx.showLoading({
                    title: '正在生成报表...',
                });
                for (let i = 0; i < data.length; i++) {
                    let item = {
                        onInit: function (canvas, width, height) {
                            const barChart = echarts.init(canvas, null, {
                                width: width,
                                height: 450
                            });
                            canvas.setChart(barChart);
                            barChart.on('finished', () => {
                                console.log("finished")
                                let className = `#mychart-dom-line${i}`;
                                try {
                                    c.firstChangeImg(className)
                                } catch (e) {
                                    console.log(e)
                                }

                            });
                            barChart.setOption(c.getLineOption(canvas, data[i]));
                            return barChart;
                        }
                    };
                    c.data.ecList.push(item);
                }
                c.setData({
                    ecList: c.data.ecList
                });
            } else {
                wx.showToast({
                    title: "该时间段无上报数据,请选择其他时间",
                    icon: 'none',
                    duration: 3000
                });
            }
        },
        fail: e => {
            console.log(e)
            wx.hideLoading();
        }
    })

},
//首次转换图片
firstChangeImg(className){
    let c=this;
    return new Promise((resolve,reject)=>{
        c.selectComponent(className).canvasToTempFilePath({
            success: res => {
                console.log(res)
                console.log("imgs")
                let echartsSrc = res.tempFilePath;
                // c.setData({
                //     echartImgSrc: res.tempFilePath
                // })
                c.data.echartsImgList.push(echartsSrc);
                c.setData({
                    echartsImgList: c.data.echartsImgList,
                });
                resolve(c.data.echartsImgList);
                wx.hideLoading();
            },
            fail: res => {
                console.log('转换图片失败', res);
                wx.hideLoading();
            }
        });
    });

},
回到顶部