微信小程序 echarts 导出图片

1、wxml文件

<ec-canvas id="mychart-dom-radar"

canvas-id="mychart-radar" ec="{{ ec }}" style="{{resultInfo.results.length > 2 ? '' : 'display: none'}}"></ec-canvas>

2、绘制雷达图

 showChart() {
    var that = this
    this.ecComponent = this.selectComponent('#mychart-dom-radar')
    this.ecComponent.init((canvas, width, height, dpr) => {
      
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      })
      var indicator = []
      var dataValue = []
     
      that.data.resultInfo.results.forEach((item, index) => {
        indicator.push({
          name: item.score + '分',
          max: item.maxScore
        })
        dataValue.push(item.score)
      })
      indicator.reverse()
      dataValue.reverse()
      var option = {
        backgroundColor: "transparent",
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        radar: {
          shape: 'circle',
          nameGap: 10,
          splitNumber: 5,
          axisName: {
            color: '#FFFFFF',
            // backgroundColor: '#050505',
            // borderRadius: 3,
            // padding: [5, 5]
          },
          splitLine: {
            lineStyle: {
              color: '#7C7C7C'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['#FEFEFE', '#ECECEC', '#FEFEFE', '#ECECEC', '#FEFEFE'],
              opacity: 0.95
            }
          },
          axisLine: {
            lineStyle: {
              color: '#7C7C7C'
            }
          },
          indicator: indicator,
          center: ['50%', '50%'],
          radius: 60
        },
        series: [{
          name: '评测结果',
          type: 'radar',
          lineStyle: {
            width: 2,
            opacity: 1
          },
          symbol: 'none',
          data: [{
            value: dataValue,
            name: '结果'
          }],
          label: {
            show: true,
          },
          itemStyle: {
            color: '#E72C14'
          },
        }]
      };
      var resultStyle = that.data.resultInfo.evaluation.properties.resultStyle
      if (resultStyle != undefined && resultStyle.chartOptions != undefined) {
        option = resultStyle.chartOptions
      }
      option.radar.indicator = indicator
      option.series[0].data = [{
        value: dataValue,
        name: '结果'
      }]
      chart.setOption(option)
    
      this.chart = chart
      

      setTimeout(function () {
        that.ecComponent.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 375,
          height: 375,
          destWidth: 750,
          destHeight: 750, //mychart1的option
           success:res => {
             console.log("temp path", res.tempFilePath)
             that.setData({
              chartImage:res.tempFilePath
            })


            //next todo

            // 需要等这边图片导出成功后再继续海报生成的方法  
            
           }
          })
      }, 500)
    
      return chart;
    })
  },

3、wxss

ec-canvas {
  width: 375rpx;
  height: 375rpx;
  position: fixed;
  top: 9999px;
  /* top:200px; */
  /* background-color: red; */
}