更新页面

2025-09-20 17:29:35 +08:00
parent 9f503c7069
commit c565736d49
26 changed files with 1398 additions and 106 deletions
--- a/src/views/home/echarts/tooltipDemo.vue
+++ b/src/views/home/echarts/tooltipDemo.vue
@ -0,0 +1,171 @@
+<template>
+  <div class="tooltip-demo">
+    <div class="demo-header">
+      <h2>ECharts 提示框循环展示演示</h2>
+      <div class="controls">
+        <el-button @click="toggleAutoTooltip" :type="autoTooltip ? 'success' : 'info'">
+          {{ autoTooltip ? '停止循环' : '开始循环' }}
+        </el-button>
+        <el-button @click="changeInterval">
+          切换间隔 (当前: {{ tooltipInterval }}ms)
+        </el-button>
+        <el-button @click="changeData">
+          切换数据
+        </el-button>
+      </div>
+    </div>
+    
+    <div class="chart-container">
+      <BarHatEcharts 
+        :data="currentData"
+        :autoTooltip="autoTooltip"
+        :tooltipInterval="tooltipInterval"
+        :pauseOnHover="true"
+        echartsId="tooltipDemoChart"
+      />
+    </div>
+    
+    <div class="feature-description">
+      <h3>功能说明：</h3>
+      <ul>
+        <li>✅ <strong>自动循环展示</strong>：提示框会按设定间隔自动循环显示每个数据点的信息</li>
+        <li>✅ <strong>智能暂停</strong>：鼠标悬停在图表上时自动暂停循环，离开时恢复</li>
+        <li>✅ <strong>可配置间隔</strong>：支持自定义循环间隔时间（1秒、2秒、3秒）</li>
+        <li>✅ <strong>美观样式</strong>：深色主题提示框，蓝色边框，清晰的数据展示</li>
+        <li>✅ <strong>错误处理</strong>：完善的错误处理机制，确保稳定运行</li>
+        <li>✅ <strong>生命周期管理</strong>：组件卸载时自动清理定时器，防止内存泄漏</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import BarHatEcharts from './barHatEcharts.vue';
+
+const autoTooltip = ref(true);
+const tooltipInterval = ref(2000);
+
+const dataSet1 = {
+  xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
+  list: [
+    { name: "总数", value: [10,20,30,40,50,60,70], color:['rgba(0,244,255,1)','rgba(0,77,167,1)'], hatColor:'#087df9'},
+    { name: "已处置", value: [8,15,25,35,45,55,65], color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'], hatColor:'#00FFFF'},
+  ]
+};
+
+const dataSet2 = {
+  xDate: ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区'],
+  list: [
+    { name: "报警数量", value: [25,35,45,30,20,40], color:['rgba(255,99,132,1)','rgba(255,99,132,0.3)'], hatColor:'#ff6384'},
+    { name: "处理完成", value: [20,30,40,25,18,35], color:['rgba(54,162,235,1)','rgba(54,162,235,0.3)'], hatColor:'#36a2eb'},
+    { name: "待处理", value: [5,5,5,5,2,5], color:['rgba(255,206,86,1)','rgba(255,206,86,0.3)'], hatColor:'#ffce56'},
+  ]
+};
+
+const currentData = ref(dataSet1);
+
+function toggleAutoTooltip() {
+  autoTooltip.value = !autoTooltip.value;
+}
+
+function changeInterval() {
+  const intervals = [1000, 2000, 3000];
+  const currentIndex = intervals.indexOf(tooltipInterval.value);
+  const nextIndex = (currentIndex + 1) % intervals.length;
+  tooltipInterval.value = intervals[nextIndex];
+}
+
+function changeData() {
+  currentData.value = currentData.value === dataSet1 ? dataSet2 : dataSet1;
+}
+</script>
+
+<style lang="scss" scoped>
+.tooltip-demo {
+  padding: 20px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  min-height: 100vh;
+  color: #fff;
+}
+
+.demo-header {
+  margin-bottom: 30px;
+  text-align: center;
+  
+  h2 {
+    margin-bottom: 20px;
+    color: #00d4ff;
+    font-size: 28px;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  }
+  
+  .controls {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    flex-wrap: wrap;
+  }
+}
+
+.chart-container {
+  height: 400px;
+  background: rgba(0,29,75,0.6);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 30px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+}
+
+.feature-description {
+  background: rgba(0,0,0,0.3);
+  padding: 20px;
+  border-radius: 8px;
+  border-left: 4px solid #00d4ff;
+  
+  h3 {
+    color: #00d4ff;
+    margin-bottom: 15px;
+    font-size: 20px;
+  }
+  
+  ul {
+    list-style: none;
+    padding: 0;
+    
+    li {
+      margin-bottom: 10px;
+      padding-left: 10px;
+      line-height: 1.6;
+      
+      strong {
+        color: #00d4ff;
+      }
+    }
+  }
+}
+
+:deep(.el-button) {
+  background: rgba(0,212,255,0.2);
+  border-color: #00d4ff;
+  color: #00d4ff;
+  
+  &:hover {
+    background: rgba(0,212,255,0.3);
+    border-color: #00d4ff;
+    color: #fff;
+  }
+  
+  &.el-button--success {
+    background: rgba(103,194,58,0.2);
+    border-color: #67c23a;
+    color: #67c23a;
+    
+    &:hover {
+      background: rgba(103,194,58,0.3);
+      border-color: #67c23a;
+      color: #fff;
+    }
+  }
+}
+</style>