echarts折线图设置每两秒自动选中tooltip

      drawChart1(hiddenDangerTrendData) {
            // 假设你的数据存储在一个名为data的变量中
            var data = hiddenDangerTrendData;
            // 创建空数组来存储结果
            var dates = [];
            var counts = [];
            var handledCounts = [];
            // 遍历对象中的每一个键值对
            for (var date in data) {
                if (data.hasOwnProperty(date)) {
                    // 提取并存储日期
                    dates.push(date);
                    // 提取并存储count值
                    counts.push(data[date].count);
                    // 提取并存储handledCount值
                    handledCounts.push(data[date].handledCount);
                }
            }
            // 输出结果
            // console.log("Dates: ", dates);
            // console.log("Counts: ", counts);
            // console.log("Handled Counts: ", handledCounts);
            // 总学时 
            // const { getTotalStaff } = data
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main1'));
            // 绘制图表
            myChart.clear();
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['隐患数', '已处理']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: dates
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '隐患数',
                        type: 'line',
                        smooth: true,
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: counts
                    },
                    {
                        name: '已处理',
                        type: 'line',
                        smooth: true,
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: handledCounts
                    }
                ]
            });

            let index = 0; // 初始化索引 
            // 使用定时器定时更新 tooltip 数据
            if (this.timer) clearInterval(this.timer);
            this.timer = setInterval(() => {
                myChart.dispatchAction({
                    type: "showTip", // 触发 tooltip 显示
                    seriesIndex: 0, // 触发 tooltip 的系列索引
                    dataIndex: index, // 触发 tooltip 的数据索引
                });
                index = (index + 1) % dates.length; // 更新索引,循环显示数据
            }, 2000); // 每隔 2 秒更新一次 
            // 鼠标移入暂停轮播
            myChart.on("mouseover", () => {
                clearInterval(this.timer);
                this.timer = null;
            });
            // 鼠标移出继续轮播
            myChart.on("globalout", () => {
                if (this.timer) {
                    clearInterval(this.timer);
                }
                this.timer = setInterval(() => {
                    myChart.dispatchAction({
                        type: "showTip", // 触发 tooltip 显示
                        seriesIndex: 0, // 触发 tooltip 的系列索引
                        dataIndex: index, // 触发 tooltip 的数据索引
                    });
                    index = (index + 1) % dates.length; // 更新索引,循环显示数据
                }, 2000); // 每隔 2 秒更新一次
            });
            // 添加自定义的tooltip显示事件监听
            myChart.on('showTip', function (params) {
                // 确保Tooltip已经渲染完成后再执行滚动操作
                setTimeout(function () {
                    var tooltipContainer = document.querySelector('#main1 > :nth-child(2)');
                    if (tooltipContainer) {
                        // 将滚动条置顶
                        tooltipContainer.scrollTop = 0;
                    }
                }, 0);
            });
        },

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web网页精选

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值