vue大屏展示代码从0 到1

1、基本骨架
2、填充内容
3、G2图
4、大屏数据展示组件库DataV 官网
1、基本骨架

<template><div id="parentDiv"><myHeader></myHeader><div id="container" class="flex-a-center-j-between"><div class="left"><div class="leftTop"></div><div class="leftCenter"></div><div class="leftRight"></div></div><div class="center">2</div><div class="right">3</div></div></div>
</template>

.flex-a-center-j-between {display: flex;justify-content: space-between;align-items: center;
}
#parentDiv {width: 100vw;height: 100vh;#container {width: 100vw;height: calc(100% - 80px);.left,.right {width: 300px;height: 100%;border: 2px solid red;}.center {flex: 1;height: 100%;border: 2px solid #000;}}
}

2、填充内容

<template><div id="parentDiv"><myHeader></myHeader><div id="container" class="flex-a-center-j-between"><div class="left"><dv-border-box-7 class="sideTop" :color="['#111112', 'green']"><div class="textCenter">echarts图1</div><chartLeftTop /></dv-border-box-7><dv-border-box-7 class="sideCenter" :color="['#111112', 'green']"><div class="textCenter">echarts图2</div><chartLeftCenter /></dv-border-box-7><dv-border-box-7 class="sideRight" :color="['#111112', 'green']"><div class="textCenter">echarts图3</div><chartLeftBottom /></dv-border-box-7></div><dv-border-box-7 class="center" :color="['#111112', 'green']"><div class="moneyDiv"><money /></div><div class="table"><myTable /></div></dv-border-box-7><div class="right"><dv-border-box-7 class="sideTop" :color="['#111112', 'green']"><div class="textCenter">echarts图4</div><chartRightTop /></dv-border-box-7><dv-border-box-7 class="sideCenter" :color="['#111112', 'green']"><div class="textCenter">echarts图5</div><chartRightCenter /></dv-border-box-7><dv-border-box-7 class="sideRight" :color="['#111112', 'green']"><div class="textCenter">echarts图6</div><chartRightBottom /></dv-border-box-7></div></div></div>
</template>
<script>


