v-charts图片下载

<template>
  <div class="app">
    <ve-line :data="chartData" style="width:600px" id="charts"></ve-line>
    <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() {
        // 通过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>