加载echarts

src/components/Chart32_Inspection(1).vue

@@ -0,0 +1,58 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// --- 原始数据 ---
+const originalData = {
+    '2024-06-19 15:57': 2280, '2024-06-20 15:57': 612, '2024-06-21 15:57': 261,
+    '2024-06-22 15:57': 258, '2024-06-23 15:57': 110, '2024-06-24 15:57': 80,
+    '2024-06-25 15:57': 51, '2024-06-26 15:57': 18, '2024-06-27 15:57': 10,
+    '2024-06-28 15:57': 10, '2024-06-29 15:57': 2, '2024-06-30 15:57': 2,
+    '2024-07-01 15:57': 2
+};
+
+// --- Y轴镜像转换 ---
+const xAxisData = Object.keys(originalData);
+// 关键：将Y轴数据数组反转
+const yAxisMirroredData = Object.values(originalData).reverse(); 
+
+// --- ECharts 核心逻辑 ---
+const chartRef = ref(null);
+let myChart = null;
+
+const option = {
+  title: {
+    text: '中国海警首次登检菲律宾运补船只 (Y轴镜像)',
+    left: 'center'
+  },
+  tooltip: { trigger: 'axis' },
+  grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: xAxisData,
+    axisLabel: { rotate: 30 }
+  },
+  yAxis: { type: 'value' },
+  series: [{
+    name: '热度',
+    data: yAxisMirroredData,
+    type: 'line',
+    smooth: true,
+    areaStyle: {} // 添加面积图样式
+  }]
+};
+
+onMounted(() => {
+  myChart = echarts.init(chartRef.value);
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
+});
+
+onUnmounted(() => {
+  myChart?.dispose();
+});
+</script>

src/components/Chart33_WavingBlades(1).vue

@@ -0,0 +1,60 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// --- 原始数据 ---
+const originalData = {
+    '2024-06-19 21:36': 416, '2024-06-20 09:36': 796, '2024-06-20 21:36': 403,
+    '2024-06-21 09:36': 236, '2024-06-21 21:36': 33, '2024-06-22 09:36': 29,
+    '2024-06-22 21:36': 11, '2024-06-23 09:36': 10, '2024-06-23 21:36': 5,
+    '2024-06-24 09:36': 10, '2024-06-24 21:36': 7, '2024-06-25 09:36': 1,
+    '2024-06-25 21:36': 4, '2024-06-26 09:36': 6, '2024-06-26 21:36': 5,
+    '2024-06-27 09:36': 5, '2024-06-27 21:36': 2, '2024-06-28 09:36': 1,
+    '2024-06-28 21:36': 0, '2024-06-29 09:36': 1, '2024-06-29 21:36': 1
+};
+
+// --- Y轴镜像转换 ---
+const xAxisData = Object.keys(originalData);
+const yAxisMirroredData = Object.values(originalData).reverse();
+
+// --- ECharts 核心逻辑 ---
+const chartRef = ref(null);
+let myChart = null;
+
+const option = {
+  title: {
+    text: '中方回应菲称我海警挥舞刀具 (Y轴镜像)',
+    left: 'center'
+  },
+  tooltip: { trigger: 'axis' },
+  grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: xAxisData,
+    axisLabel: { rotate: 30 }
+  },
+  yAxis: { type: 'value' },
+  series: [{
+    name: '热度',
+    data: yAxisMirroredData,
+    type: 'line',
+    smooth: true,
+    itemStyle: { color: '#5470c6' },
+    areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(84, 112, 198, 0.4)' }, { offset: 1, color: 'rgba(84, 112, 198, 0)' }])}
+  }]
+};
+
+onMounted(() => {
+  myChart = echarts.init(chartRef.value);
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
+});
+
+onUnmounted(() => {
+  myChart?.dispose();
+});
+</script>

src/components/Chart34_RecoveredGoods(1).vue

