echarts 区域缩放dataZoom自动滚动带提示框(tooltip)

ECharts是一个强大的数据可视化库，它支持区域缩放（DataZoom）功能，用于放大图表的部分区域。当你启用数据缩放并且设置为自动滚动带（auto scroll bar），当用户在缩放区域上滑动鼠标滚轮时，图表会自动调整显示范围，以便查看更细节的内容。

关于提示框（tooltip），在ECharts中，它是用来显示鼠标悬停在图上某个点时的详细信息，默认情况下，当数据区域被缩放时，tooltip也会相应地调整其位置和内容，跟随用户的交互动作。你可以自定义tooltip的样式、内容格式以及显示策略等。

如果你想在数据缩放和滚动带的基础上添加提示框，只需在配置项中启用`dataZoom`并指定相关的选项，如：

option = {
    dataZoom: {
        type: 'scroll', // 指定为滚动类型
        start: 0,
        end: 100, // 自动滚动带的初始比例
        show: true,
        realtime: true, // 是否实时更新
        triggerOn: 'mousemove', // 触发事件
        axisPointer: { // 鼠标指针设置
            type: 'line',
            lineStyle: {
                color: '#fff'
            }
        },
        tooltip: { // 提示框设置
            formatter: '{b}: {c} ({d%})', // 格式化字符串
            trigger: 'axis' // 当数据区域变化时触发
        }
    },
    series: ... // 系列配置
};