echarts 折线图默认显示tooltip提示框内容

最新推荐文章于 2025-06-16 11:17:18 发布

buyaopingbixiazai

最新推荐文章于 2025-06-16 11:17:18 发布

阅读量2.8w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue echarts 文章标签： echarts tooltip

本文链接：https://blog.youkuaiyun.com/buyaopingbixiazai/article/details/86547478

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

本文介绍如何在ECharts中配置双Y轴折线图的Tooltip，通过设置tooltip的trigger属性为'axis'，并利用dispatchAction方法自定义显示提示框的时间和数据位置。适用于需要增强图表交互性和数据可视化的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大致思路：tooltip提示框默认是鼠标悬浮事件，echarts默认有触发这个事件的函数dispatchAction，调用即可。

下边展示的一个双Y轴折线图的提示：

1.首先在option里面配置tooltip，只贴了tooltip的配置，其他的省略了

 option: {
       tooltip: {
          //鼠标悬停提示内容
          trigger: 'axis', // 触发类型，默认数据触发，可选为：'axis' item
          axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "line", // 默认为直线，可选为：'line' | 'shadow'
              label:'cross',
              show:true
            }, 
          }
}

2.初始化echarts,并且调用dispatchActon方法触发tooltip的事件

            this.chart = this.$echarts.init(document.getElementById(this.id));//初始化echarts
            console.info(this.option);
            this.chart.setOption(this.option);
            window.addEventListener("resize", this.chart.resize);//缩放
            //显示提示框
            this.chart.dispatchAction({
                  type: 'showTip',
                  seriesIndex:1,  // 显示第几个series
                  dataIndex: new Date().getHours() // 显示第几个数据
            });

效果图：