@@ -0,0 +1,55 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// --- 原始数据 ---
+const originalData = {
+    '2024-06-20 13:08': 1711, '2024-06-21 13:08': 294, '2024-06-22 13:08': 49,
+    '2024-06-23 13:08': 19, '2024-06-24 13:08': 6, '2024-06-25 13:08': 5,
+    '2024-06-26 13:08': 1, '2024-06-27 13:08': 0, '2024-06-28 13:08': 0,
+    '2024-06-29 13:08': 0, '2024-06-30 13:08': 1, '2024-07-01 13:08': 1
+};
+
+// --- Y轴镜像转换 ---
+const xAxisData = Object.keys(originalData);
+const yAxisMirroredData = Object.values(originalData).reverse();
+
+// --- ECharts 核心逻辑 ---
+const chartRef = ref(null);
+let myChart = null;
+
+const option = {
+  title: {
+    text: '中国海警夺回菲方盗窃赃物 (Y轴镜像)',
+    left: 'center'
+  },
+  tooltip: { trigger: 'axis' },
+  grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: xAxisData,
+    axisLabel: { rotate: 30 }
+  },
+  yAxis: { type: 'value' },
+  series: [{
+    name: '热度',
+    data: yAxisMirroredData,
+    type: 'bar', // 使用柱状图
+    itemStyle: { color: '#91cc75' }
+  }]
+};
+
+onMounted(() => {
+  myChart = echarts.init(chartRef.value);
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
+});
+
+onUnmounted(() => {
+  myChart?.dispose();
+});
+</script>

src/components/Chart35_SpecialForces(1).vue

@@ -0,0 +1,58 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// --- 原始数据 ---
+const originalData = {
+    '2024-06-22 17:10': 10, '2024-06-23 05:10': 1255, '2024-06-23 17:10': 801,
+    '2024-06-24 05:10': 281, '2024-06-24 17:10': 48, '2024-06-25 05:10': 65,
+    '2024-06-25 17:10': 30, '2024-06-26 05:10': 32, '2024-06-26 17:10': 16,
+    '2024-06-27 05:10': 7, '2024-06-27 17:10': 5, '2024-06-28 05:10': 2,
+    '2024-06-28 17:10': 1, '2024-06-29 05:10': 1, '2024-06-29 17:10': 1,
+    '2024-06-30 05:10': 4, '2024-06-30 17:10': 1, '2024-07-01 05:10': 4
+};
+
+// --- Y轴镜像转换 ---
+const xAxisData = Object.keys(originalData);
+const yAxisMirroredData = Object.values(originalData).reverse();
+
+// --- ECharts 核心逻辑 ---
+const chartRef = ref(null);
+let myChart = null;
+
+const option = {
+  title: {
+    text: '菲自曝被缴枪的是顶级特种部队 (Y轴镜像)',
+    left: 'center'
+  },
+  tooltip: { trigger: 'axis' },
+  grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: xAxisData,
+    axisLabel: { rotate: 30 }
+  },
+  yAxis: { type: 'value' },
+  series: [{
+    name: '热度',
+    data: yAxisMirroredData,
+    type: 'line',
+    smooth: true,
+    itemStyle: { color: '#fac858' }
+  }]
+};
+
+onMounted(() => {
+  myChart = echarts.init(chartRef.value);
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
+});
+
+onUnmounted(() => {
+  myChart?.dispose();
+});
+</script>

src/components/Chart36_Dialogue(1).vue

