NetViewer/viewer/src/views/dashoard/chartView.vue

<template>
    <div class="dashboard-container">
        <el-card shadow="hover" style="height: 600px; width: 100%; position: relative">
            <!-- 加载状态 -->
            <div v-loading="loading" element-loading-text="数据加载中..."
                element-loading-background="rgba(255, 255, 255, 0.8)" style="height: 100%; width: 100%">

                <!-- 数据展示区域 -->
                <div v-show="!loading" class="chart-container" >
                    <!-- 第一行：关键指标 -->
                    <el-row :gutter="20" class="mb-20" >
                        <el-col :span="8">
                            <div class="chart-title">节点类型分布</div>
                            <div ref="nodePieChart" style="height: 250px; width: 500px"></div>
                        </el-col>
                        <el-col :span="16">
                            <div class="chart-title">节点度数分布</div>
                            <div ref="degreeBarChart" style="height: 250px; width: 950px"></div>
                        </el-col>
                    </el-row>

                    <!-- 第二行：链式分析 -->
                    <el-row>
                        <el-col :span="24">
                            <div class="chart-title">链式结构分析</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" class="mb-20">
                        <el-col :span="4">
                            <el-statistic title="总链数" :value="data.chains.num" style="width: 100%; padding-top: 40%; text-align: center;"/>
                        </el-col>
                        <el-col :span="4">
                            <el-statistic title="平均长度" :value="data.chains.averageLength" style="width: 100%; padding-top: 40%; text-align: center;"/>
                        </el-col>
                        <el-col :span="16">
                            <div ref="chainChart" style="width: 950px; height: 250px"></div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import { ElLoading } from 'element-plus'
import { getData } from '@/api/axios.js'

const props = defineProps({
    result: {
        type: Number,
        required: true,
    }
})
const loading = ref(true)
const data = ref({
    sNodesNum: 0,
    dNodesNum: 0,
    iNodesNum: 0,
    sDegree: [],
    dDegree: [],
    iDegree: [],
    chains: {
        num: 0,
        averageLength: 0,
        numByLength: []
    }
})

// DOM引用
const nodePieChart = ref(null)
const degreeBarChart = ref(null)
const chainChart = ref(null)

// 图表颜色配置
const colorPalette = [
    '#5470c6', '#91cc75', '#fac858',
    '#ee6666', '#73c0de', '#3ba272',
    '#fc8452', '#9a60b4', '#ea7ccc'
]

// 获取数据（模拟API调用）
const fetchData = async () => {
    try {
        // 这里替换为实际的API调用
        const response = await getData('/generateGraph', {method: 'chart', result: props.result})
        data.value = response.data
    } finally {
        loading.value = false
        nextTick()
        initCharts()
    }
}

// 初始化图表
const initCharts = () => {
    initNodePieChart()
    initDegreeChart()
    initChainChart()
}

// 节点类型饼图
const initNodePieChart = () => {
    const chart = echarts.init(nodePieChart.value)
    const option = {
        color: colorPalette,
        tooltip: { trigger: 'item' },
        legend: { top: 'bottom' },
        series: [{
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
                { value: data.value.sNodesNum, name: 'S节点' },
                { value: data.value.dNodesNum, name: 'D节点' },
                { value: data.value.iNodesNum, name: 'I节点' }
            ],
            label: { show: false },
            emphasis: {
                label: { show: true }
            }
        }],
    }
    chart.setOption(option)
}

// 度数分布柱状图
const initDegreeChart = () => {
    const chart = echarts.init(degreeBarChart.value)
    const option = {
        color: colorPalette,
        tooltip: { trigger: 'axis' },
        xAxis: {
            type: 'category',
            data: data.value.sDegree.map((_, i) => `度数 ${i}`)
        },
        yAxis: { type: 'value' },
        legend: { data: ['S节点', 'D节点', 'I节点'] },
        series: [
            { name: 'S节点', type: 'bar', data: data.value.sDegree },
            { name: 'D节点', type: 'bar', data: data.value.dDegree },
            { name: 'I节点', type: 'bar', data: data.value.iDegree }
        ]
    }
    chart.setOption(option)
}

// 链式结构分析
const initChainChart = () => {
    const chart = echarts.init(chainChart.value)

    //横坐标，最后一个是长度大于等于5
    const xAxisData = data.value.chains.numByLength.map((_, i) => {
        if(i == data.value.chains.numByLength.length - 1){
            return `长度 ${i + 1} 以上`
        }else{
            return `长度 ${i + 1}`
        }
    })

    const option = {
        color: colorPalette,
        tooltip: { trigger: 'axis' },
        xAxis: {
            type: 'category',
            data: xAxisData,
        },
        yAxis: { type: 'value' },
        series: [{
            type: 'bar',
            data: data.value.chains.numByLength,
            itemStyle: { borderRadius: 5 }
        }]
    }
    chart.setOption(option)
}


onMounted(fetchData)
</script>

<style scoped>
.dashboard-container {
    padding: 20px;
}

.chart-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--el-text-color-primary);
}

.chain-stats {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.mb-20 {
    margin-bottom: 20px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .chain-stats {
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>