VUE3+DataV数字化可视化大屏程序源码

一、项目模块划分

可以将项目划分为标题行（moduletitle)、第一行（modulefrist)、第二行(modulesecond)。

在home.vue中加入

<script setup>

     import{ref,reactive} from 'vue';

     import moduletilte from './moduletilte.vue';

     import modulefrist from './modulefrist.vue';

     import modulesecond from './modulesecond.vue';

</script>

<template>

  <dv-full-screen-container>

        <!--标题行-->

        <moduletilte/>

        <!--第一行---->

        <modulefrist/>

        <!--第二行---->

        <modulesecond/>

   </dv-full-screen-container>

</template>

二、大屏头部标题模块

在moduletitle.vue中加入

<script setup>

      import{ref,reactive} from 'vue'

</script>

<template>

  <!--标题行-->

  <div class="module-box">

    <div style="flex:0 1 30%">

        <div small-bg>

            <dv-decoration-10 style="width:100%;height:5px;" />

        </div>

    </div>

    <div style="flex:0 1 40%">

        <div class="d-flex">

            <dv-decoration8 style="width:100px;height:50px;flex:1;" />

            <div class="index-title">近零碳校园能碳监控平台</div>

            <dv-decoration8 :reverse="true" style="width:100px;height:50px;flex:1" />

        </div>

    </div>

    <div style="flex: 0 1 30%">

         <div small-bg>

            <dv-decoration-10 style="width:100%;height:5px;" />

         </div>

     </div>

  </div>

</template>

三、第一行模块的再划分

在modulefrist.vue中添加：

<script setup>

     import piechart from './chart/piechart.vue';

     import radarchart from './chart/radarchart.vue';

     import scrollboard from './chart/scrollboard.vue';

     import circlechart from './chart/Circlechart.vue';

     import capsulechart  from './chart/capsulechart.vue';

     import waterlevel  from './chart/waterlevel.vue';

     import{ref,reactive} from 'vue'

</script>

<template>

  <!--第一行-->

    <div class="module-box">

        <div style="flex:0 1 20%">

            <piechart/>

        </div>

        <div style="flex:0 1 20%">

            <radarchart/>

        </div>

        <div style="flex: 0 1 40%">

          <div demo-bg>

              <dv-border-box8 :dur="5" style="width: 100%;height: 300px;">

                      <circlechart/>

                 <div class="d-flex" style="height: 150px;padding: 0 20px;">

                     <div style="flex: 2;">

                        <capsulechart/>

                     </div>

                     <div style="flex: 1;">

                        <waterlevel/>

                    </div>

                 </div>

              </dv-border-box8>

          </div>

        </div>

        <div style="flex: 0 1 20%">

             <scrollboard/>

        </div>

     </div>

</template>

按照第一行模块的结构在划分为玫瑰饼图、雷达图、百分比环图、胶囊柱图、水位图以及轮播表等模块。

四、玫瑰饼图模块

在piechart.vue中添加：

 <script setup>

     import{ref,reactive} from 'vue'

      const option = ref ({

           title: {

               text: '校园分类建筑实时能耗占比',

               style:{

                   fill:'#fff',

                   fontsize:14,

               }    

           },

           Color:['#e062ae','#67e0e3','#8378ea','#37a2da','#9d96f5','#ffdb5c'],

           series: [

           {