From a3b5a33c16565ccae65b1d978cb56fe71c8b44d2 Mon Sep 17 00:00:00 2001 From: hrx <18603305412@163.com> Date: Wed, 11 Feb 2026 16:12:51 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- f/web-kboss/src/utils/data-manager.js | 14 +- .../homePage/components/topBox/index.vue | 4 +- .../bigScreen/Newscreen/ScreenLeft/index.vue | 134 ++++-- .../bigScreen/Newscreen/ScreenRight/index.vue | 448 ++++++++++++++---- .../bigScreen/Newscreen/images/right.png | Bin 0 -> 12454 bytes .../bigScreen/Newscreen/images/use-num.png | Bin 8800 -> 5520 bytes .../bigScreen/components/common/ZpTime.vue | 106 ++++- 7 files changed, 557 insertions(+), 149 deletions(-) create mode 100644 f/web-kboss/src/views/product/bigScreen/Newscreen/images/right.png diff --git a/f/web-kboss/src/utils/data-manager.js b/f/web-kboss/src/utils/data-manager.js index 5f4f4c1..a0d643c 100644 --- a/f/web-kboss/src/utils/data-manager.js +++ b/f/web-kboss/src/utils/data-manager.js @@ -19,7 +19,7 @@ const clusterData = { NVIDIA: 33000, ascend: 5000, supercomputer: 10, - total: 5100 + total: 51000 }, // 运行中芯片数量 @@ -107,7 +107,7 @@ const clusterData = { NVIDIA: 4191, ascend: 635, supercomputer: 1, - total: 647 + total: Math.floor(51000 * 0.127) }, runningChips: [2147, 1911.35, 2062, 2726, 2405, 2406, 2216], @@ -186,7 +186,7 @@ const clusterData = { NVIDIA: Math.floor(33000 * 0.294), ascend: Math.floor(5000 * 0.294), supercomputer: 3, - total: Math.floor(5100 * 0.294) + total: Math.floor(51000 * 0.294) }, runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.294)), @@ -265,7 +265,7 @@ const clusterData = { NVIDIA: Math.floor(33000 * 0.156), ascend: Math.floor(5000 * 0.156), supercomputer: 1, - total: Math.floor(5100 * 0.156) + total: Math.floor(51000 * 0.156) }, runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.156)), @@ -345,7 +345,7 @@ const clusterData = { NVIDIA: Math.floor(33000 * 0.098), ascend: Math.floor(5000 * 0.098), supercomputer: 1, - total: Math.floor(5100 * 0.098) + total: Math.floor(51000 * 0.098) }, runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.098)), @@ -425,7 +425,7 @@ const clusterData = { NVIDIA: Math.floor(33000 * 0.117), ascend: Math.floor(5000 * 0.117), supercomputer:1, - total: Math.floor(5100 * 0.117) + total: Math.floor(51000 * 0.117) }, runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.117)), @@ -505,7 +505,7 @@ const clusterData = { NVIDIA: Math.floor(33000 * 0.156), ascend: Math.floor(5000 * 0.156), supercomputer:1, - total: Math.floor(5100 * 0.156) + total: Math.floor(51000 * 0.156) }, runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.156)), diff --git a/f/web-kboss/src/views/homePage/components/topBox/index.vue b/f/web-kboss/src/views/homePage/components/topBox/index.vue index 3716e59..f32c219 100644 --- a/f/web-kboss/src/views/homePage/components/topBox/index.vue +++ b/f/web-kboss/src/views/homePage/components/topBox/index.vue @@ -253,12 +253,12 @@ export default Vue.extend({ }, // 判断当前是否为ncmatch.cn域名 isNcmatchDomain() { - return window.location.hostname.includes('www.ncmatch.cn'); + return window.location.hostname.includes('www. atch.cn'); }, // 首页激活状态计算 isActiveHome() { if (this.isNcmatchDomain) { - return this.$route.path.includes('/ncmatchHome/index'); + return this.$route.path.includes('/ncmatchHo index'); } else { return this.$route.path.includes('/homePage/index'); } diff --git a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenLeft/index.vue b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenLeft/index.vue index 4d7344a..b649a7f 100644 --- a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenLeft/index.vue +++ b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenLeft/index.vue @@ -3,48 +3,63 @@
+
异构芯片规模
+
{{ chipData.NVIDIA }}P
+
{{ chipData.ascend }}P
+
{{ chipData.supercomputer }}P
- + 芯片3D示意图
NVIDIA
-
晟腾
+
昇腾
传统超算
+ +
集群规模
+ {{ chipData.total }}P
+
运行中芯片数量
+
+
+
模型调用量
+
+ +
token调用量
+
@@ -60,33 +75,39 @@ export default { name: 'LeftPanel', data() { return { - runningChartInstance: null, - modelChartInstance: null, - tokenChartInstance: null, - resizeTimer: null, - currentData: null, - chipData: { - NVIDIA: 0, - ascend: 0, - supercomputer: 0, - total: 0 + runningChartInstance: null, // 运行中芯片数量图表实例 + modelChartInstance: null, // 模型调用量图表实例 + tokenChartInstance: null, // token调用量图表实例 + resizeTimer: null, // 窗口大小调整防抖定时器 + currentData: null, // 当前数据 + chipData: { // 芯片数据 + NVIDIA: 0, // NVIDIA芯片规模，单位：P + ascend: 0, // 昇腾芯片规模，单位：P + supercomputer: 0,// 传统超算规模，单位：P + total: 0 // 集群总规模，单位：P }, - animationKey: 0 + animationKey: 0 // 动画key，用于触发重新渲染 }; }, created() { + // 初始化数据 this.currentData = dataManager.getData(); this.updateChipData(); + // 监听集群数据变化事件 dataManager.eventBus.$on('cluster-changed', this.handleClusterChanged); }, mounted() { + // 初始化图表 this.initRunningChart(); this.initModelChart(); this.initTokenChart(); + + // 监听窗口大小变化 window.addEventListener('resize', this.handleResize); }, beforeDestroy() { + // 清理图表实例和事件监听 this.runningChartInstance?.dispose(); this.modelChartInstance?.dispose(); this.tokenChartInstance?.dispose(); @@ -94,13 +115,16 @@ export default { dataManager.eventBus.$off('cluster-changed', this.handleClusterChanged); }, methods: { + // 处理集群数据变化 handleClusterChanged(event) { + // 更新当前数据 this.currentData = event.data; this.updateChipData(); - // 增加动画key，触发重新渲染和动画 + + // 更新动画key触发重新渲染 this.animationKey += 1; - // 确保组件重新渲染后，图表能够被正确初始化和更新 + // 确保组件重新渲染后更新图表 this.$nextTick(() => { this.initRunningChart(); this.initModelChart(); @@ -108,17 +132,20 @@ export default { }); }, + // 更新芯片数据 updateChipData() { if (this.currentData?.left?.chipScale) { + // 从当前数据中提取芯片规模数据 this.chipData = { - NVIDIA: this.currentData.left.chipScale.NVIDIA || 0, - ascend: this.currentData.left.chipScale.ascend || 0, - supercomputer: this.currentData.left.chipScale.supercomputer || 0, - total: this.currentData.left.chipScale.total || 0 + NVIDIA: this.currentData.left.chipScale.NVIDIA || 0, // NVIDIA芯片规模 + ascend: this.currentData.left.chipScale.ascend || 0, // 昇腾芯片规模 + supercomputer: this.currentData.left.chipScale.supercomputer || 0, // 传统超算规模 + total: this.currentData.left.chipScale.total || 0 // 集群总规模 }; } }, + // 初始化运行中芯片数量图表 initRunningChart() { const chartDom = this.$refs.runningChart; if (!chartDom) return; @@ -126,17 +153,38 @@ export default { this.updateRunningChart(); }, + // 更新运行中芯片数量图表 updateRunningChart() { if (!this.runningChartInstance || !this.currentData?.left) return; + // 运行中芯片数量数据，单位：个 const yData = this.currentData.left.runningChips || []; + // 日期数据（12月1日-12月7日） const xData = ['12/01', '12/02', '12/03', '12/04', '12/05', '12/06', '12/07']; + // 计算Y轴最大值和最小值 const maxValue = Math.max(...yData); const minValue = Math.min(...yData); - const yMax = Math.ceil(maxValue / 1000) * 1000 + 1000; - const yMin = Math.floor(minValue / 1000) * 1000 - 1000; + // 计算最大值（转换为k单位） + const maxValueInK = maxValue / 1000; + + // 根据最大值决定Y轴刻度和间隔 + let yMax, interval; + if (maxValueInK >= 10) { + // 如果最大值大于等于10k，使用10k为间隔 + yMax = Math.ceil(maxValueInK / 10) * 10 * 1000; // 向上取整到10的倍数，再转回原始单位 + interval = 10 * 1000; // 10k间隔 + } else { + // 如果最大值小于10k，使用1k为间隔 + yMax = Math.ceil(maxValueInK) * 1000; // 向上取整，再转回原始单位 + interval = 1000; // 1k间隔 + } + + // 确保Y轴最小值从0开始 + const yMin = 0; + + // 创建标记点数据（最高点） const maxIndex = yData.indexOf(maxValue); const markPointData = yData.map((value, index) => { if (index === maxIndex) { @@ -152,7 +200,8 @@ export default { show: true, position: 'top', formatter: function (params) { - return (params.value / 10000).toFixed(1) + '万'; + // 显示为千单位，保留1位小数 + return (params.value / 1000).toFixed(1) + 'k(P)'; }, color: '#fff', fontWeight: 'bold', @@ -171,9 +220,10 @@ export default { textStyle: { color: '#fff' }, formatter: function (params) { const value = params[0].value; + // 显示日期和芯片数量（千为单位） return params[0].name + '
' + params[0].marker + params[0].seriesName + ': ' + - value.toLocaleString() + '个'; + (value / 1000).toFixed(1) + 'k个'; } }, grid: { @@ -196,9 +246,9 @@ export default { }, yAxis: { type: 'value', - min: yMin, + min: yMin, // 从0开始 max: yMax, - splitNumber: 6, + interval: interval, // 根据数据大小动态设置间隔 splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)', @@ -209,7 +259,8 @@ export default { color: 'rgba(255,255,255,0.7)', fontSize: 12, formatter: function (value) { - return (value / 10000).toFixed(1) + '万'; + // Y轴标签显示为千单位 + return (value / 1000) + 'k'; } }, axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } }, @@ -250,6 +301,7 @@ export default { this.runningChartInstance.setOption(option, true); }, + // 初始化模型调用量图表 initModelChart() { const chartDom = this.$refs.modelChart; if (!chartDom) return; @@ -257,13 +309,18 @@ export default { this.updateModelChart(); }, + // 更新模型调用量图表 updateModelChart() { if (!this.modelChartInstance || !this.currentData?.left) return; + // 模型调用量数据，格式：[{name: '模型名称', value: 调用次数}, ...] const modelData = this.currentData.left.modelUsage || []; + // Y轴：模型名称 const yData = modelData.map(item => item.name); + // X轴：调用次数 const xData = modelData.map(item => item.value); + // 计算X轴最大值 const maxValue = Math.max(...xData); const xMax = Math.ceil(maxValue / 50) * 50 + 10; @@ -273,6 +330,7 @@ export default { backgroundColor: 'rgba(0,0,0,0.85)', borderColor: '#50e3c2', formatter: function (params) { + // 显示模型名称和调用次数 return params[0].name + ': ' + params[0].value; } }, @@ -362,6 +420,7 @@ export default { this.modelChartInstance.setOption(option, true); }, + // 初始化token调用量图表 initTokenChart() { const chartDom = this.$refs.tokenChart; if (!chartDom) return; @@ -369,13 +428,18 @@ export default { this.updateTokenChart(); }, + // 更新token调用量图表 updateTokenChart() { if (!this.tokenChartInstance || !this.currentData?.left) return; + // token调用量数据，格式：[{name: '模型名称', value: token数量}, ...]，value单位：M（百万） const tokenData = this.currentData.left.tokenUsage || []; + // X轴：模型名称 const xData = tokenData.map(item => item.name); + // Y轴：token数量（百万） const yData = tokenData.map(item => item.value); + // 计算Y轴最大值 const maxValue = Math.max(...yData); const yMax = Math.ceil(maxValue / 1000) * 1000 + 500; @@ -385,6 +449,7 @@ export default { backgroundColor: 'rgba(0,0,0,0.85)', borderColor: '#1890ff', formatter: function (params) { + // 显示模型名称和token数量 return params[0].name + '
' + params[0].marker + params[0].seriesName + ': ' + params[0].value + 'M'; } }, @@ -405,6 +470,7 @@ export default { interval: 0, margin: 10, formatter: function (value) { + // 模型名称过长时截断显示 if (value.length > 8) { return value.substring(0, 8) + '...'; } @@ -488,8 +554,10 @@ export default { this.tokenChartInstance.setOption(option, true); }, + // 处理窗口大小调整 handleResize() { clearTimeout(this.resizeTimer); + // 防抖处理，200ms后重新调整图表大小 this.resizeTimer = setTimeout(() => { this.runningChartInstance?.resize(); this.modelChartInstance?.resize(); @@ -497,7 +565,7 @@ export default { }, 200); }, - // 新增：updateCharts方法 + // 更新所有图表 updateCharts() { console.log('updateCharts called in LeftPanel'); this.updateRunningChart(); @@ -517,7 +585,6 @@ export default { gap: .15rem; padding: .1rem 0; box-sizing: border-box; - } .conter { @@ -527,26 +594,27 @@ export default { .conter-top { width: 100%; position: absolute; - display: flex; + .one{ position: absolute; left: .24rem; top: .24rem; - } + .two{ position: absolute; left: 1.1rem; top: .24rem; } + .three{ position: absolute; left: 1.9rem; top: .24rem; } - .top-tit { + .top-tit { span { margin-left: 2px; } @@ -644,12 +712,13 @@ export default { box-sizing: border-box; } -// 模型调用 +// 模型调用量图表容器 .model-chart { height: calc(100% - 46px); width: 2.4rem; } +// token调用量图表容器 .token-chart { width: 4.2rem; } @@ -663,7 +732,6 @@ export default { /* 调整第3行的高度比例 */ .row-3 { - .model, .token { .chart-container { diff --git a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue index 2f66cf6..aa2f25a 100644 --- a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue +++ b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue @@ -3,16 +3,16 @@
- +
应用类型
- +
TOP1
{{ appTypes[0] || '智能推理' }}
- +
TOP2
{{ appTypes[1] || '智能训练' }}
@@ -31,7 +31,7 @@
- +
用户种类
@@ -49,25 +49,37 @@
- +
用户数量
-
- +
+
+ +
+
{{ tick }}
+
+
+
+ + +
+
{{ tick }}
+
+
- +
用户消费排行
- +
- +
-
算力使用情况
@@ -95,36 +107,47 @@ export default { name: 'RightPanel', data() { return { + // X轴刻度（根据图片描述） + xTicks: ['7月','8月','9月','10月', '11月', '12月'], + // Y轴刻度（根据图片描述） + yTicks: ['100', '80', '60', '40', '20', '0'], scrollBoardConfig: { - data: [], - index: false, - columnWidth: [50, 100, 90], - rowHeight: 28, - align: ['center', 'center', 'center'], - rowNum: 5, - oddRowBGC: '#040c45', - evenRowBGC: '#17264f', - waitTime: 1500, // 缩短等待时间，加快滚动 - carousel: 'single', - hoverPause: false, // 鼠标悬停时不暂停，确保持续滚动 - autoPlay: true // 确保自动播放 + data: [], // 用户消费排行数据 + index: false, // 不显示序号 + columnWidth: [50, 100, 90], // 列宽：头像、用户名、消费金额 + rowHeight: 28, // 行高 + align: ['center', 'center', 'center'], // 列对齐方式 + rowNum: 5, // 显示行数 + oddRowBGC: '#040c45', // 奇数行背景色 + evenRowBGC: '#17264f', // 偶数行背景色 + waitTime: 1500, // 滚动间隔时间（毫秒） + carousel: 'single', // 单行滚动 + hoverPause: false, // 鼠标悬停时不暂停 + autoPlay: true // 自动播放 }, - scrollBoardKey: 0, - resizeTimer: null, - powerChart: null, - currentData: null, - appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'], - animationKey: 0 + scrollBoardKey: 0, // 滚动表格的key，用于强制重新渲染 + resizeTimer: null, // 窗口大小调整防抖定时器 + powerChart: null, // 算力使用情况图表实例 + userNumChart: null, // 用户数量图表实例 + currentData: null, // 当前数据 + appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'], // 应用类型数据 + animationKey: 0 // 动画key，用于触发重新渲染 }; }, created() { + // 初始化数据 this.currentData = dataManager.getData(); this.updateDisplay(); + // 监听集群数据变化事件 dataManager.eventBus.$on('cluster-changed', this.handleClusterChanged); }, mounted() { + // 初始化算力使用情况图表 this.initPowerUseChart(); + // 初始化用户数量图表 + this.initUserNumChart(); + // 监听窗口大小变化 window.addEventListener('resize', this.handleResize); // 确保滚动表格初始化后开始滚动 @@ -133,38 +156,55 @@ export default { }); }, beforeDestroy() { + // 清理图表实例和事件监听 if (this.$refs.powerUseChart) { const chart = echarts.getInstanceByDom(this.$refs.powerUseChart); if (chart) chart.dispose(); } + if (this.$refs.userNumChart) { + const chart = echarts.getInstanceByDom(this.$refs.userNumChart); + if (chart) chart.dispose(); + } window.removeEventListener('resize', this.handleResize); dataManager.eventBus.$off('cluster-changed', this.handleClusterChanged); }, methods: { + // 处理集群数据变化 handleClusterChanged(event) { + // 更新当前数据 this.currentData = event.data; - // 增加动画key，触发重新渲染和动画 + // 增加动画key触发重新渲染 this.animationKey += 1; - // 确保组件重新渲染后，图表能够被正确初始化和更新 + // 确保组件重新渲染后更新图表 this.$nextTick(() => { this.initPowerUseChart(); + this.initUserNumChart(); this.updateDisplay(); }); }, + // 更新显示数据 updateDisplay() { if (!this.currentData) return; + // 更新应用类型数据 this.appTypes = this.currentData.right?.appTypes || this.appTypes; + // 更新滚动表格数据 this.updateScrollBoard(); + // 更新算力使用情况图表 this.updatePowerChart(); + // 更新用户数量图表 + this.updateUserNumChart(); }, + // 更新滚动表格数据 updateScrollBoard() { if (!this.currentData?.right) return; + // 用户消费数据，格式：[{name: '用户名', amount: 消费金额}, ...] const userData = this.currentData.right.userConsumption || []; + // 头像图片映射 const imgMap = { 1: img1, 2: img2, @@ -176,21 +216,21 @@ export default { 8: img8, 9: img9, 10: img10 - }; - // 确保数据至少有5条，不足时用空数据填充 + // 构建表格数据，确保至少有5条数据 const tableData = []; for (let i = 0; i < Math.max(5, userData.length); i++) { if (userData[i]) { tableData.push([ - `
`, - userData[i].name, - `¥${userData[i].amount.toLocaleString()}` + `
`, // 排名头像 + userData[i].name, // 用户名 + `¥${userData[i].amount.toLocaleString()}` // 消费金额（格式化显示） ]); } else { + // 如果数据不足，用空数据填充 tableData.push([ - `
`, + `
`, `用户${i + 1}`, '¥0' ]); @@ -205,7 +245,6 @@ export default { // 更新配置 this.scrollBoardConfig = newConfig; - // 强制重新渲染滚动表格 this.scrollBoardKey += 1; @@ -215,10 +254,10 @@ export default { }); }, - // 启动滚动表格的方法 + // 启动滚动表格 startScrollBoard() { if (this.$refs.scrollBoardRef && this.$refs.scrollBoardRef.startRoll) { - // 如果有startRoll方法，调用它开始滚动 + // 调用startRoll方法开始滚动 this.$refs.scrollBoardRef.startRoll(); } @@ -231,6 +270,7 @@ export default { } }, + // 初始化算力使用情况图表 initPowerUseChart() { const chartDom = this.$refs.powerUseChart; if (!chartDom) return; @@ -238,17 +278,35 @@ export default { this.updatePowerChart(); }, + // 更新算力使用情况图表 updatePowerChart() { if (!this.powerChart || !this.currentData?.right) return; + // 算力使用数据，单位：p（算力单位） const powerData = this.currentData.right.powerUsage || []; + // 日期数据（12月1日-12月7日） const dates = ['12/01', '12/02', '12/03', '12/04', '12/05', '12/06', '12/07']; + // 计算最大值（转换为千单位） const maxValue = Math.max(...powerData); - const minValue = Math.min(...powerData); - const yMax = Math.ceil(maxValue / 1000) * 1000 + 1000; - const yMin = Math.floor(minValue / 1000) * 1000 - 1000; + const maxValueInK = maxValue / 1000; + // 根据最大值决定Y轴刻度和间隔 + let yMax, interval; + if (maxValueInK >= 10) { + // 如果最大值大于等于10k，使用10k为间隔 + yMax = Math.ceil(maxValueInK / 10) * 10 * 1000; + interval = 10 * 1000; // 10k间隔 + } else { + // 如果最大值小于10k，使用1k为间隔 + yMax = Math.ceil(maxValueInK) * 1000; // 向上取整，再转回原始单位 + interval = 1000; // 1k间隔 + } + + // 确保Y轴最小值从0开始 + const yMin = 0; + + // 创建标记点数据（最高点） const maxIndex = powerData.indexOf(maxValue); const markPointData = powerData.map((value, index) => { if (index === maxIndex) { @@ -263,8 +321,9 @@ export default { label: { show: true, position: 'top', - formatter: function(params) { - return (params.value / 10000).toFixed(1) + '万（p）'; + formatter: function (params) { + // 显示为千单位，保留1位小数 + return (params.value / 1000).toFixed(1) + 'k(P)'; }, color: '#fff', fontWeight: 'bold', @@ -282,11 +341,12 @@ export default { backgroundColor: 'rgba(0,0,0,0.85)', borderColor: '#1890ff', textStyle: { color: '#fff' }, - formatter: function(params) { + formatter: function (params) { const value = params[0].value; + // 显示日期和算力使用量（千为单位） return params[0].name + '
' + - params[0].marker + params[0].seriesName + ': ' + - value.toLocaleString() + 'p'; + params[0].marker + params[0].seriesName + ': ' + + (value / 1000).toFixed(1) + 'k'; } }, grid: { @@ -309,9 +369,9 @@ export default { }, yAxis: { type: 'value', - min: yMin, + min: yMin, // 从0开始 max: yMax, - splitNumber: 6, + interval: interval, // 根据数据大小动态设置间隔 splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)', @@ -321,8 +381,9 @@ export default { axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12, - formatter: function(value) { - return (value / 10000).toFixed(1) + '万'; + formatter: function (value) { + // Y轴标签显示为千单位，去掉小数 + return (value / 1000) + 'k'; } }, axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } }, @@ -362,13 +423,135 @@ export default { this.powerChart.setOption(option, true); }, + // 初始化用户数量图表 + initUserNumChart() { + const chartDom = this.$refs.userNumChart; + if (!chartDom) return; + this.userNumChart = echarts.init(chartDom); + this.updateUserNumChart(); + }, + + // 更新用户数量图表 + updateUserNumChart() { + if (!this.userNumChart) return; + + // 从数据管理器获取用户数量数据，如果没有则使用模拟数据 + const userNumData = this.currentData?.right?.userNum || [12, 38, 55, 72, 85, 63, 47, 29]; + + const option = { + backgroundColor: 'transparent', + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + }, + backgroundColor: 'rgba(0,0,0,0.85)', + borderColor: '#1890ff', + textStyle: { color: '#fff' }, + formatter: function (params) { + const value = params[0].value; + return params[0].name + '
' + + params[0].marker + '用户数量: ' + value; + } + }, + grid: { + left: '0%', + right: '0%', + top: '10%', + bottom: '15%', + containLabel: true + }, + xAxis: { + type: 'category', + data: this.xTicks, + axisLabel: { + color: 'rgba(255,255,255,0.7)', + fontSize: 12, + interval: 0 + }, + axisLine: { + lineStyle: { + color: 'rgba(255,255,255,0.3)', + width: 2 + } + }, + axisTick: { + show: true, + alignWithLabel: true, + lineStyle: { + color: 'rgba(255,255,255,0.5)' + } + } + }, + yAxis: { + type: 'value', + min: 0, + max: 100, + interval: 20, + splitLine: { + lineStyle: { + color: 'rgba(255,255,255,0.1)', + type: 'dashed' + } + }, + axisLabel: { + color: 'rgba(255,255,255,0.7)', + fontSize: 12 + }, + axisLine: { + lineStyle: { + color: 'rgba(255,255,255,0.3)', + width: 2 + } + }, + axisTick: { + show: true, + lineStyle: { + color: 'rgba(255,255,255,0.5)' + } + } + }, + series: [ + { + name: '用户数量', + type: 'bar', + barWidth: '40%', + data: userNumData, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: '#1890ff' }, + { offset: 1, color: '#005CCF' } + ]), + borderRadius: [4, 4, 0, 0] + }, + emphasis: { + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: '#40a9ff' }, + { offset: 1, color: '#096dd9' } + ]) + } + } + } + ] + }; + + this.userNumChart.setOption(option, true); + }, + + // 处理窗口大小调整 handleResize() { clearTimeout(this.resizeTimer); + // 防抖处理，200ms后重新调整图表大小 this.resizeTimer = setTimeout(() => { if (this.$refs.powerUseChart) { const chart = echarts.getInstanceByDom(this.$refs.powerUseChart); if (chart) chart.resize(); } + if (this.$refs.userNumChart) { + const chart = echarts.getInstanceByDom(this.$refs.userNumChart); + if (chart) chart.resize(); + } }, 200); } } @@ -376,6 +559,7 @@ export default {