vue v-charts图表的导出为图片

v-charts的安装和使用就不写了，去官网看吧，这直接贴代码关于下载的

<template>
  <div class="app">
    <ve-line ref="charts" :data="chartData" style="width:600px" id="charts" :extend="{ backgroundColor: '#fff',series: { label: {show: true}} }"></ve-line>
    // 这里导出的文件背景色是透明的，可以通过v-charts组件中的extend直接设置背景色
    <button @click="download">下载</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
         chartData: { // 这单纯就是从官网的示例copy下面的
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        }
      }
    },
    methods: {
      download() {
      	// 通过ref找到其下级的canvas
        // const charts = this.$refs.charts.getElementsByTagName('canvas')
        
        // 通过ID找到其下级的canvas
        const charts = document.getElementById("charts").getElementsByTagName('canvas')
        // 创建标签
        const element = document.createElement("a")
        // 设置下载名称
        element.download = "v-charts图表下载" +".png"
        // 设置地址以及文件类型
        element.href = charts[0].toDataURL("image/png")
        document.body.appendChild(element)
        // 触发下载事件
        element.click()
        // 移除标签
        element.remove()
      }
    }
  }
</script>