@@ -0,0 +1,59 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// --- 原始数据 ---
+const originalData = {
+    '2024-06-25 15:05': 169, '2024-06-25 21:05': 186, '2024-06-26 03:05': 31,
+    '2024-06-26 09:05': 8, '2024-06-26 15:05': 1, '2024-06-26 21:05': 2,
+    '2024-06-27 03:05': 1, '2024-06-27 09:05': 0, '2024-06-27 15:05': 1,
+    '2024-06-27 21:05': 0, '2024-06-28 03:05': 0, '2024-06-28 09:05': 0,
+    '2024-06-28 15:05': 0, '2024-06-28 21:05': 0, '2024-06-29 03:05': 0,
+    '2024-06-29 09:05': 0, '2024-06-29 15:05': 0, '2024-06-29 21:05': 0,
+    '2024-06-30 03:05': 0, '2024-06-30 09:05': 1
+};
+
+// --- Y轴镜像转换 ---
+const xAxisData = Object.keys(originalData);
+const yAxisMirroredData = Object.values(originalData).reverse();
+
+// --- ECharts 核心逻辑 ---
+const chartRef = ref(null);
+let myChart = null;
+
+const option = {
+  title: {
+    text: '菲希望与中国就南海问题对话 (Y轴镜像)',
+    left: 'center'
+  },
+  tooltip: { trigger: 'axis' },
+  grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: xAxisData,
+    axisLabel: { rotate: 30 }
+  },
+  yAxis: { type: 'value' },
+  series: [{
+    name: '热度',
+    data: yAxisMirroredData,
+    type: 'line',
+    step: 'start', // 使用阶梯线图
+    itemStyle: { color: '#ee6666' }
+  }]
+};
+
+onMounted(() => {
+  myChart = echarts.init(chartRef.value);
+  myChart.setOption(option);
+  window.addEventListener('resize', () => myChart.resize());
+});
+
+onUnmounted(() => {
+  myChart?.dispose();
+});
+</script>

src/views/App.vue

@@ -1,31 +1,8 @@
-<<<<<<< HEAD
 
 <template>
   <div style="width: 100%; height: 100%;">
     <div class="graph-box" id="graph-container"></div>
     <div class="slider-box">
-=======
-<!-- <script setup>
-// import { RouterView } from 'vue-router'
-// import HelloWorld from './components/HelloWorld.vue'
-// import Visualize from '../views/visualize/index.vue'
-// import graphData from "../views/visualize/data/graphData.ts"
-</script> -->
-
-<template>
-  <div style="width: 100%; height: 100%">
-    <div class="graph-box" id="graph-container"></div>
-    <div class="slider-box">
-      <button @click="handleCombineAction">定位并高亮</button>
-      <el-button 
-        @click="toggleAutoPlay"
-        :loading="state.isProcessingAutoPlay"  
-        :disabled="!Object.keys(state.marks).length"
-        :class="{'el-button--danger': state.isAutoPlaying}"
-      >
-        {{ state.isAutoPlaying ? '停止播放' : '开始自动播放' }}
-      </el-button>
->>>>>>> main
       <el-slider v-model="state.sliderValue" @input="sliderChange" :marks="state.marks" />
     </div>
   </div>
@@ -33,63 +10,25 @@
 
 <script setup>
 import axios from "axios";
-<<<<<<< HEAD
 import { onMounted, reactive } from "vue";
 import { Graph } from "@antv/g6";
 import { ElLoading } from 'element-plus';
 
-=======
-import { onMounted,onUnmounted, reactive, watch } from "vue";
-import { Graph } from "@antv/g6";
-import { ElLoading } from 'element-plus';
-import { ElMessage } from 'element-plus';
-import { useActionStore } from '@/store';
->>>>>>> main
 const state = reactive({
   graph: null,
   marks: {
     '0': "2024-01-03",
     '10': "2024-01-04",
     '20': "2024-01-05",
-<<<<<<< HEAD
+    '30': "2024-03-14",
-    '30': "2024-03-16",
+    '40': "2024-03-16",
-    '40': "2024-03-17",
-    '50': "2024-04-08",
     '60': "2024-05-26",
     '70': "2024-06-21",
-    '80': "2024-06-24",
-    '90': "2024-06-27",
     '100': "2024-06-28"
   },
   sliderValue: 0,
   loadingInstance: null
 })
