vue大屏展示 代码 从0 到1

1、基本骨架
2、填充内容
3、G2图
4、大屏数据展示组件库DataV 官网
5、优秀的大屏展示效果 lisi 123
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" />

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