阿里云dataV大屏可视化的使用攻略—

好好学习，天天向上。Are you ready?

代码奉上！！！！！！！！！

首先登陆阿里云控制台，创建应用

选模板，创建名称

通过编辑预览项目

发布大屏发布成功，可以去直接访问网址，通过vue项目内嵌iframe 来实现dataV的引用

demo1 vue代码示例（此处为未设置Token验证）

<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验证）

<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 + '|' + timeconsole.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项目相关推荐

阿里云游戏服务器搭建配置说明及选择攻略
可以使用阿里云服务器搭建游戏服务器吗?当然可以,阿里云服务器完全可以搭建游戏服务器,而且阿里云官网也会提供游戏行业多场景解决方案,可以完美解决玩家访问压力.游戏合服.游戏排行榜.游戏回档.游戏掉线及游 ...
阿里云服务器镜像操作系统选哪个？攻略来了
阿里云服务器镜像是什么?云服务器操作系统就是通过镜像实现的,把镜像当作云服务器操作系统即可.阿里云根据镜像来源分为公共镜像.自定义镜像.共享镜像.镜像市场和社区镜像,阿里云百科来详细说下阿里云服务器镜 ...
记一次阿里云被入侵的解决方案（小白攻略欢迎大佬指点）
目录前言: 寻找挖矿进程之旅: 我的处理思路: 前言: 故事就发生在2022年11月23日,一个舒适的下午.我不知怎的突然想在企业网络环境下通过我的Xshell7 连接我的阿里云ESC服务器.顺便检 ...
vue移动端用什么数据可视化插件_vue框架大屏可视化
现在越来越多公司引入可视化大屏,不仅炫酷,而且能更直观的看到各个维度的数据!现在收费的大屏可视化服务很多,比如阿里云datav.百度Sugar.腾讯云图等.vue框架大屏可视化,因为开源免费功能又好, ...
用Vue大屏可视化，数据可视化平台酷屏优胜它
大屏可视化,老司机提到vue大家肯定不陌生,什么是Vue呢?Vue 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心 ...
基于阿里云之大数据学习：使用DataV制作实时销售数据可视化大屏
学习目标: 了解数据可视化应用场景掌握阿里云DataV可视化工具了解可视化大屏制作流程使用DataV模板制作数据可视化大屏一.数据可视化介绍 1.数据可视化: 是指将相对复杂的数据通过可视的. ...
阿里云DataV数据可视化快速入门
阿里云DataV数据可视化是什么? DataV数据可视化是使用可视化应用的方式来分析并展示庞杂数据的阿里云产品.DataV旨在通过图形化的界面帮助不同专业背景的用户轻松搭建专业水准的可视化应用,满足 ...
大厂，常用，四款，大屏可视化工具
作者 | JEECG官方博客来源 | http://blog.csdn.net/zhangdaiscott/article/details/109057686 最经常的工作是将一些项目的数据从数据库 ...
zookeeper 可视化_大厂，常用，四款，大屏可视化工具
小编最经常的工作是将一些项目的数据从数据库导出,然后分门别类的列到excel表格中,领导看起来眼花缭乱.小编想,要是能以图表可视化展现出来,领导就可以看到项目近几个月的走势,也知道之后要怎么决策了.小 ...
echarts 大屏可视化_看似复杂炫酷的数据可视化设计，用这波神器轻松搞定！
数据大屏与数据可视化数据可视化是目前对数据展示最常用的方式.数据的可视化设计有助于将复杂的数据,用最易理解的方式展示在用户的面前. 数据可视化在中后台的设计中很常见,通常主要用于分析和决策,对实时性 ...

阿里云dataV大屏可视化的使用攻略——vue项目

好好学习，天天向上。Are you ready?

代码奉上！！！！！！！！！

demo1 vue代码示例（此处为未设置Token验证）

demo2 vue代码示例（此处为设置Token验证）

阿里云dataV大屏可视化的使用攻略——vue项目相关推荐

最新文章

热门文章

阿里云dataV大屏可视化的使用攻略——vue项目

好好学习 ，天天向上。Are you ready?

代码奉上！！！！！！！！！

demo1 vue代码示例 （此处为未设置Token验证）

demo2 vue代码示例 （此处为设置Token验证）

阿里云dataV大屏可视化的使用攻略——vue项目相关推荐

最新文章

热门文章

好好学习，天天向上。Are you ready?

demo1 vue代码示例（此处为未设置Token验证）

demo2 vue代码示例（此处为设置Token验证）