可视化工具Vega的使用，以及如何自定义按钮调用自带的矢量图和位图功能

原创

已于 2022-10-20 18:49:38 修改 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #Vega #Vue

于 2022-10-20 18:48:29 首次发布

该博客介绍了如何在Vue项目中结合Vega和Vega-Lite库创建图形，并实现图形的矢量图和位图下载功能。通过添加定时器触发内置下载按钮的点击事件来规避直接操作的限制，展示了具体的Vue组件代码实现。

1.安装两个依赖：vega和vega-lite
2.使用很简单，请参考
https://juejin.cn/post/6844903945106620424
3.这里详细说一下如何调用Vega自带的下载矢量图和位图功能，本来是可以直接下载，但UI设计图一般是把下载按钮自定义了，如果你想的是通过js触发自带按钮的click事件，嗯，想法是对的，但是最终效果却令人头大，可以试一试，是出不来想要的效果的，这里我加了一个定时器事件，这样就可以触发自带按钮的click事件了。

<template>
  <div class="vegaGraph" ref="vegaGraph">
    <div class="operateBtn">
      <el-button type="primary" @click="downLoad(1)">矢量图</el-button>
      <el-button type="primary" @click="downLoad(2)">位图</el-button>
    </div>
    <div id="view"></div>
  </div>
</template>
<script>
import * as vega from 'vega'
import * as vegalite from 'vega-lite'
import vegaEmbed from 'vega-embed'
import $ from 'jquery'
import html2canvas from 'html2canvas'
export default {
   
   
  name: 'vegaGraph',
  components: {
   
   
  },
  data () {
   
   
    return {
   
   
      showOtherBtn: false,
      spec: