echarts生成图片并下载

1 实现echarts生成图片

        var charts = document.createElement("div");
        // 5. 图表配置
        var myChart = echarts.init(charts);
        var option;
        option = {
          xAxis: {
            type: 'category',
            data: this.edata[i].content.xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: this.edata[i].content.series
        };
        option && myChart.setOption(option);
        // 将图表导出为 base64 编码的图像数据  
        const base64Image = myChart.getDataURL({ type: 'png', pixelRatio: 2 });
        console.log(base64Image,'base64Image'); // 在控制台输出 base64 编码的图像数据
        this.downloadimg(base64Image,'文件')

2.base64下载

  downloadimg(file, name) {
 let parts = file.split(';base64,')
 let contentType = parts[0].split(':')[1]
 let raw = window.atob(parts[1]) // 解码base64得到二进制字符串
 let rawLength = raw.length
 let uInt8Array = new Uint8Array(rawLength) // 创建8位无符号整数值的类型化数组

 for (let i = 0; i < rawLength; ++i) {
   uInt8Array[i] = raw.charCodeAt(i) // 数组接收二进制字符串
 }
 // 创建blob对象设置文件类型
 var blob = new Blob([uInt8Array], { type: contentType });
 console.log(blob);

 var aLink = document.createElement("a");
 // 下载的文件名称
 aLink.download = name + '.' + contentType.split('/')[1];
 aLink.href = URL.createObjectURL(blob);
 // 执行点击事件进行下载
 aLink.click()

},