Vue3实战笔记（46）—Vue 3高效开发定制化Dashboard的权威手册

---

前言

后台管理系统中的Dashboard是一种图形化的信息显示工具，通常用于提供一个特定领域或系统的概况。它可以帮助用户监控和分析数据，快速获取重要信息。可以帮助用户监控业务状况、分析数据、获取关键信息和管理资源。通过合理的设计和使用，Dashboard可以大大提高工作效率和数据可视化的效果。

---

Dashboard开发

利用之前封装好的Echarts组件来做个Dashboard。
只需要更改主页Home.vue:

<template>
 <div class="smart_house pb-5">
 <v-row >
            <v-col cols="12" sm="3">
                <v-card title="摄像机" class="elevation-10 ma-4">
                    <v-tabs v-model="tab" align-tabs="end" class="mx-4" color="primary">
                        <v-tab :value="1">客厅</v-tab>
                        <v-tab :value="2">卧室</v-tab>
                    </v-tabs>
                    <v-window v-model="tab">
                        <v-window-item :value="1">
                            <div class="camera_wrap ma-4">
                                <v-img :aspect-ratio="16 / 9" height="365" cover
                                    src="https://demos.creative-tim.com/argon-dashboard-chakra/static/media/ImageArchitect1.032614a5.png" />
                                <!-- <Vr360 /> -->
                                <div class="label"><span /> 直播</div>
                                <div class="label lk">4K 分辨率</div>
                            </div>
                        </v-window-item>
                        <v-window-item :value="2">
                            <div class="camera_wrap ma-4">
                                <v-img :aspect-ratio="16 / 9" height="365" cover
                                    src="https://demos.creative-tim.com/vuetify-material-dashboard-pro/img/bg-smart-home-2.975d8868.jpg" />
                                <div class="label"><span /> 直播</div>
                                <div class="label lk">4K 分辨率</div>
                            </div>
                        </v-window-item>
                    </v-window>
                </v-card>
            </v-col>

  

            <v-col cols="12" sm="3" >
                <v-card class="mx-4 ma-4" height="497" subtitle="书籍旭日图" title="书籍">
                    <EChartsSunburstBook />
            </v-card>
        </v-col>

            <v-col cols="12" sm="2">
                <v-hover v-slot="{ isHovering, props }">
                <v-card class="mx-auto ma-4" max-width="344" height="155" subtitle="大总管" title="山花" v-bind="props" :elevation="isHovering ? 24 : 6">
                    <template v-slot:prepend>
                        <v-avatar color="blue-darken-2">
                            <v-img alt="John" src="@/assets/images/avatar_big.png"></v-img>
                        </v-avatar>
                    </template>
                    <!-- <template v-slot:append>
                        <v-avatar size="24">
                            <v-img alt="John" src="@/assets/images/avatar.png"></v-img>
                        </v-avatar>
                    </template> -->
                    <template v-slot:append>
                        <v-icon color="success" icon="mdi-cloud"></v-icon>
                    </template>
                    <v-card-text>寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！</v-card-text>
                </v-card>
            </v-hover>

                <v-hover v-slot="{ isHovering, props }">
                <v-card class="mx-auto ma-4" max-width="344" height="155" subtitle="有朋自远方来" title="访客"  v-bind="props" :elevation="isHovering ? 24 : 6">
                    <template v-slot:prepend>
                        <v-avatar color="blue-darken-2">
                            <v-img alt="John" src="@/assets/images/avatar_big.png"></v-img>
                        </v-avatar>
                    </template>
                    <template v-slot:append>
                        <v-icon color="success" icon="mdi-barley"></v-icon>
                    </template>
                    <v-card-text>江南无所有，聊赠一枝春</v-card-text>
                </v-card>
            </v-hover>


     
            <v-hover v-slot="{ isHovering, props }">
                <v-card class="mx-auto ma-4" max-width="344" height="155" subtitle="云深不知处" title="天气" v-bind="props" :elevation="isHovering ? 24 : 6">
                    <template v-slot:prepend>
                        <v-avatar color="blue-darken-2">
                            <v-img alt="John" src="@/assets/images/avatar_big.png"></v-img>
                        </v-avatar>
                    </template>
                    <template v-slot:append>
                        <v-icon color="success" icon="mdi-weather-night"></v-icon>
                    </template>
                    <v-card-text>东边日出西边雨，道是无晴却有晴。</v-card-text>
                </v-card>
            </v-hover>
            </v-col>
        

            <v-col cols="12" sm="4" >
                
                    <v-card class="mx-4 ma-4" height="497" subtitle="基础仪表盘" title="仪表盘">
                        <EChartsGaugeSimple></EChartsGaugeSimple>
                    
                </v-card>
            </v-col>
            
        </v-row>
    

    <v-row>
        <v-col cols="12" sm="6" >
                
                <v-card class="mx-4 ma-4" height="497" subtitle="折线图堆叠" title="折线图">
                    <EChartSlineStack></EChartSlineStack>
                    <!-- <EChartsGaugeClock/> -->
                
            </v-card>
        </v-col>

        <v-col cols="12" sm="6" >
            
                <v-card class="mx-4 ma-4" height="497" subtitle="柱状图框选" title="柱状图">
                    <EChartsBarBrush></EChartsBarBrush>
                
            </v-card>
        </v-col>
        
    </v-row>
    </div>
</template>

运行效果：

---

总结

乐观面对生活，一切都会变得美好。