98 lines
3.7 KiB
Vue
Executable File
98 lines
3.7 KiB
Vue
Executable File
<template>
|
||
<div class="bg-white rounded-lg relative mb-10">
|
||
<div ref="architectureChart" class="w-full h-[500px]"></div>
|
||
<p class="text-gray-600 mt-4 text-center">核心架构图：展示了应用核心、通信协议层、音频处理系统、用户界面系统、IoT设备管理等模块的关系</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
|
||
const architectureChart = ref(null);
|
||
|
||
onMounted(() => {
|
||
if (architectureChart.value) {
|
||
const chart = echarts.init(architectureChart.value);
|
||
chart.setOption({
|
||
animation: false,
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {c}'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 'center',
|
||
data: ['核心', '主要模块', '子模块']
|
||
},
|
||
series: [
|
||
{
|
||
name: '架构图',
|
||
type: 'graph',
|
||
layout: 'force',
|
||
data: [
|
||
{ name: '应用核心', value: 'Application', category: 0, symbolSize: 70 },
|
||
{ name: '通信协议层', value: 'Protocols', category: 1, symbolSize: 50 },
|
||
{ name: '音频处理系统', value: 'Audio Processing', category: 1, symbolSize: 50 },
|
||
{ name: '用户界面系统', value: 'UI System', category: 1, symbolSize: 50 },
|
||
{ name: 'IoT设备管理', value: 'IoT Management', category: 1, symbolSize: 50 },
|
||
{ name: 'WebSocket', value: 'WebSocket', category: 2, symbolSize: 30 },
|
||
{ name: 'MQTT', value: 'MQTT', category: 2, symbolSize: 30 },
|
||
{ name: '音频编解码', value: 'Audio Codecs', category: 2, symbolSize: 30 },
|
||
{ name: 'VAD检测', value: 'VAD', category: 2, symbolSize: 30 },
|
||
{ name: '唤醒词检测', value: 'Wakeword', category: 2, symbolSize: 30 },
|
||
{ name: 'GUI界面', value: 'GUI', category: 2, symbolSize: 30 },
|
||
{ name: 'CLI界面', value: 'CLI', category: 2, symbolSize: 30 },
|
||
{ name: '设备抽象', value: 'Device Abstract', category: 2, symbolSize: 30 },
|
||
{ name: '智能家居', value: 'Smart Home', category: 2, symbolSize: 30 }
|
||
],
|
||
links: [
|
||
{ source: '应用核心', target: '通信协议层' },
|
||
{ source: '应用核心', target: '音频处理系统' },
|
||
{ source: '应用核心', target: '用户界面系统' },
|
||
{ source: '应用核心', target: 'IoT设备管理' },
|
||
{ source: '通信协议层', target: 'WebSocket' },
|
||
{ source: '通信协议层', target: 'MQTT' },
|
||
{ source: '音频处理系统', target: '音频编解码' },
|
||
{ source: '音频处理系统', target: 'VAD检测' },
|
||
{ source: '音频处理系统', target: '唤醒词检测' },
|
||
{ source: '用户界面系统', target: 'GUI界面' },
|
||
{ source: '用户界面系统', target: 'CLI界面' },
|
||
{ source: 'IoT设备管理', target: '设备抽象' },
|
||
{ source: 'IoT设备管理', target: '智能家居' }
|
||
],
|
||
categories: [
|
||
{ name: '核心' },
|
||
{ name: '主要模块' },
|
||
{ name: '子模块' }
|
||
],
|
||
roam: true,
|
||
label: {
|
||
show: true,
|
||
position: 'right',
|
||
formatter: '{b}'
|
||
},
|
||
lineStyle: {
|
||
color: 'source',
|
||
curveness: 0.3
|
||
},
|
||
emphasis: {
|
||
focus: 'adjacency',
|
||
lineStyle: {
|
||
width: 3
|
||
}
|
||
},
|
||
force: {
|
||
repulsion: 300,
|
||
edgeLength: 120
|
||
}
|
||
}
|
||
]
|
||
});
|
||
window.addEventListener('resize', () => {
|
||
chart.resize();
|
||
});
|
||
}
|
||
});
|
||
</script> |