导出页面图片

1、在页面中添加ECharts饼图，并将其绑定到Vue实例中的数据。
2、在Vue组件中添加一个导出按钮，当用户点击按钮时，执行导出操作。
3、在导出操作中，使用ECharts提供的echartsInstance.getDataURL方法将饼图转换为base64编码的图片。
4、使用Vue的相关插件，如html2canvas或vue-html2canvas将HTML元素转换为canvas，然后使用canvas转换器将canvas转换为图像。
5、最后，使用FileSaver.js或download.js等工具将图像文件保存到本地。

<template>
  <div>
    <div ref="chart" style="height: 400px"></div>
    <button @click="exportReport">Export Report</button>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import html2canvas from 'html2canvas'
import { saveAs } from 'file-saver'

export default {
  data() {
    return {
      chartData: {
        // ECharts 饼图数据
      }
    }
  },
  mounted() {
    const chart = echarts.init(this.$refs.chart)
    chart.setOption({
      // ECharts 饼图配置项
      series: [
        {
          type: 'pie',
          data: this.chartData
        }
      ]
    })
  },
  methods: {
    exportReport() {
      const chart = echarts.getInstanceByDom(this.$refs.chart)
      const imageData = chart.getDataURL({ pixelRatio: 2 })
      html2canvas(this.$el).then(canvas => {
        canvas.toBlob(blob => {
          saveAs(blob, 'report.png')
        })
      })
    }
  }
}
</script>

使用echartsInstance.getDataURL方法将ECharts饼图转换为base64编码的图片。然后，使用html2canvas将整个页面转换为canvas，然后使用canvas.toBlob方法将canvas转换为Blob对象，最后使用FileSaver.js将图像文件保存到本地。