前言

后臺(tái)管理系統(tǒng)中的Dashboard是一種圖形化的信息顯示工具，通常用于提供一個(gè)特定領(lǐng)域或系統(tǒng)的概況。它可以幫助用戶監(jiān)控和分析數(shù)據(jù)，快速獲取重要信息?？梢詭椭脩舯O(jiān)控業(yè)務(wù)狀況、分析數(shù)據(jù)、獲取關(guān)鍵信息和管理資源。通過合理的設(shè)計(jì)和使用，Dashboard可以大大提高工作效率和數(shù)據(jù)可視化的效果。

一、Dashboard開發(fā)

利用之前封裝好的Echarts組件來做個(gè)Dashboard。
只需要更改主頁(yè)Home.vue:

<template>
 <div class="smart_house pb-5">
 <v-row >
            <v-col cols="12" sm="3">
                <v-card title="攝像機(jī)" 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="書籍旭日?qǐng)D" 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>尋尋覓覓，冷冷清清，凄凄慘慘戚戚。乍暖還寒時(shí)候，最難將息。三杯兩盞淡酒，怎敵他、晚來風(fēng)急！</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="有朋自遠(yuǎn)方來" 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>江南無所有，聊贈(zèng)一枝春</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="基礎(chǔ)儀表盤" 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>

運(yùn)行效果：

image.png

總結(jié)

樂觀面對(duì)生活，一切都會(huì)變得美好。