无页面时，生成报告中的echarts图片

思路：

1、 创建div

document.createElement("div");

2、设置样式

setAttribute("style", "width: 400px;height:400px

3、生成图片 使用echarts，

4、将图片导出为 base64 编码的图像数据

const base64Image = myChart.getDataURL({ type: 'png', pixelRatio: 2 }); 

代码：

import * as echarts from "echarts";
import "echarts/theme/macarons.js"; //我使用的是这个颜色主题
export default {

  data() {
    return {
      edata :[{
        title: '图表1',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [15, 20, 25, 30, 35, 40, 45],
            type: 'line'
          }
        },
        className: 'one'
      },
      {
        title: '图表2',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [100, 200, 220, 218, 135, 147, 260],
            type: 'line'
          }
        },
        className: 'two'
      },
      {
        title: '图表3',
        content: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          series: {
            data: [50, 30, 24, 18, 35, 17, 60],
            type: 'line'
          }
        },
        className: 'three',
       
      }
    ],
        imgArr:[],
        testData:{
          title:'test',
          imgArr:[]
        }
    };
  },
  created() {
    this.getDict();
    this.activeproject = this.$store.state.userinfo.activeproject
    // this.fetch();
    this.fetchScan();
  },
  methods: {
    //生成报告
    createReport(){
      let imgArr = []
      for (let i = 0; i < this.edata.length; i++) {
        // 1. 创建div(每个图表)
        var Odiv = document.createElement("div"); 
        Odiv.classList.add('box')
        Odiv.setAttribute("style", "width: 500px;height:500px");
        // 3. 设置图表的div 
        var charts = document.createElement("div");
        Odiv.appendChild(charts);
        // charts.classList.add('charts')
        charts.setAttribute("style", "width: 400px;height:400px");
        // 4. 将图表添加到body
        document.body.appendChild(Odiv);
        // 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 });  
        imgArr.push({'img':base64Image});
        console.log(base64Image); // 在控制台输出 base64 编码的图像数据
      }
      this.imgArr =imgArr
     this.testData.imgArr = this.imgArr
    },
}
}