page1时间热度布局完成

Signed-off-by: changyunju <2743319061@qq.com>

package-lock.json

@@ -8,6 +8,7 @@
       "name": "vite-project",
       "version": "0.0.0",
       "dependencies": {
+        "echarts": "^5.6.0",
         "element-plus": "^2.9.11",
         "vue": "^3.5.13",
         "vue-router": "^4.5.1"
@@ -1082,6 +1083,16 @@
       "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
       "license": "MIT"
     },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.9.11",
       "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.9.11.tgz",
@@ -1378,6 +1389,12 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
@@ -1488,6 +1505,15 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "echarts": "^5.6.0",
     "element-plus": "^2.9.11",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"

src/views/KeyNodeRecognition1.vue

@@ -42,6 +42,8 @@
 				<!-- 标题 -->
 				<div>
 					<img src="../assets/images/peiluoxi.png" alt="" style="margin-left: 125px;">
+<!-- 					<img src="../assets/images/peiluoxi-leader.png"> -->
+					
 				</div>
 				<!-- 领袖图 -->
 				<div>
@@ -101,7 +103,17 @@
 
 		<div class="leader-containner2">
 			<div class="event-hot">
-				<img src="../assets/images/evenhot.png" alt="" style="margin-top: -6px;">
+				<div class="section-header">
+					<h3 class="section-title">事件热度图</h3>
+				</div>
+				<div class="chart-controls">
+					<button :class="{ active: activeChartTab === 'trend' }"
+						@click="activeChartTab = 'trend'">趋势热度图</button>
+					<button :class="{ active: activeChartTab === 'cumulative' }"
+						@click="activeChartTab = 'cumulative'">累计热度图</button>
+					<button class="details-btn" @click="openDetailsModal">查看详情</button>
+				</div>
+				<div ref="hotspotChart" class="chart-container"></div>
 			</div>
 			<div class="leader-post" ref="leaderPost">
 				<!-- 原始内容 -->
@@ -135,9 +147,9 @@
 		computed,
 		onMounted,
 		onUnmounted,
-		nextTick
+		nextTick, watch
 	} from 'vue';
-
+import * as echarts from 'echarts'; // 引入 ECharts
 	// 定义按钮列表
 	const buttonList = ['全部', '新闻媒体', '自媒体', '政府官号'];
 	// 定义当前激活的按钮索引
@@ -318,6 +330,8 @@
 		}
 	});;
 
+
+
 	/* 领袖分析数据 */
 	const chartData = ref([{
 			title: '平均发帖数',
@@ -365,6 +379,174 @@
 		}
 	]);
 
