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); }); },
复制