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

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦

接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦

1,新建组件

       📓 我们在ser-views文件夹下新建9个vue组件,如下图所示,我给编号为1到9

image.gif编辑

        📓在组件里写入内容我是第一块...一次类推,一直到第九块

<template>
    <div>我是第一块</div>
</template>
<script>
export default {
    data() {
    },
    mounted(){
    }
}
</script>
<style scoped>
</style>

image.gif

2,将我们新建好的组件全部依次填入到我们的主容器indexdata里去

       📓 在主容器中引入组件,并注册

image.gif

        📓现在需要就是拼图,将我么需要展示在大屏哪个位置的组件依次的放入到我们的大屏骨架里去

image.gif编辑

         📓最后展示出来的效果就是

image.gif

这里因为字体是黑色的,所以我把黑色背景换成了白色,只为了演示而已

3.内容填充

        📓现在骨架已经搭好,所有的组件已经在他们改在的位置了,这时候,我们需要的就是,在每个小模块的组件里使用echarts和请求接口了

代码如下

<template>
    <div class="box">
        <dv-loading style="color: aqua;" v-if="loading">加载中</dv-loading>
        <div ref="app" class="echarts" v-else></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import * as requests from "./api/index"
export default {
    data() {
        return {
            xdata: "",
            ydata: "",
            loading: true
        }
    },
    methods: {
        async getrequests() {
            const datalist = await requests.info()
            if (datalist.data.code == 200) {
                this.loading = false
                this.xdata = Object.keys(datalist.data.data)
                this.ydata = Object.values(datalist.data.data)
                this.$nextTick(() => {
                    this.getdata()
                })
            }
        },
        getdata() {
            var myChart = echarts.init(this.$refs.app);
            var option;
            option = {
                xAxis: {
                    type: 'category',
                    data: this.xdata
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.ydata,
                        type: 'bar'
                    }
                ]
            };
            option && myChart.setOption(option);
        }
    },
    mounted() {
        setInterval(() => { 
            this.getrequests() }, 60000)
        this.getrequests()
    }
}
</script>
<style scoped>
.box {
    width: 100%;
    height: 100%;
}
.echarts {
    width: 100%;
    height: 340px
}
</style>

image.gif

        📓我们看下主屏幕的效果

image.gif

        📓 ok现在算是完成了,现在目前设置的是一小时请求一次接口更新一次数据,其他的8个模块和第一个模块一样的调节,照常写即可。这里我就不多写了,直接看效果吧

image.gif

         📓最后的效果就是这样滴 我下面会把源码放出来,这套完全可以作为公司的项目来使用,哈哈 拜拜

git地址

git地址

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