sgxt_web/src/views/home/echarts/tooltipDemo.vue

<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>