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

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: {$schema: 'https://vega.github.io/schema/vega-lite/v5.4.0.json',width: 400,height: 300,data: { url: 'https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/population.json' },mark: { type: 'boxplot', extent: 'min-max' },encoding: {x: { field: 'age', type: 'ordinal' },y: { field: 'people', type: 'quantitative' }},selection: { selector001: { type: 'interval', bind: 'scales', encodings: ['x', 'y'] } }}}},computed: {},created () {},mounted () {this.chart()},methods: {downLoad (val) {const event = new Event('mousedown')document.querySelector(`a:nth-child(${val})`).addEventListener('mousedown', myFunctions, false)function myFunctions () {let time1 = setInterval(() => {if ($($('a')[val - 1]).attr('href') && $($('a')[val - 1]).attr('href') !== '#') {$('a')[val - 1].click()clearInterval(time1)myFunctions2()}}, 300)}function myFunctions2 () {document.querySelector(`a:nth-child(${val})`).removeEventListener('mousedown', myFunctions)}document.querySelector(`a:nth-child(${val})`).dispatchEvent(event)},chart () {vegaEmbed('#view', this.spec, {renderer: 'svg',defaultStyle: false,actions: {export: { png: true, svg: true },source: false,editor: false,compiled: false},i18n: {SVG_ACTION: '矢量图',PNG_ACTION: '位图'}}).then(result => {}).catch(console.error)}}
}
</script>
<style lang="scss" scoped>
.vegaGraph{height: 100%;display: flex;background-color: #F0F2F5;display: flex;flex-direction: column;.flexCenter{display: flex;justify-content: center;align-items: center;}.operateBtn{margin: 20px;}/deep/ .vega-actions{a{margin-right: 20px;}}
}
</style>

效果如下：

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

android+复杂绘图工具,Inker - 专业级矢量图绘画工具，功能不输桌面应用 - Android 应用 - 【最美应用】...
Inker 就是一款专业级的矢量图绘画工具,界面功能完全不输专业软件.打开应用后,就会看到新建页面的提示,设置好参数后,即可进入主页面. 应用界面与 Adobe 系列的工具相似,看起来很专业.不过在使 ...
三维数据可视化软件html5,基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型 | 3D组态|图扑软件|数据可视化|blog...
前言随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问 ...
Docker 之高级篇（应用复杂安装、DockerFile、Docker网络、Docker-compose、可视化工具）
前言前一章介绍了docker的基础知识,适合零基础小白阅读和学习,当然非小白也可用于查阅,查漏补缺,本章开始将记录一些docker的高级部分,难度上也会提升很多,内容较多,比较枯燥,不过看下来一定会 ...
YOLOv5的Tricks | 【Trick11】在线模型训练可视化工具wandb(Weights Biases)
如有错误,恳请指出. 与其说是yolov5的训练技巧,这篇博客更多的记录如何使用wandb这个在线模型训练可视化工具,感受到了yolov5作者对其的充分喜爱. 所以下面内容更多的记录下如何最简单的使用 ...
玫瑰图制作|多种可视化工具集锦
制作玫瑰图很简单,不仅可以使用在线网站制作,还可以直接写代码生成,"满满地炫酷感",这里给大家推荐四种轻松制作玫瑰图的方法:在线图表法.Excel插件法.PowerBl视觉对象法. ...
市场调研报告-全球与中国渠道可视化工具市场现状及未来发展趋势
本文研究全球及中国市场渠道可视化工具现状及未来发展趋势,侧重分析全球及中国市场的主要企业,同时对比北美.欧洲.日本.中国.东南亚.印度等地区的现状及未来发展趋势. 2019年全球渠道可视化工具市场规模 ...
微信小程序开发自定义按钮实现分享转发功能
文章目录前言一.详细步骤前言微信小程序,默认的分享功能是通过右上角的 "···" 按钮调用的,那么如何通过自定义按钮调用呢?本文将给出具体方法. 一.详细步骤我采用了mp ...
Vega数据可视化工具——教你轻松玩转大数据可视化 | 附代码
首发地址:https://yq.aliyun.com/articles/145929 目前我们处于信息时代,万物联网的时代已经到来.从我们的日常生活中可以发现,小到身边的智能家居,再到平时出行的共享单 ...
12个超炫数据可视化工具
12个超炫数据可视化工具今天我们带来一篇来自Adobe工程师Rohit Boggarapu的文章.他在文章中介绍了一些适合网页开发者的数据可视化和绘图工具,让你不必再花大力气与枯燥的数据抗争.部分工 ...

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

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

最新文章

热门文章