vue2+datav可视化数据大屏(1)

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。

开始

      📓 最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。

1.安装脚手架

      📓 首先确保电脑上安装node.js,node安装简单,去官网下载安装包一件安装即可,当安装了node.js后,我们新建一个文件夹,用vscode打开文件夹,打开终端,安装脚手架。

npm install -g @vue/cli

image.gif

📓脚手架安装一次即可,后续在创建vue项目就不需要在重新安装脚手架

2,创建vue2项目

       📓打开vscode 在终端输入 ,myapp是我们的项目名称

vue create myapp

image.gif

      📓 选择我们需要的内容,这里需要的是vue-router,其他的按自己的需需求选择

       image.gif编辑

3.下载我们需要的第三方库

       📓这里我们需要的是,moke,datav,echarts,axios

       📓在控制台下载即可

       📓下载mock

npm install mockjs --save-dev

image.gif

       📓下载datav

npm install @jiaminghi/data-view  --save

image.gif

      📓下载axios

npm install axios --save

image.gif

       📓下载echarts

npm install echarts  --save

image.gif

4.在页面上使用datav

          📓在src文件夹下面,有个app.vue的入口文件,我们将这个文件处理下,将一些无语的代码删除,保留如下代码

image.gif编辑

        📓将src--views下的vue文件全部删除

image.gif编辑

        📓在views创建一个新的文件 IndexData.vue,并在里面写入如下代码

<template>
    <div>
        {{ a }}
    </div>
</template>
<script>
export default{
    data(){
        return{
            a:"123"
        }
    }
}
</script>
<style>
</style>

image.gif

       📓在src--router文件夹下 将该组件绑定路由

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: ()=>import("../views/IndexData.vue")
  },
]
const router = new VueRouter({
  routes
})
export default router

image.gif

       📓然后启动服务,当页面上出现123时间,就代表着配置成功

image.gif

5.配置第一个datav组件

       5.1 📓在src下的main.js文件里面,完全引入我们的datav组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import dataV from '@jiaminghi/data-view'  //导入datav框架
Vue.config.productionTip = false
Vue.use(dataV)  //添加到vue原型里去
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

image.gif

       5.2 📓在页面上使用我们的datav组件

<template>
    <div>
        <!-- 引入组件 -->
        <dv-water-level-pond :config="config" style="width:150px;height:200px" /> 
    </div>
</template>
<script>
export default{
    data(){
        return{
            config:{ //传入组件数据
                data:[66]
            }
        }
    }
}
</script>
<style>
</style>

image.gif

       5.3 📓当出现下方的效果时,就代表着使用成功

       image.gif编辑

6,设计主体框架

       📓我打算在indexdata.vue里作为组件的容器,在容器里设计骨架,将其他的内容作为骨架填入,代码如下

       

<template>
    <!-- 全屏容器 -->
    <dv-full-screen-container style="background-color: black;">
        <dv-border-box-11 title="香蕉麻花皮演示">
            <!-- 我这里将页面分为上中下三块,这是第一块 -->
            <div class="box">
                <!-- 在里面在分成左中右3块 -->
                <div class="box1">
                    <dv-border-box-12>dv-border-box-1</dv-border-box-12>
                </div>
                <div class="box1">
                    <dv-border-box-2>dv-border-box-1</dv-border-box-2>
                </div>
                <div class="box1">
                    <dv-border-box-10>dv-border-box-1</dv-border-box-10>
                </div>
            </div>
            <!-- 第二块 -->
            <div class="box">
                <!-- 在里面在分成左中右3块 -->
                <div class="box1">
                    <dv-border-box-9>dv-border-box-1</dv-border-box-9>
                </div>
                <div class="box1">
                    <dv-border-box-8>dv-border-box-1</dv-border-box-8>
                </div>
                <div class="box1">
                    <dv-border-box-7>dv-border-box-1</dv-border-box-7>
                </div>
            </div>
            <!-- 第三块 -->
            <div class="box">
                <!-- 在里面在分成左中右3块 -->
                <div class="box1">
                    <dv-border-box-2>dv-border-box-1</dv-border-box-2>
                </div>
                <div class="box1">
                    <dv-border-box-3>dv-border-box-1</dv-border-box-3>
                </div>
                <div class="box1">
                    <dv-border-box-8>dv-border-box-1</dv-border-box-8>
                </div>
            </div>
        </dv-border-box-11>
    </dv-full-screen-container>