-=======
-    '30': "2024-03-14",
-    '40': "2024-03-25",
-    '60': "2024-04-01",
-    '70': "2024-05-12",
-    '90': "2024-06-23",
-    '100': "2024-06-28"
-  },
-  sliderValue: 0,
-  loadingInstance: null,
-  isAutoPlaying: false,
-  isProcessingAutoPlay: false,       // 修正：防止重复点击的处理状态
-  remainingTime: 0,                  // 新增：记录暂停时剩余时间
-}) 
-const actionStore = useActionStore();
-
-watch(() => actionStore.triggerCombineAction, (value) => {
-  if (value) {
-    state.sliderValue = 30;
-    sliderChange(30);
-    setTimeout(() => {
-      highlightNode(actionStore.targetNodeId);
-    }, 500);
-  }
-});
->>>>>>> main
 let loadingInstance = null;
 // 显示 Loading 组件
 const showLoading = () => {
@@ -120,13 +59,7 @@ const sliderChange = (val) => {
 const getData = async (dataTime) => {
   showLoading()
   const res = await axios.get("http://10.7.1.52:1922/demo/edge/getEdgeData", {
-<<<<<<< HEAD
     params: { dataTime }
-=======
-    params: 
-    { dataTime }
-
->>>>>>> main
   });
   if (res.data.code == 200) {
     createGraph(res.data.data)
@@ -194,84 +127,12 @@ const createGraph = (data) => {
   });
   state.graph = graph
 }
-<<<<<<< HEAD
-=======
-// 增强按钮点击处理逻辑
-const toggleAutoPlay = () => {
-  // 防止重复点击
-  if (state.isProcessingAutoPlay) return;
-  state.isProcessingAutoPlay = true;
-
-  try {
-    if (state.isAutoPlaying) {
-      // 停止播放流程
-      if (state.autoPlayTimer) {
-        clearInterval(state.autoPlayTimer);
-        state.autoPlayTimer = null;
-      }
-      state.isAutoPlaying = false;
-      state.isPaused = false;
-      // 停止图形库动画
-      if (state.graph?.stop) state.graph.stop();
-      ElMessage.success('自动播放已停止');
-    } else {
-      // 开始播放流程
-      const markValues = Object.keys(state.marks).map(Number).sort((a, b) => a - b);
-      if (markValues.length <= 1) {
-        ElMessage.warning('标记点不足，无法启动自动播放');
-        return;
-      }
-
-      state.isAutoPlaying = true;
-      state.autoPlayTimer = setInterval(() => {
-        const currentIndex = markValues.indexOf(state.sliderValue);
-        const nextIndex = currentIndex + 1;
-
-        if (nextIndex >= markValues.length) {
-          // 播放完成自动停止
-          clearInterval(state.autoPlayTimer);
-          state.autoPlayTimer = null;
-          state.isAutoPlaying = false;
-          ElMessage.success('所有标记点已播放完成');
-          return;
-        }
-
-        state.sliderValue = markValues[nextIndex];
-        sliderChange(state.sliderValue);
-      }, 12000);
-      ElMessage.success('自动播放已启动');
-    }
-  } catch (error) {
-    console.error('自动播放控制错误:', error);
-    ElMessage.error('操作失败，请重试');
-    // 错误恢复
-    if (state.autoPlayTimer) {
-      clearInterval(state.autoPlayTimer);
-      state.autoPlayTimer = null;
-    }
-    state.isAutoPlaying = false;
-    state.isPaused = false;
-  } finally {
-    state.isProcessingAutoPlay = false;
-  }
-};
-
-const handleLocationClick = () => {
-  // 根据marks数据，3.14对应的值是30
-  state.sliderValue = 30;
-  sliderChange(30);
-}
->>>>>>> main
 
 /**
  * 高亮节点
  * @param id 节点id
  */
-<<<<<<< HEAD
 const highlightNode = (id) => {
-=======
- const highlightNode = (id) => {
->>>>>>> main
   state.graph.getNodes().forEach((node) => {
     state.graph.clearItemStates(node, "selected");
   });
@@ -290,37 +151,14 @@ const highlightNode = (id) => {
     }
   });
 }
-<<<<<<< HEAD
-=======
-const handleCombineAction = () => {
-  // 先执行定位操作
-  state.sliderValue = 30;
-  sliderChange(30);
-  
-  // 延迟执行高亮操作，确保定位完成后再高亮
-  setTimeout(() => {
-    highlightNode('840983');
-  }, 500);
-}
->>>>>>> main
 
 onMounted(() => {
   getData('2024-01-03')
 })
-<<<<<<< HEAD
-=======
-onUnmounted(() => {
-  // 组件卸载时清除定时器
-  if (state.autoPlayTimer) {
-    clearInterval(state.autoPlayTimer);
-  }
-})
->>>>>>> main
 </script>
 
 <style scoped>
 .graph-box {
-<<<<<<< HEAD
   width: 100%;
   height: 100%;
 }
@@ -328,15 +166,4 @@ onUnmounted(() => {
 .slider-box {
   margin-top: -230px;
 }
-=======
-  width: 80%;
-  height: 80%;
-  margin-top: -10px;
-}
-
-.slider-box {
-margin-top: 65px;
-}
-
->>>>>>> main
 </style>

src/views/Main.vue

@@ -6,7 +6,7 @@
         <img src="../assets/images/mess/key.png" alt="">
         <div class="tooltip-containner-data">
           <li><img :src="currentItem.img" alt="" style=""></li>
-          <li><img :src="currentItem.imgdata" alt="" style="width: 500px;height: 400px;margin-left: 20px;"></li>
+          <li><chart32_-inspection /></li>
           <li style="margin-left: 10px; margin-top:   20px;"><img src="../assets/images/logo/point.png"
               alt="">最初首发者：&nbsp;&nbsp;&nbsp;{{ currentItem.earler }} </li>
           <li style="margin-left: 10px;"><img src="../assets/images/logo/point.png" alt="">积极评论者：{{ currentItem.comenter
@@ -104,6 +104,9 @@
             </div>
             <div class="suggestion-containner">
               <ul>
+                <button
+                  style="background-image: url('src/assets/images/logo/定位.png'); background-size: cover; background-repeat: no-repeat; background-position: center;width: 20px;height: 20px;margin-left: 370px;margin-bottom: -60px;border-radius: 0px;border: 0;cursor: pointer;"
+                  @click.stop="handleCombineAction"></button>
                 <li v-for="item in filteredData" :key="item.id" @click="openDetailModal(item)"
                   @mouseenter="handleMouseEnter(item.id)" @mouseleave="handleMouseLeave()"
                   :class="{ 'hover-item': hoverItemId === item.id }">
@@ -113,11 +116,7 @@
                     <span class="span-1">{{ item.name }}</span>
                     <span class="span-2">粉丝数：&nbsp;{{ item.number }}</span>
                     <span class="span-3">推荐监控频率{{ item.transmit }}</span>
-                    <button
-                      style="background-image: url('src/assets/images/logo/定位.png'); background-size: cover; background-repeat: no-repeat; background-position: center;width: 20px;height: 20px;margin-left: 240px;margin-top:-45px;border-radius: 0px;border: 0;cursor: pointer;"
-                      @click.stop="handleCombineAction"></button>
                   </div>
-
                 </li>
               </ul>
             </div>
@@ -213,7 +212,8 @@ import ScrollContainer from '@/components/ScrollContainer.vue';
 import * as echarts from 'echarts';
 import axios from 'axios';
 import { useActionStore } from '@/store';
-// import { positionElement } from 'echarts/types/src/util/layout.js';
+import Chart32_Inspection from '@/components/Chart32_Inspection(1).vue';
+
 
 let myChart = null;
 const router = useRouter();

src/views/Navigation.vue

@@ -62,7 +62,7 @@
         :class="{ active: route.path === '/Main' }"
         @click="goToPage('/Main')"
       >
-        <img src="../assets/images/logo/mao.png" alt="" style="
+        <img src="../assets/images/logo/mainmao.png" alt="" style="
           display: block;
           width: 100%;
           height: 100%;
@@ -352,7 +352,6 @@ margin-top: -148px;
   /* 添加 z-index 属性 */
   position: relative; 
   z-index: 1001; 
-  animation: breathe 2s infinite ease-in-out;
   
 }
 /* 定义呼吸效果关键帧 */