echarts图表转换成图片

<template>
  <div>
      <div id="echartsBox" style="width:400px;height:300px;"></div>
      <button @[event]="exportExcel">exportExcel</button>
  </div>
</template>

<script>
import table2excel from 'js-table2excel'
import $ from 'jquery'
export default {
    data(){
        return{
          event:'click',
          myChart:null
        }
    },
    mounted(){
      var myChart = this.$echarts.init(document.getElementById('echartsBox'));
      // 绘制图表
      myChart.setOption({
          title: {
              text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      });
      this.myChart = myChart;
    },
    methods:{
      exportExcel(){
        var img = new Image();
        img.src = this.myChart.getDataURL({
            type:"png",
            pixelRatio: 2, //放大2倍
            backgroundColor: '#fff'
        });
        let _this = this;
        img.onload = function(){
            var canvas=document.createElement("canvas");
            canvas.width=img.width;
            canvas.height=img.height;
            var ctx=canvas.getContext('2d');
            ctx.drawImage(img,0,0);
            var  dataURL=canvas.toDataURL('image/png');//base64编码图片
            
            // 创建一个单击事件，并触发的单击事件下载图片
            var a = document.createElement('a');
            var event = new MouseEvent('click');
            // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
            a.download = '矩形图表.png' || '下载图片名称';
            // 将生成的URL设置为a.href属性
            a.href = dataURL;
            // 触发a的单击事件,下载图片
            a.dispatchEvent(event);
            _this.UpBase64Img(dataURL);
        };
      },
      //base64编码图片转换成file对象
      dataURLtoFile(dataurl, filename) {
          var arr = dataurl.split(',');
          var mime = arr[0].match(/:(.*?);/)[1];
          var bstr = atob(arr[1]);
          var n = bstr.length;
          var u8arr = new Uint8Array(n);
          while(n--){
              u8arr[n] = bstr.charCodeAt(n);
          }
          //转换成file对象
          return new File([u8arr], filename, {type:mime});
      },
      UpBase64Img(dataurl){
        let _this = this;
        var filename = "";
        var formData = new FormData();
        formData.append('file', _this.dataURLtoFile(dataurl,'tupian.png'));
        //上传到后台
        $.ajax({
            type: "POST",
            url: 'https://xxx/api/common/upload',
            contentType: false,
            processData: false,
            data: formData,
            async: false,
            success: function(res) {
                console.log(res);
            },
            fail: function(res) {
                
            }
        });
        return filename;
    }
    }
}
</script>

<style>

</style>