因为需要将echarts图表导出到word文档中，这就需要将echarts图表转为base64 然后写入到word文档中，实现vue下载word文档

主要代码

let chartBase64 = myChart.getDataURL()
return chartBase64

完整代码

<template>
  <div class="echarts1" ref="echarts">

  </div>
</template>

<script>

import { dataQuality } from '../../../../api/api/user'

export default {
  name: 'echarts1',
  components: {},
  props: {
    taskid: {
      type: [Number, String],
      default () {
        return 0
      }
    }
  },
  data () {
    return {
      status: '',
      data: {
        total_count: 0,
        replication_count: 0,
        invalid_count: 0,
        valid_count: 0,
        lack_count: 0,
        reissue_count: 0
      }
    }
  },
  watch: {
    taskid () {
      this.getdata()
    }
  },
  mounted () {
    this.getdata()
  },
  methods: {
    getdata () {
      var that = this
      dataQuality({
        task_id: this.taskid
      }).then(function (res) {
        that.data = res
        that.drawLine(0)
      })
    },
    drawLine (type) {
      var that = this
      window.addEventListener('resize', this.drawLine)
      const myChart = this.$echarts.init(this.$refs.echarts)
      if (type == 0) {
        var option = {
          legend: {
            height: '100%',
            show: true,
            orient: 'vertical',
            right: '10%',
            bottom: 'center',
            align: 'left',
            textStyle: {
              color: '#fff'
            },
            data: [{
              name: '重复数据条数',
              value: this.data.reissue_count
            }, {
              name: '有效数据条数',
              value: this.data.valid_count
            }, {
              name: '无效数据条数',
              value: this.data.invalid_count
            }, {
              name: '缺失数据条数',
              value: this.data.lack_count
            }],
            itemWidth: 15,
            itemHeight: 15,
            itemGap: 20
          },
          series: [
            {
              type: 'pie',
              center: ['30%', '50%'],
              radius: ['40%', '65%'],
              color: ['#7F7CDC', '#33CCFE', '#FF6A00', '#FFFB06'],
              labelLine: {
                normal: {
                  length: 15
                }
              },
              label: {
                normal: {
                  formatter: '{b|{b}} \n {per|{d}%} ',
                  borderColor: 'transparent',
                  borderRadius: 2,
                  rich: {
                    b: {
                      color: 'rgba(143, 178, 204, 1)',
                      fontSize: that.fz
                    },
                    per: {
                      color: 'rgba(51, 204, 255, 1)',
                      fontSize: that.fz,
                      padding: [0, 0, 5, -5]
                    }
                  },
                  textStyle: {
                    color: '#fff',
                    fontSize: that.fz
                  }
                }
              },
              data: [{
                name: '重复数据条数',
                value: this.data.reissue_count
              }, {
                name: '有效数据条数',
                value: this.data.valid_count
              }, {
                name: '无效数据条数',
                value: this.data.invalid_count
              }, {
                name: '缺失数据条数',
                value: this.data.lack_count
              }]
            }
          ]
        }
        myChart.clear()
        myChart.resize()
        myChart.setOption(option)
      }
      if (type == 1) {
        let chartBase64 = myChart.getDataURL()
        return chartBase64
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>