首页 前端知识 echarts折线图设置每两秒自动选中tooltip

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

2025-03-16 12:03:48 前端知识 前端哥 430 970 我要收藏

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

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23879.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
浏览器升级提示:您的浏览器版本较低,建议您立即升级为知了极速浏览器,极速、安全、简约,上网速度更快!立即下载
复制成功!