khyznh-ui/src/components/HomeComponents/stationPie.vue

<template>
    <div class="stationEchartsClass">
        <div class="lineEchartsClass">
            <div class="titleBg">
                <div class="titleFont">电子站台统计</div>
            </div>
            <div class="divContent"
                style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;padding-right: 1vw;">
                <div style="display: flex;flex-direction: row;margin-top: 1vh;padding-left: 1vw;">
                    <div ref="stationchart" style="width:10vw;height: 20vh;"></div>
                    <div style="display: flex;flex-direction: column;">
                        <div class="countDiv"
                            style="display: flex;flex-direction: column;justify-content: space-between;">
                            <div><img style="width: 2vw;height: 1vh;" src="@/assets/images/homeImages/up.png"></div>
                            <div style="display: flex;flex-direction: row;justify-content: space-between;padding-left: 0.5vw;padding-right: 1vw;">
                                <div class="typeClass">
                                    总装备数
                                </div>
                                <div class="countClass" style="color: #FEF822;">
                                    80
                                </div>
                            </div>
                            <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;"
                                    src="@/assets/images/homeImages/bottom.png"></div>
                        </div>
                        <div class="countDiv"
                            style="display: flex;flex-direction: column;justify-content: space-between;margin-top: 0.5vh;">
                            <div><img style="width: 2vw;height: 1vh;" src="@/assets/images/homeImages/up.png"></div>
                            <div style="display: flex;flex-direction: row;justify-content: space-between;padding-left: 0.5vw;padding-right: 1vw;">
                                <div class="typeClass">
                                    在线设备
                                </div>
                                <div class="countClass" style="color: #22FE31;">
                                    1
                                </div>
                            </div>
                            <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;"
                                    src="@/assets/images/homeImages/bottom.png"></div>
                        </div>
                        <div class="countDiv"
                            style="display: flex;flex-direction: column;justify-content: space-between;margin-top: 0.5vh;">
                            <div><img style="width: 2vw;height: 1vh;" src="@/assets/images/homeImages/up.png"></div>
                            <div style="display: flex;flex-direction: row;justify-content: space-between;padding-left: 0.5vw;padding-right: 1vw;">
                                <div class="typeClass">
                                    箱体总数
                                </div>
                                <div class="countClass" style="color: #FEF822;">
                                    3200
                                </div>
                            </div>
                            <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;"
                                    src="@/assets/images/homeImages/bottom.png"></div>
                        </div>
                        <div class="countDiv"
                            style="display: flex;flex-direction: column;justify-content: space-between;margin-top: 0.5vh;">
                            <div><img style="width: 2vw;height: 1vh;" src="@/assets/images/homeImages/up.png"></div>
                            <div style="display: flex;flex-direction: row;justify-content: space-between;padding-left: 0.5vw;padding-right: 1vw;">
                                <div class="typeClass">
                                    空闲箱体
                                </div>
                                <div class="countClass" style="color: #22FE31;">
                                    3100
                                </div>
                            </div>
                            <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;"
                                    src="@/assets/images/homeImages/bottom.png"></div>
                        </div>
                    </div>

                    <!-- <div style="width:10vw;margin-left: 1vw;padding-right: 1vw;">
                        <div
                            style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;">
                            <div class="stationkeyClass">设备总数</div>
                            <div class="stationvalueClass">80</div>
                            <div class="stationunitClass">台</div>
                        </div>
                        <img class="imageDiv" src="@/assets/images/home/Bg(4).png" />
                        <div
                            style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
                            <div class="stationkeyClass">在线设备</div>
                            <div class="stationvalueClass">1</div>
                            <div class="stationunitClass">台</div>
                        </div>
                        <img class="imageDiv" src="@/assets/images/home/Bg(7).png" />
                        <div
                            style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
                            <div class="stationkeyClass">箱体总数</div>
                            <div class="stationvalueClass">3200</div>
                            <div class="stationunitClass">台</div>
                        </div>
                        <img class="imageDiv" src="@/assets/images/home/Bg(5).png" />
                        <div
                            style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
                            <div class="stationkeyClass">空闲箱体</div>
                            <div class="stationvalueClass">3100</div>
                            <div class="stationunitClass">台</div>
                        </div>
                        <img class="imageDiv" src="@/assets/images/home/Bg(6).png" />
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script setup name="Index" lang="ts">
import * as echarts from 'echarts';

const stationchart = ref();

const drawEchart = () => {
    let echartsObj = echarts.init(stationchart.value, "macarons");
    var dateArray = getRecentDays();
    var option = {
        color: ['#707070', '#0EEFFF'],
        title: {
            // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
            // 例如： `示例
            //   这里的文字会变为第二行(因为会保留格式)
            text: '75%',
            subtext: "在线率",
            left: "center",//对齐方式居中
            top: "40%",//距离顶部
            textStyle: {//文字配置
                color: "#ffffff",//文字颜色
                fontSize: 30,//字号
                align: "center"//对齐方式
            },
            subtextStyle: {
                color: "#C1D2E4"
            }
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['65%', '80%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 25, name: 'Search Engine' },
                    { value: 75, name: 'Direct' },
                ]
            }
        ]
    };
    echartsObj.setOption(option);
}

const getRecentDays = () => {
    const oneDay = 24 * 60 * 60 * 1000; // 这里定义一天的毫秒数
    const resultArray = [];
    for (let i = 6; i >= 0; i--) {
        const currentDate = new Date(Date.now() - i * oneDay); // 计算出每天的日期
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份需要补零
        const day = String(currentDate.getDate()).padStart(2, "0"); // 日期也需要补零
        const formattedDate = `${month}-${day}`; // 格式化日期为 yyyy-mm-dd 的形式
        resultArray.push(formattedDate);
    }
    return resultArray;
}


onMounted(() => {
    drawEchart();
})
</script>
<style lang="scss">
.stationEchartsClass {
    height: 20vh;
    width: 20vw;

    .titleBg {
        background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
        background-size: 100% 100%;
    }

    .titleFont {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 4vh;
        text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-left: 2vw;
        letter-spacing: 5px;
    }

    .divContent {
        background: url("@/assets/images/homeImages/contentBg.png") no-repeat;
        background-size: 100% 100%;
        width: 20vw;
        height: 22vh;
    }

}

.countDiv {
    width: 8vw;
    height: 4vh;
    background-color: #375785;
}

.countClass {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 5px;
    text-align: right;
    font-style: normal;
    text-transform: none;
}

.typeClass {
    font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
    font-weight: normal;
    font-size: 14px;
    color: #FFFFFE;
    line-height: 24px;
    letter-spacing: 5px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.stationkeyClass {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    line-height: 15px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.stationvalueClass {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 24px;
    color: #000000;
    line-height: 11px;
    text-align: right;
    font-style: normal;
    text-transform: none;
}

.stationunitClass {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 12px;
    color: #000000;
    line-height: 11px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.imageDiv {
    width: 9vw;
    margin-top: 1vh;
}
</style>