```css
.flex-a-center-j-between {display: flex;justify-content: space-between;align-items: center;
}
#parentDiv {width: 100vw;height: 100vh;overflow: hidden;#container {width: 100vw;height: calc(100% - 3.125vw);padding: 10px;background: #050505;.left,.right {width: 350px;height: 100%;// border: 2px solid red;}.center {flex: 1;height: 100%;margin: 0px 10px;}.sideTop,.sideCenter,.sideRight {height: 32%;width: 100%;// border: 2px solid #000;margin-bottom: 5px;padding: 5px;background: #111112;}}
}
.textCenter {text-align: center;color: #fff;
}
.moneyDiv {height: 40%;// border: 2px solid red;color: #fff;
}
.table {height: calc(60% - 10px);margin-top: 20px;// border: 1px solid red;
}

3、G2 图

<div id="chartRightTop"></div>

import DataSet from "@antv/data-set";
import { Chart } from "@antv/g2";
export default {name: "chartRightTop",props: ["num"],data() {return {renderTime: 0,loading: true,chartData: [{ item: "事例一", count: 40, percent: 0.4 },{ item: "事例二", count: 21, percent: 0.21 },{ item: "事例三", count: 17, percent: 0.17 }]};},mounted() {this.$nextTick(() => {this.initChar(); //饼图});},methods: {//图表initChar() {const chart = new Chart({container: "chartRightTop",autoFit: true,height: 500});var data = this.chartData;chart.data(data);chart.scale("percent", {formatter: val => {val = val * 100 + "%";return val;}});chart.coordinate("theta", {radius: 0.75,innerRadius: 0.6});chart.tooltip({showTitle: false,showMarkers: false,itemTpl:'<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'});// 辅助文本chart.annotation().text({position: ["50%", "50%"],content: "主机",style: {fontSize: 14,fill: "#8c8c8c",textAlign: "center"},offsetY: -20}).text({position: ["50%", "50%"],content: "200",style: {fontSize: 20,fill: "#8c8c8c",textAlign: "center"},offsetX: -10,offsetY: 20}).text({position: ["50%", "50%"],content: "台",style: {fontSize: 14,fill: "#8c8c8c",textAlign: "center"},offsetY: 20,offsetX: 20});chart.interval().adjust("stack").position("percent").color("item").label("percent", percent => {return {content: data => {return `${data.item}: ${percent * 100}%`;}};}).tooltip("item*percent", (item, percent) => {percent = percent * 100 + "%";return {name: item,value: percent};});chart.interaction("element-active");chart.render();}}
};

#chartRightTop {width: 100%;height: 90%;
}

4、大屏数据展示组件库DataV
（1）、入门

1、安装：
npm install @jiaminghi/data-view
2、使用
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
3、按需引入
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

（2）、使用

1、全屏容器
<dv-full-screen-container>content</dv-full-screen-container>
建议在全屏容器内使用百分比搭配flex进行布局
2、Loading加载
<dv-loading>Loading...</dv-loading>
数据尚未加载完成时，可以显示Loading效果，增强用户体验。
3、边框color="['red', 'green']"                  backgroundColor="blue"  背景色
<dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" >
dv-border-box-1
</dv-border-box-1>
4、5、8 ： reverse="true"
<dv-border-box-4 :reverse="true">dv-border-box-4</dv-border-box-4>  反的
8  ： dur='12'   时间   默认3
11： title="dv-border-box-11" 标题    :titleWidth="370"   标题长度
4、装饰
<dv-decoration-1 :color="['red', 'green']" />
color   自定义颜色style="width:200px;height:5px;"
dur 单次动画时长(秒)   :reverse="true"      反转
5、图表
<dv-charts :option="option" />

只写了一个大的骨架，样式不是很标准，有需要写大屏的伙伴可以再简单的调整一下样式。

vue大屏展示代码从0 到1相关推荐

vue大屏展示高度自适应
vue大屏展示获取当前屏幕盖度 <template><div ref="bigshow"></div> &l ...
搭建VUE大屏展示项目（一）环境搭建
文章目录环境安装搭建项目工程整理问题 github地址环境安装升级npm npm install -g npm 切换到淘宝镜像 npm config set registry " ...
Vue大数据可视化（大屏展示）方案升级，发布全新Vue3版本
千呼万唤始出来,终于将原先的 Vue2 升级到了 Vue3,并且使用了 Ts,部分界面使用了 Tsx 的写法,欢迎大家来点个星星~ 项目地址:Vue3 可视化大屏展示,点颗星星吧~ 界面展示(这个是动 ...
VUE 项目实现大屏展示的响应式
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应. 首先下载lodash插件. npm i ...
如何使用 WEB 技术编写前端代码，实现大屏展示和地图显示功能
使用 WEB 技术编写前端代码实现大屏展示和地图显示功能可以采用以下步骤: 使用 HTML.CSS.JavaScript 等前端技术构建页面布局和样式. 使用 JavaScript 库或框架,如 jQ ...
vue中is属性搭配vuedraggable插件实现可拖动可视化大屏展示组件的自定义配置功能
最近有这样一个需求,将大屏上展示的东西都封装成独立的组件让用户自己可以自定义配置自己的组件位置及想要展示的组件,第一个我就想到通过is来实现,分享下我的思路及部分代码供大家参考. 先看下大概布局: 如 ...
web大屏展示用到的组件_从零开始设计数据大屏—基于Vue
为什么要做数据大屏? 现如今的大数据逐渐发挥出了它的力量,并无形的改变着我们的生活.但大数据在不是从事技术开发的人来说没有很明显的感受,很多人对大数据的概念只是停留在每年网易云音乐对个人听歌的汇总上. ...
Vue中如何进行数据可视化大屏展示
Vue中如何进行数据可视化大屏展示在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环.通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策.在Vue ...
Vue + DataV + SignalR 数字化大屏展示
个人觉得大屏展示其实很简单,噱头多过技术含量,下面使用了 DataV (不是阿里的那个DataV哈,具体链接在这里)开发了一个大屏展示,使用了css flex弹性布局,使用了DataV的一些比较酷炫的 ...

vue大屏展示代码从0 到1

vue大屏展示代码从0 到1相关推荐

最新文章

热门文章

vue大屏展示 代码 从0 到1

vue大屏展示 代码 从0 到1相关推荐

最新文章

热门文章

vue大屏展示代码从0 到1

vue大屏展示代码从0 到1相关推荐