+/****************** 事件热度 **********/
+/* Event Hotspot Chart Logic */
+	const hotspotChart = ref(null);
+	let myChart = null;
+	const activeChartTab = ref('cumulative'); // Default to cumulative
+
+	const trendData = [8959, 7460, 8334, 7902, 5753, 3070, 3481, 16878, 17819, 15296, 18883, 3734, 938, 101, 12];
+	const cumulativeData = trendData.reduce((acc, val) => {
+		acc.push((acc.length > 0 ? acc[acc.length - 1] : 0) + val);
+		return acc;
+	}, []);
+
+	const chartDataSets = {
+		trend: {
+			data: trendData,
+			yAxisMax: 20000
+		},
+		cumulative: {
+			data: cumulativeData,
+			yAxisMax: 120000
+		}
+	};
+
+	const fullXAxisLabels = [
+		'7.31 00h', '7.31 06h', '7.31 12h', '7.31 18h',
+		'8.1 00h', '8.1 06h', '8.1 12h', '8.1 18h',
+		'8.2 00h', '8.2 06h', '8.2 12h', '8.2 18h',
+		'8.3 00h', '8.3 06h', '8.3 12h'
+	];
+
+	const getChartOptions = (xAxisData, seriesData, yMax, axisLabelInterval) => ({
+		tooltip: {
+			trigger: 'axis',
+			backgroundColor: 'rgba(0, 21, 41, 0.8)',
+			borderColor: '#3a95ff',
+			textStyle: {
+				color: '#cbeaff'
+			}
+		},
+		grid: {
+			left: '3%',
+			right: '4%',
+			bottom: '3%',
+			top: '22%',
+			containLabel: true
+		},
+		xAxis: {
+			type: 'category',
+			boundaryGap: false,
+			data: xAxisData,
+			axisLine: {
+				lineStyle: {
+					color: 'rgba(62, 115, 171, 0.5)'
+				}
+			},
+			axisLabel: {
+				color: '#a7c5d4',
+				fontSize: 10,
+				rotate: 15,
+				interval: axisLabelInterval
+			}
+		},
+		yAxis: {
+			type: 'value',
+			max: yMax,
+			axisLabel: {
+				color: '#a7c5d4',
+				formatter: '{value}'
+			},
+			splitLine: {
+				show: true,
+				lineStyle: {
+					color: 'rgba(62, 115, 171, 0.2)',
+					type: 'dashed'
+				}
+			}
+		},
+		series: [{
+			name: '热度',
+			type: 'line',
+			smooth: true,
+			symbol: 'circle',
+			symbolSize: 8,
+			data: seriesData,
+			label: {
+				show: false
+			},
+			itemStyle: {
+				color: '#00baff',
+				borderColor: '#fff',
+				borderWidth: 1
+			},
+			lineStyle: {
+				color: '#00baff',
+				width: 2
+			},
+			areaStyle: {
+				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+					offset: 0,
+					color: 'rgba(0, 186, 255, 0.4)'
+				}, {
+					offset: 1,
+					color: 'rgba(0, 186, 255, 0)'
+				}])
+			}
+		}]
+	});
+
+	const initHotspotChart = () => {
+		if (hotspotChart.value) {
+			myChart = echarts.init(hotspotChart.value);
+			const initialDataSet = chartDataSets[activeChartTab.value];
+			const axisLabelInterval = (index) => index % 4 ===
+			0; // Show label every 4 points (0, 4, 8, 12) for sparse view
+			myChart.setOption(getChartOptions(fullXAxisLabels, initialDataSet.data, initialDataSet.yAxisMax,
+				axisLabelInterval));
+		}
+	};
+
+	watch(activeChartTab, (newTab) => {
+		if (myChart) {
+			const dataSet = chartDataSets[newTab];
+			myChart.setOption({
+				yAxis: {
+					max: dataSet.yAxisMax
+				},
+				series: [{
+					data: dataSet.data
+				}]
+			});
+		}
+	});
+	
+	/* Modal Logic */
+	const showDetailsModal = ref(false);
+	const detailsChart = ref(null);
+	let myDetailsChart = null;
+	
+	const openDetailsModal = async () => {
+		showDetailsModal.value = true;
+		await nextTick();
+		if (detailsChart.value && !myDetailsChart) {
+			myDetailsChart = echarts.init(detailsChart.value);
+			const dataSet = chartDataSets.trend; // Details view always shows trend
+			myDetailsChart.setOption(getChartOptions(fullXAxisLabels, dataSet.data, dataSet.yAxisMax,
+			0)); // Interval 0 to show all labels
+		}
+	};
+	
+	const closeDetailsModal = () => {
+		showDetailsModal.value = false;
+		if (myDetailsChart) {
+			myDetailsChart.dispose();
+			myDetailsChart = null;
+		}
+	};
+	
+	onMounted(async () => {
+		initHotspotChart();
+	});
+	
+	onUnmounted(() => {
+		if (myChart) myChart.dispose();
+		if (myDetailsChart) myDetailsChart.dispose();
+	});
+/* ******************事件热度******** */
+
+
 	/* 词云数据 */
 	const words = ref([
 		// 大号字体
@@ -771,7 +953,9 @@
 		-webkit-backdrop-filter: blur(4px);
 	}
 
-	/* 领袖分析样式 */
+
+
+	/* *************领袖分析样式start*********** */
 	.analysis-container {
 		background-color: #0d1b38;
 		padding: 20px;
@@ -945,6 +1129,99 @@
 	.value-user {
 		color: #27c1a8;
 	}
+/* *****************领袖分析end******************* */
+
+/* **********************事件热度start***************** */
+
+/*  ***************事件热度**********/
+/* 事件热度图区域样式 */
+.event-hot {
+		position: relative;
+		width: 352px;
+		height: 296px;
+		margin-top: 10px;
+		padding: 10px 15px;
+		border-radius: 2px;
+		background-color: #04142166;
+		border-top: 1px solid #3e73ab;
+		box-shadow: 0px 0px 18px 0px #0A2E55 inset;
+		backdrop-filter: blur(4px);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.section-header {
+		position: relative;
+		width: 100%;
+		margin-bottom: 10px;
+	}
+
+	.section-title {
+		color: #e0f7ff;
+		font-size: 18px;
+		font-weight: 600;
+		margin: 0;
+	}
+
+	.section-header::after {
+		content: '////';
+		letter-spacing: -2px;
+		position: absolute;
+		top: 50%;
+		right: 0;
+		color: rgba(77, 159, 223, 0.6);
+		font-weight: bold;
+		transform: translateY(-50%) skewX(-20deg);
+	}
+
+	.chart-controls {
+		display: flex;
+		align-items: center;
+		margin-bottom: 5px;
+		z-index: 10;
+		font-size: 12px;
+	}
+
+	.chart-controls button {
+		background: none;
+		border: 1px solid #1c588f;
+		color: #a7c5d4;
+		padding: 3px 10px;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		margin-right: -1px;
+	}
+
+	.chart-controls button.active {
+		background-color: #236291;
+		color: white;
+		border-color: #236291;
+	}
+
+	.chart-controls button:first-child {
+		border-top-left-radius: 3px;
+		border-bottom-left-radius: 3px;
+	}
+
+	.chart-controls button:nth-child(2) {
+		border-top-right-radius: 3px;
+		border-bottom-right-radius: 3px;
+		margin-right: 0;
+	}
+
+	.details-btn {
+		margin-left: auto;
+		border-radius: 3px;
+	}
+
+	.chart-container {
+		flex-grow: 1;
+		width: 100%;
+		height: 100%;
+	}
+/* *****************事件热度******** */
+
+/* *******************事件热度end****************** */
 
 
 	/* 词云样式 */

src/views/new_file.6vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>