DataV-组件配置

DataV官网地址:https://data.aliyun.com/visual/datav?spm=a2c4g.11186623.5.1.25ab3dafAlws2D

这里我把流程简单的说了一下,细节以及更深入的说明,还是得去看官网文档,我刚开始研究的时候,想搜一些关于这些的博客,想提前大致了解一下,但是没有找到,到官网之后也没有想着先去付费,浪费了一个多小时的时间,所以才写出来让大家可以节省更多的时间

1、DataV简介

我直接把官网的简介截图出来

2、购买

首先要购买,因为不是免费版的,所以不购买的话什么都做不了,购买基础版就可以拿来练手了,51元/年

 3、点击产品控制台

登录进去之后首页就会显示DataV数据可视化

有两个比较主要的就是产品控制台和产品文档,购买之后你要做的事情就是阅读,阅读产品文档以及产品控制台 > 优秀教程和案例

4、产品控制台

 进去之后就是有4个比较重要的tab,我的可视化、我的数据、我的组件、优秀案例&教程

然后首先就是要去阅读优秀案例&教程里面的所有东西,之后再研究其他三项

5、我的可视化

这里的主要功能就是

(1)创建可视化

(2)展示已经创建过的可视化

点击新建可视化之后

你可以自己创建一个,也可以之后选择左边的已经有的模板,这样的话你可以直接在原有模板的基础上进行更改,不用考虑风格等问题 

要是选择点击创建之后,随意输入一个你想为这个项目命的名字,之后就出现下面的组件,选择组件单机鼠标左键,就可以直接映射到页面上,之后便可以鼠标拖动进行位置等的摆放

 6、我的数据

这里是就是建立各个组件数据的地方

 因为整个过程最复杂的就是这里了,我单拉出去在下一篇博客进行说明

7、我的组件

因为我是基础版,所以没有进行太多的研究

8、优秀案例&教程

把优秀教程里面的文字教程、视频教程、优秀案例都过一遍,里面涉及到有关数据的问题,虽然你不会但是也是要好好的看的,留下来一个印象,到后面你自己涉及到数据方面的时候会有很大的帮助

9、预览

在做的过程中,可以预览,1因为有些交互在编辑页面是没有办法看到效果的,比如说折线图之类的鼠标事件都得在浏览器才可以看到

10、发布

 

 

做好之后,点击发布,开启发布分享、复制链接就可以给领导同事看了

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue⼤数据渲染_VueDataV⼤数据可视化模板VueBigScreen vue-big-screen 基于 vue+datav+echart 框架构建的可视化数据⼤屏项⽬,star⾼达1.1K+。提供数据动态渲染、屏幕⾃适应、内部图表 ⾃由替换等功能。 ⽬录结构 安装使⽤ 更换边框 边框是使⽤了 DataV ⾃带的组件,只需要去 views ⽬录下去寻找对应的位置去查找并替换就可以,具体的种类请去 DavaV 官⽹查看。 更换图表 直接进⼊ components/echart 下的⽂件修改成你要的 echarts 模样,可以去echarts 官⽅社区⾥⾯查看案例。 屏幕适配配置 本项⽬借助了 flexible 插件,通过改变 rem 的值来进⾏适配,原设计为 1920px。 ,适配区间为:1366px ~ 2560px,本项⽬有根据 实际情况进⾏源⽂件的更改,⼩屏幕(如:宽为 1366px)。// flexible⽂件位置: `common/flexible.js`,修改部分如下function refreshRem() { var width = docEl.getBoundingClientRect().width; // 最⼩1366px,最⼤适配2560px if (width / dpr < 1366) { width = 1366 * dpr; } else if (width / dpr > 2560) { width = 2560 * dpr; } // 原项⽬是1920px我设置成24等份,这样1rem就是 80px var rem = width / 24; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;} 以上就是对这个Vue⼤屏项⽬的简单介绍,如果你想看到更详细的⽂档,那就点击下⾯的链接去看看吧! ok,就分享到这⾥。希望对⼤家有所帮助,喜欢的话可以去看下哈~
vue-datav-echarts-elementui是一个基于Vue.js和ElementUI的数据可视化组件库。它结合了Vue框架、ElementUI组件和ECharts图表库,为开发者提供了一套方便快捷的数据可视化解决方案。 首先,通过vue-datav-echarts-elementui,我们可以方便地在Vue.js项目中使用ElementUI组件。ElementUI是一个非常流行的Vue组件库,提供了许多易于使用和美观的UI组件,如按钮、表格、表单等。通过集成ElementUI,我们可以快速构建出具有一致风格的数据可视化界面。 其次,vue-datav-echarts-elementui还集成了ECharts图表库。ECharts是一款功能强大、灵活且易于使用的数据可视化库,支持多种常见的图表类型,如折线图、柱状图、饼图等。通过将ECharts与Vue.js集成,我们可以轻松生成复杂的数据可视化图表,并自定义其外观和交互行为。 除了集成Vue框架、ElementUI和ECharts图表库,vue-datav-echarts-elementui还提供了许多便捷的功能和工具,帮助开发者更高效地进行数据可视化开发。它提供了丰富的配置选项和API接口,使得定制化开发变得简单易懂。此外,它还支持响应式设计,使得图表在不同屏幕尺寸下自适应调整。 总之,vue-datav-echarts-elementui是一个功能强大、易于使用的数据可视化组件库,通过集成Vue.js、ElementUI和ECharts,为开发者提供了一套全面的数据可视化解决方案。无论是简单的数据展示,还是复杂的数据分析,都可以借助这个组件库轻松实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值