vue打印功能中echarts图表显示问题

1.如何在打印的时候加上精美的echarts图表呢？
解决办法是：先把echarts图转成图片，再打印，就不会出现图表内容不好看的问题了呢
注意：结构一定要改成图片，因为要显示的是图片呢
2，比如这样一段结构

<img src="" alt="" :id="main"
 style="width: 800px; height: 266px"/>

3.比如这样一个图表内容，它是折线图

drawChart() {
      // 基于准备好的dom，初始化echarts实例
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      // console.log(chartDom)
      // 指定图表的配置项和数据
      let option = {
        legend: {
          right: 20,
          data: [],
        },
        grid: {
          top: '15%',
          left: '5%',
          bottom: '15%',
          right: '5%',
        },
        xAxis: {
          type: 'category',
          //   splitLine: {
          //     show: false, //去掉网格线
          //   },
          axisLabel: {
            showMaxLabel: true,
            interval: 0,
          },
          axisTick: {
            inside: true,
            alignWithLabel: true,
          },
          boundaryGap: true,
          axisLine: {
            // show: false,
            onZero: false,
          },
          data: ['礼拜一','礼拜二','礼拜三','礼拜四','礼拜五','礼拜六','礼拜七'],
        },
        yAxis: {
          type: 'value',
          textStyle: {
            fontSize: 8,
          },
          splitLine: {
            show: true, //去掉网格线
          },
          axisTick: {
            alignWithLabel: true,
          },
          boundaryGap: true, //留白策略
          minInterval: 30, //每次增加几个
          name: 'kg',
          nameLocation: 'end',
        },
        series: [
          {
            name: '',
            data: [60, 70, 60, 70, 60, 70, 60],
            type: 'line',
            smooth: true,
            animation: false,
            showSymbol: true,
            symbol: 'emptyCircle', //设定为实心点或者其它
            symbolSize: 6, //设定点的大小
            color: '#007EC9', //设定点的颜色
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label: {
                  show: false,
                },
                lineStyle: {
                  normal: {
                    width: 2,
                    color: '#007EC9', //设置实线的颜色
                  },
                },
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      //下面的代码就是把echarts图表转成图片再渲染
        var imgSrc = myChart.getDataURL() // 渲染到图表上面展示
        $('#main')
          .attr('src', imgSrc)
          .show()
    },

4.如果打印出来的图表有些东西没有出现，比如数据展示
解决办法：加上animation: false，写在series里面，这是一个是否开启动画的属性
默认是开启的，打印不需要，要关掉这个属性，不然有些效果出不来


点点关注，感谢各位大佬的大力支持！！！