vue echarts tooltip 轮播

### Vue ECharts 实现 Tooltip 自动轮播效果

为了实现在 Vue 中使用 ECharts 的自动轮播 Tooltip 功能，可以借助 `echarts-auto-tooltip` 插件来简化开发过程。此插件允许设置定时器来自动生成并显示 Tooltips。

#### 安装依赖项
首先安装必要的 npm 包：

npm install echarts echarts-auto-tooltip vue-echarts

#### 创建组件结构
创建一个新的 Vue 组件用于集成 ECharts 图表及其自动轮播功能:

<template>
  <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import autoTooltipPlugin from 'echarts-auto-tooltip';

// 初始化图表实例
const chartContainer = $ref(null);
let myChart;

onMounted(() => {
    // 基于准备好的 DOM，初始化 echarts 实例
    myChart = echarts.init(chartContainer);

    // 注册自定义工具提示插件
    echarts.registerAction('autoShowTip', function (payload, ecInstance) {});

    const option = {
        title: { text: 'ECharts Auto Tooltip Example' },
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
        yAxis: { type: 'value' },
        series: [{
            name: 'Sales',
            type: 'bar',
            data: [120, 200, 150, 80, 70],
            itemStyle: {
                color: '#3aa1ff'
            }
        }]
    };

    // 设置配置项
    myChart.setOption(option);

    // 启用自动滚动提示框
    setTimeout(function () {
        let dataIndex = 0;
        setInterval(function () {
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: (dataIndex++) % 5
            });
        }, 2000); // 每隔两秒切换一次
    }, 1000);
});
</script>

<style scoped>
/* 添加样式 */
.echarts-tooltip {
    z-index: 999 !important;
}
</style>

这段代码展示了如何通过 JavaScript API 来控制 ECharts 的行为，在页面加载完成后启动一个计时器每隔一段时间触发一次 `showTip` 行为从而达到自动播放的效果[^1]。