baozhida-building-system/src/views/system/video/modules/sameDay.vue

<template>
    <div class="_runnin">
        <HeadlineTag value="性能统计"></HeadlineTag>
        <div class="_runnin_mains">
            <!-- 修正引用名称，与脚本里保持一致 -->
            <div class="_runnin_mains_item">
                <div ref="chartRefCPU" style="width: 140px;height: 140px;"></div>
                <span style="margin-top: 10px;font-weight: bold;">CPU</span>
            </div>
            <div class="_runnin_mains_item">
                <div ref="chartRefRAM" style="width: 140px;height: 140px;"></div>
                <span style="margin-top: 10px;font-weight: bold;">RAM</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from 'echarts'
import 'echarts-liquidfill';
import HeadlineTag from '@/components/HeadlineTag'
const chartRefCPU = ref(null);
const chartRefRAM = ref(null);
let chartInstanceCPU = null;
let chartInstanceRAM = null;

const initCPUDrop = () => {
    // 检查 DOM 元素是否存在
    if (chartRefCPU.value) {
        var value = 0.45;
        chartInstanceCPU = null
        chartInstanceCPU = echarts.init(chartRefCPU.value);
        chartInstanceCPU.setOption({
            series: [
                {
                    type: 'liquidFill', //水位图
                    radius: '100%', //显示比例
                    center: ['50%', '50%'], //中心点
                    amplitude: 20, //水波振幅
                    data: [value, value], // data个数代表波浪数
                    color: [
                        {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#446bf5',
                                },
                                {
                                    offset: 1,
                                    color: '#2ca3e2',
                                },
                            ],
                            globalCoord: false,
                        },
                    ], //波浪颜色
                    backgroundStyle: {
                        borderWidth: 1, //外边框
                        color: 'RGBA(51, 66, 127, 0.7)',
                    },
                    label: {
                        //标签设置
                        position: ['50%', '45%'],
                        formatter: '50%', //显示文本,
                        textStyle: {
                            // 修改字体大小，例如改为 20px
                            fontSize: '20px',
                            color: '#fff',
                        },
                    },
                    outline: {
                        borderDistance: 0,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#112165',
                        },
                    },
                },
            ],
        });
    }
}
const initRAMDrop = () => {
    // 检查 DOM 元素是否存在
    if (chartRefRAM.value) {
        var value = 0.65;
        chartInstanceRAM = null
        chartInstanceRAM = echarts.init(chartRefRAM.value);
        chartInstanceRAM.setOption({
            series: [
                {
                    type: 'liquidFill', //水位图
                    radius: '100%', //显示比例
                    center: ['50%', '50%'], //中心点
                    amplitude: 20, //水波振幅
                    data: [value, value], // data个数代表波浪数
                    // 修改波浪颜色
                    color: [
                        {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    // 例如改成红色系
                                    color: '#ff4444',
                                },
                                {
                                    offset: 1,
                                    // 例如改成橙色系
                                    color: '#ff8800',
                                },
                            ],
                            globalCoord: false,
                        },
                    ],
                    backgroundStyle: {
                        borderWidth: 1, //外边框
                        color: 'RGBA(51, 66, 127, 0.7)',
                    },
                    label: {
                        //标签设置
                        position: ['50%', '45%'],
                        // 修改 formatter 为函数，动态显示百分比
                        formatter: () => `${Math.round(value * 100)}%`,
                        textStyle: {
                            // 修改字体大小，例如改为 20px
                            fontSize: '20px',
                            color: '#fff',
                        },
                    },
                    outline: {
                        borderDistance: 0,
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#112165',
                        },
                    },
                },
            ],
        });
    }
}
// 生命周期
onMounted(() => {
    nextTick(() => {
        initCPUDrop()
        initRAMDrop()
    })
});
onUnmounted(() => {
    chartInstanceCPU.clear()
    chartInstanceRAM.clear()
    chartInstanceCPU = null
    chartInstanceRAM = null
})
// 窗口自适应
window.addEventListener('resize', () => {
    chartInstanceRAM?.resize();
    chartInstanceCPU?.resize();
});
</script>

<style lang="scss" scoped>
._runnin {
    display: flex;
    flex-direction: column;

    &_mains {
        flex: 1;
        margin: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 30px;

        &_item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #FFF;
        }
    }
}
</style>