我是靠谱客的博主 小巧鞋垫,这篇文章主要介绍阿里云dataV大屏可视化的使用攻略——vue项目,现在分享给大家,希望可以做个参考。

好好学习 ,天天向上。Are you ready?在这里插入图片描述

代码奉上!!!!!!!!!

首先登陆阿里云控制台,创建应用
在这里插入图片描述
选模板,创建名称
在这里插入图片描述
通过编辑预览项目
在这里插入图片描述
在这里插入图片描述

发布大屏在这里插入图片描述发布成功,可以去直接访问网址,通过vue项目内嵌iframe 来实现dataV的引用

demo1 vue代码示例 (此处为未设置Token验证)

在这里插入图片描述

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template> <div class="block"> <iframe :width="searchTableWidth" :height="searchTableHeight" :src="reportUrl" style="border:none" /> </div> </template> <script> export default { data() { return { reportUrl: '', searchTableHeight: 0, searchTableWidth: 0 } }, watch: { '$route': function() { // 监听路由变化 this.reportUrl = this.$route.meta.pathUrl } }, created() { this.reportUrl = 'http://datav.aliyun.com/share8888888888888888888888' }, mounted() { window.onresize = () => { this.widthHeight() // 自适应高宽度 } this.$nextTick(function() { this.widthHeight() }) }, methods: { widthHeight() { this.searchTableHeight = window.innerHeight + 'px' this.searchTableWidth = window.innerWidth + 'px' } } } </script> <style lang="scss" scoped> </style>

demo2 vue代码示例 (此处为设置Token验证)

在这里插入图片描述

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<template> <div class="block"> <iframe :width="searchTableWidth" :height="searchTableHeight" :src="reportUrl" style="border:none" /> </div> </template> <script> const crypto = require('crypto') export default { data() { return { reportUrl: '', searchTableHeight: 0, searchTableWidth: 0 } }, watch: { '$route': function() { // 监听路由变化 this.reportUrl = this.$route.meta.pathUrl } }, created() { var token = 'lKqT2q6h5ME0bo99999999999' var screenID = '09e1538779103777777777777777' var time = Date.now() var stringToSign = screenID + '|' + time console.log(token, stringToSign) var signature = crypto.createHmac('sha256', token).update(stringToSign).digest().toString('base64') this.reportUrl = 'http://datav.aliyun.com/share/' + screenID + '?_datav_time=' + time + '&_datav_signature=' + encodeURIComponent(signature) }, mounted() { window.onresize = () => { this.widthHeight() // 自适应高宽度 } this.$nextTick(function() { this.widthHeight() }) }, methods: { widthHeight() { this.searchTableHeight = window.innerHeight + 'px' this.searchTableWidth = window.innerWidth + 'px' } } } </script> <style lang="scss" scoped> </style>

最后

以上就是小巧鞋垫最近收集整理的关于阿里云dataV大屏可视化的使用攻略——vue项目的全部内容,更多相关阿里云dataV大屏可视化内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(155)

评论列表共有 0 条评论

立即
投稿
返回
顶部