</template>
<script>
export default {
    data() {
        return {
            config: { //传入组件数据
            }
        }
    }
}
</script>
<style scoped>
.box1 {
    width: 610px;
    height: 310px;
}
.box{
    display: flex;
    justify-content: space-between; 
    width: 98%;
    margin: auto;
    padding-top: 40px;
}
</style>

image.gif

      📓效果如下

image.gif

📓 后续我们只需要往骨架里面填充echarts或者是其他需要展示的代码就行

📓在提一嘴 datav需要将padding和margin的初始值设置为0,不然会出现样式问题

📓在commponents里新建文件夹index.css,在文件夹里写入内容

image.gif

📓在manin.js里引入这个css文件即可

image.gif

📓下期我们讲如何添加内容和使用moke来模拟数据

📓拜拜

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
3月前
|
人工智能 数据可视化 定位技术
DataV AI助手小技巧-如何制作PPT数据地图
“数据地图”是PPT汇报地区业务数据的最佳形式之一;以往制作数据地图需要用户有一定的编程和数据处理基础,制作门槛较高;随着DataV整合通义千问大模型能力之后,不懂编程和设计的用户也可以借助AI助手“零代码”制作数据地图,真正实现了人人可用的地图数据可视化。 进入大模型AI时代,人人可以变成职场跨界多面手!
11171 2
DataV AI助手小技巧-如何制作PPT数据地图
|
5月前
|
SQL 数据可视化 定位技术
见证数据的视觉奇迹——DataV Atlas
阿里云DataV的DataV-Atlas是一款专注于地理数据可视化的工具,提供时空数据分析和地图发布功能,适合快速创建地图并分享。与ArcGIS Server相比,DataV.GeoAtlas更侧重于数据可视化和云服务集成,适合非专业用户,而ArcGIS Server是全面的GIS服务平台,适合复杂分析和定制化应用。用户可通过阿里云免费试用DataV-Atlas,体验包括数据上传、地图制作和分析在内的功能。
见证数据的视觉奇迹——DataV Atlas
|
4月前
|
数据可视化 前端开发 数据挖掘
身怀绝技的开发者们,快来DataV玩转可视化组件,开启数据新视界!
理论学习之后,实践是检验知识的最好方式。建议你动手创建一个DataV项目,将所学的知识和技能应用到实际开发中。通过实践,你可以更好地理解和掌握DataV的使用技巧,并发现其中的乐趣和挑战。
|
5月前
|
数据可视化 搜索推荐 atlas
DataV Atlas深度解析与实战应用:打造个性化地理信息可视化
阿里云DataV的Atlas功能专注于地理信息可视化,提供范围选择、边界生成和层级展示等工具,助用户轻松创建专业地图应用。通过代码示例展示了如何用Geo组件展示中国省份销售数据,强调了数据安全和性能优化的重要性。DataV Atlas简化了复杂地理信息的展示,提升了数据洞察的直观性和美感。【6月更文挑战第19天】
547 3
|
6月前
|
Prometheus 监控 Cloud Native
用 DataV 展示 Prometheus 数据
本文介绍了如何将 Prometheus 数据接入 DataV 进行可视化展示。如果使用的是阿里云可观测监控中的 Prometheus 实例,或者自建的 Prometheus 开放了公网可访问的 HTTP API,那么可直接通过 API 将数据接入 DataV 展示。
350 0
|
6月前
|
JSON 数据可视化 定位技术
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
61 0
|
6月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
426 0
|
6月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
259 0
|
6月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
463 2
react+datav+echarts实现可视化数据大屏
|
数据可视化 容器
DataV构建大屏(全屏)数据展示页面
DataV构建大屏(全屏)数据展示页面
727 0